Drop Down Category Menus details and summary Elements
The html details and summary tags do not yet work in all browsers. Out of the 4 most popular browsers, it only works in Google chrome so far. So that is where we will experiment with it for now. And we can surely use it for web site development when these two elements become standardized and work in all browsers. That should happen very soon. The HTML5 details element is specifically geared to have native open and close behavior for the content that is inside of it. This native behavior removes the need to have CSS or JavaScript code in place to make that kind of magic happen, it happens by default for that element. Used in conjunction with the HTML5 summary element, the details element seems somewhat suited for drop down menu systems. It might not be the intended use of the details element, but if it works OK for it, then why not? They can be made into vertical or horizontal drop down menu systems.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5 CSS Easy Drop Menu System</title>
<style>
body{ margin:0px; }
#leftMenu {
width: 15%;
min-width: 150px;
}
#leftMenu > details{
}
#leftMenu > details > summary{
cursor:pointer;
background: #DFEFFF;
margin:6px;
padding:8px;
}
#leftMenu > details > summary:hover{
background: #EFEFEF;
}
#leftMenu > details > summary::-webkit-details-marker{
/*display: none;*/
}
#leftMenu > details > a{
display:block;
text-decoration: none;
color:#000;
font-size:13px;
margin:3px 6px 3px 18px;
padding: 4px;
background: #EFEFEF;
}
#leftMenu > details > a:hover{
background: #DFEFFF;
font-weight: bold;
}
#leftMenu > details > a:before{
content: "- ";
}
</style>
</head>
<body>
<div id="leftMenu">
<details>
<summary>Menu Item 1</summary>
<a href="#">Subcategory A</a>
<a href="#">Subcategory B</a>
<a href="#">Subcategory C</a>
</details>
<details>
<summary>Menu Item 2</summary>
<a href="#">Subcategory A</a>
<a href="#">Subcategory B</a>
</details>
<details>
<summary>Menu Item 3</summary>
<a href="#">Subcategory A</a>
<a href="#">Subcategory B</a>
<a href="#">Subcategory C</a>
<a href="#">Subcategory D</a>
<a href="#">Subcategory E</a>
</details>
<details>
<summary>Menu Item 4</summary>
<a href="#">Subcategory A</a>
<a href="#">Subcategory B</a>
<a href="#">Subcategory C</a>
</details>
</div>
</body>
</html>