HTML5 CSS Easy 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.

[peribabbles]

Very simple and yet detailed enough tutorial. I'm ginna try this out for sure. Thanks for making this one and sharing it with us, mate. :)

[michele]

You re teaching me a lot, please keep explaining as you do :)
GREAT JOB !

[javierpedrera]

Damn, man you explain things like a boss. Thanks for your work

[HTMLCSSjQueryTuts]

There are 3 ways you can link your css to your HTML. You can make a separate file (external css), you can put your css in the head section of your HTML, assuming that you're only going to have one page and not a website or you can use the @import which is not recommended anymore. Since Adam was showing how to make a menu only, he probably thought it more convenient to put the code in the head section of the document.

[mannycepeda]

Hey Adam, Merry Christmas. Can you help me setting up a local server in my computer. I know you have some videos but I can't find them. Thanks! Manny

[ClintNorwood]

top - right - bottom - left
I always use trbl =  "trouble" to remember that.

[brovin]

another good video adam. . . . .Merry Xmas from Ireland!

[tysoe]

When using the shorthand version for things like paddings where it's "Top Right Bottom Left" I remember it by "North East South West" because they're always said in that order!

[Contreras]

another great video :D merry Christmas Adam

[JanettenBoom]

Yes! Just what I was looking for! Thanx!! Love your lessons!

[ThePhotory]

For coding? The best and cheapest one is probably Notepad++ (only for Windows but can be run through Wine on Mac and Linux).

For logos and buttons and stuff like that I would say either Illustarator or Photoshop maybe you can throw in Fireworks to but it's outdated. If you don't want to spend money on them you could allways get Gimp which is a photoeditor just like Photoshop, where you can make almost everything you can do in photoshop

[etherealvox]

You sir are amazing ! Thank you very much for your tutorials!

[SwedishBroadcast]

Very good video!
Just one question which I have.
I'm pretty new to coding websites, but I've always had a separate css document. I noticed that you did your css in your html or am I wrong?
Doesnt it take unnecessary space to have css in your html doc?
Please answer and cheers!

[michele]

Adam How do you put the  menus one close to the other in an orizontal way?

[burnburn]

what are the best or most popular softwares that most web developers use?

[malulz]

I love your videos, and have been working my way through them as I can. The only problem I can see with this menu is that the 'Menu Item X' don't, themselves, have or contain an anchor tag. I also realize this is to demonstrate the summary and details elements.I haven't tried to change the inner html elements of the objects, but they seem to lack something, or are not fully implemented as you have stated. Thanks for the vid.

[tonyn]

Another great tutorial! Just wondering how these drop downs will work with responsive design?

[peterm.souzajr.]

i used this on my social network to make mine function more like facebook. my website looks great! 

[henryaudubon]

Excellent video! Glad to know this stuff, thanks for teaching.

[soaleater]

I've only been doing HTML and CSS for a while so please could you tell me how to align them horizontally. Thanks.