The <details> tag - Quick Observations
Click any line which begins with a right-pointing triangle (▸). Click again to collapse.
This is a <details> tag without a specified summary. The default word is "Details".
In addition, it has a css style of cursor: pointer;. Without the style, the default pointer would be a text I-beam (confusing, I think).
There's a long list of cursor styles: Mozilla Dev. Cursor Styles.
Surprising
I wish I had known about this feature's easy implementation before. It has been available since October 2014 with the release of HTML5.
Easy to code
Using the <details> tag with a summary tag makes it very easy to create an expandable list
Using CSS styles is effective. A 50px indent is in play here for the expanded info.
<details>
<summary>Label of details line</summary>
<p>Detail contents (need not be a paragraph)</p>
</details>
Easily styled
CSS styling, especially for making indented text is effective.
<style>
details {
cursor: pointer;
}
summary {
cursor: pointer;
font-family:sans-serif;
font-weight: bold;
font-size:1em;
}
.indent {
margin-left:50px;
}
</style>
Can be nested.
Use style to indent a secondary level which remains hidden until top level is clicked.
secondary level
even more information can be revealed.
Size Chart Widget - an example
Compact tables of contents?
I think I've seen it used in FAQ before, but maybe a table of contents will be effective.
Conclusion:
I will give this a try for sure!
Between 2016 and 2023, the menu for this site looked like this:
It was made using <ul> elements with special class modifications. See how it was done.
In 2023, I figured out how to do a menu using <details>. Most pages of this site use it since February 2023.
I'm going to illustrate the real menu with just the first couple of choices. (Note that these are live links.)
"Home" has no need for further options, so it is a simple link. "Photos" uses the <details> element to be expandable into an appropriate list of links for the category. The down arrow character (↓) is an added clue that the menu item will expand downward, especially since the default sideways triangle has been removed by list-style: none; as a part of the style applied to the details tag.
<a href="http://runeman.org">Home</a> <details>Images ↓</summary> <a href="http://runeman.org/clipart">Clipart</a><br> <a href="http://runeman.org/photo">Photos</a><br> <a href="https://pixelfed.social/algot">Wildflowers</a><br> <a href="http://runeman.org/images.html">Misc</a><br> </details>
Most tutorial examples for <details> show a paragraph as the element following the summary, but using line breaks at the end of the individual links takes less space as the menu expands.
When the menu item expands, it pushes the main page section down, not covering the page text by ending the menu with a paragraph styled to clear the float: left style which is what makes these details elements work in the space-conserving horizontal style this menu needs.
For <details> the style is float: left; width: 12.5%; For <summary> the style is padding: 4px; background-color: #eeeeee; color: black; border: none; box-shadow: 1px 1px 2px #bbbbbb; cursor: pointer; list-style: none;
To make both of these menus really work well involves using JavaScript, which allows a single line of code on every page of this site to call the same menu as a JavaScript file.
<script type="text/javascript" src="http://runeman.org/menu.js"></script>Instead of having to change each page. To change the menu I only need to edit the menu.js file. All pages then get the changes from that. As of February 2023, the style for the elements is enclosed within the JavaScript file which makes it very dense. I have not figured out how to make the style work without enclosing it in each element of the JavaScript file.
Important: If you use either of the expandable menu styles, you will need to consider non-JavaScript alternatives for people who do not allow JavaScript to run in their browsers. My solution has been to include a <noscript> alternative. I put it in the template for my pages so I can more quickly start work on new pages.
<noscript> <table width="100%"> <tr> <td class="textmenu" width="10%"><a href="http://runeman.org/">Home</a></td> <td class="textmenu" width="10%"><a href="http://runeman.org/images.html">Images</a></td> <td class="textmenu"><a href="http://runeman.org/puzzles.html">Puzzles</a></td> <td class="textmenu" width="10%"><a href="http://runeman.org/writing.html">Writing</a></td> <td class="textmenu width="10%"><a href="http://runeman.org/articles/natick-foss/">NatickFOSS</a></td> <td class="textmenu width="10%"><a href="http://runeman.org/programming/">Programming</a></td> <td class="textmenu width="10%"><a href="http://runeman.org/misc.html">Misc</a></td> <td class="textmenu width="10%"><a href="http://runeman.org/about.html">About</a></td> <td width="10%"> </td> <td width="10%"> </td> <td width="10%"> </td> </tr> </table> <p>This site uses JavaScript to provide the normal navigation menu and some other important features as well. If you do not have JavaScript enabled, your experience with this site will be sub-par. The non-JS menu which you can see will get you through to most of the content, but if you are also using a text-only browser, note that some sections of the site are focused on images and will be disappointing to you.<br> <strong>Sorry for the inconvenience.</strong></p> </noscript>