Pure HTML Dropdown Details Summary Tag
HTML provides a native dropdown of sorts. The intent is to provide more information for a summary line. It can be styled in a number of ways to present a dropdown menu or just additional info about a topic. The details/summary tags together are a little more user friendly than using a title tag to show additional information.
Add style="cursor: pointer;" so the users know something happens when clicked. Otherwise this is a pure html-only dropdown.
Method 1 (HTML only)
<details style="cursor: pointer;">
<summary>
<!-- the summary line goes here -->
</summary>
<!-- the additional details go here -->
</details>
<!-- or "additional details can bo above the summary, see below -->
<details style="cursor: pointer;">
<!-- additional details can also go above the summary, it works exactly the same in either place -->
<summary>
<!-- the summary line goes here -->
</summary>
</details>
Example 1:
HTML only dropdown menu. Click to see example ...
Method 2 (class it up with some style)
The look of the above example isn't that pretty. It's pure html with no styling. However see below, with style added it can resemble a menu icon (hamburger menu) with dropdown behavior, using the details tag behavior.
This css uses the html <details><Summary></Summary></details> tag along with CSS to create an HTML only dropdown menu.
The CSS only changes the look of the tag from the arrow, to the menu icon.
CSS
/* this is the hamburger menu which
replaces the default arrow; the summary tag
is hidden using display:none */
summary {
outline:none;
cursor: pointer;
display: inline-block;
border-bottom: 10.5px double black;
border-top: 3.5px solid black;
height: 4px;
width: 25px;
box-sizing:initial;
}
/* this hides the default arrow */
details summary::-webkit-details-marker {
display:none;
}
#main a{
display: block;
line-height:20px;
margin-left:1%;
}
HTML
<details id="main">
<summary></summary>
<a href="javascript:;">Dropdown 1</a>
<a href="javascript:;">Dropdown 2</a>
<a href="javascript:;">Dropdown 3</a>
</details>
Example 2 - styled like a traditional dropdown menu
Content below the details summary tags are pushed down. The style creates the Hamburger Menu Icon. The dropdown behavior is from the html details tag.