Adam Khoury

Donate funds to show love and support

Click the button below to donate funds securely online. You can use your PayPal account or a credit card.

Your donations help free up my time to produce more content and assist in covering server costs. It's also a great way to say thanks for the content!

Application Configuration

Adam will be adding options here soon.

Drop Down Category Menus details and summary Elements

Published :
Author :
Adam Khoury
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>