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:

The details / summary tag can provide additional details about a topic, or it can be used to create a dropdown menu, or additional info with links.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

Dropdown 1 Dropdown 2 Dropdown 3

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.

Copyright © Lage.us Website Development | Disclaimer | Privacy Policy | Terms of Use