HTML5 CSS Easy Drop Down Category Menus details and summary Elements



Lesson Code: http://www.developphp.com/video/CSS/Drop-Down-Category-Menus-details-and-summary-Elements
Learn to assemble an HTML5 details driven drop down menu system. The html5 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.

source

Leave a Reply

Your email address will not be published. Required fields are marked *