Test Pages: Menus: Horizontal <Details> Tags

Introduction

This is one of the test pages to investigate how accessible aware controls such as buttons, and the details and dialog tags can be used to create menus. This page concentrates on the <details> tag.

The <Details> Tag

The <details> tag is designed to show a piece of text which when clicked on, displays a longer text...

How they work make them usable for vertical accordian menus...

This type of menu is great in that the details elements can simply be clicked on to be opened and closed and are keyboard tabbable and can be opened and closed using the spacebar or Enter key. They cannot be closed using the Esc key.

A problem wih them when used as menus is that of grouping. When one is open and another is opened, then the first opened is not automatically closed. This problem has been addressed using JavaScript on Stack Overflow. Adapting the shortest code on that, this can be produced...

This is done by giving the <details> tags a class of "dettesta" and using the JavaScript:

<script type="text/javascript">
	document.querySelectorAll('.dettesta').forEach((D,_,A)=>{ D.ontoggle =_=>{ if(D.open) A.forEach(d =>{ if(d!=D) d.open=false })}
})
</script>

But I want them to line up horizontally like this...

This was done by giving the details tag a class of dettestb and the CSS changed to make them inline using this: .dettestb { display:inline; }

Now there's a new problem. When the details summary text is clicked on and the full text opened then the other detail tags move to follow the opened text. I solved this by giving the contents of the details tag absolute positioning. As doing this removes the element from the normal flow of the page it overlays anything on the page below it. This shouldn't be too much of a problem in the finished menu. I have coloured the background of the details text to make it plain what is happening. It would be nice if the cursor changed to the pointed finger when the summary is hovered over to show it is clickable.

The <details> tags were given the class of "dettestc" and they contain a single <p> tag. The CSS for this example is:

.dettestc { display:inline;	}
	
.dettestc summary{ cursor:pointer; }
	
.dettestc p {
	position:absolute;
	top:auto;
	left:10px;
	background-color: greenyellow;
}

Styling the <Summary> Tag

The default arrow icon in the <summary> tag uses the list-style property. It can be removed by simply setting it's styling to "none", but the easiest way is to simply set the <summary> tag's display styling to "block".

The CSS to do the above is:

	.sumtestd { display:block; }

Alternatively, using the list-style property the following can be used:

	.sumtestd {list-style: none}
	.sumtestd::-webkit-details-marker {display: none; }

The problem with the above that there is now no indication that the element is clickable.

Suppose you want to use your own icons instead of the default. First of all remove the default icons as in the last example then use the ::before CSS selecor to insert your own. I use up/down triangles in my current menus, so I'll use those here...

The CSS to do this is:

	.sumteste { display:block; }
	
	.detteste .sumteste::before { content:"\25BC "; }

	.detteste[open] .sumteste::before { content:"\25B2  "; }

Using the ::after pseudo-selector the position of the icon can be moved to after the summary text...

The CSS to do this is...

	.sumtestf { display:block; }
	
	.dettestf .sumtestf::after { content:"\25BC "; }

	.dettestf[open] .sumtestf::after { content:"\25B2  "; }

A Full Menu

The HTML for the above menu is:

<div id="mainnav">
	<details class="detmenu">
		<summary class="summenu">All Sections </summary>
		<div class="submenu"><!--#include virtual="/inc/main_menu.htm" --></div>
	</details>
	<details class="detmenu">
		<summary class="summenu">Utilities Section </summary>
		<div class="submenu"><!--#include virtual="/utils/inc/utilities_menu.htm" --></div>
	</details>
</div>

The includes are just adding unordered lists on the server.

The CSS for it is:

#mainnav {
	width: 100%;
	background-color: midnightblue;
	color: white;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1.2em;
}

.detmenu { display:inline; }
	
.summenu {	
	display: block;
	padding: 10px;
	cursor: pointer;
}
	
.summenu:hover, .summenu:focus, .submenu a:hover, .submenu a:focus  { color: cyan; }
	
.detmenu[open] .summenu::after { content:"\25B2 "; }

.summenu::after { content:" \25BC "; }
	
.submenu {
	position: absolute;
	left: 8px;
	background-color: midnightblue;
}

.submenu ul {
	column-count: 6;
	margin-top: -20px;
}
 
.submenu li {
	list-style-type: none;
	display:block;
}
	
.submenu a {
	color: white;
	text-decoration: none;
}

The JavaScript for it is:

document.querySelectorAll('.detmenu').forEach((D,_,A)=>{ D.ontoggle =_=>{ if(D.open) A.forEach(d =>{ if(d!=D) d.open=false })}})

The above JavaScript came from Stack Overflow and may be too terse for maintainability, in which case one of the other snippets on the page can be used.

Sources and Resources