Hey, so, I’m going to detail my method for making menus. I’ll try as well to explain the reasons behind the choices I make. If you have any questions, let me know and I’ll try to fabricate a plausible answer.
Two popular menu types are drop down menus, and your basic expanding lists. But good news, the HTML we use for both is the same! Why? Because they’re both menus! They may look different, but in essence they’re nothing but a nested list of links. And in my opinion, we should do our best to use HTML to describe the data we’re presenting.
One big bonus is that if we take out the CSS, the website still usable. We can also easily provide alternate stylesheets for things like mobile phones, and pages are easy to navigate from text-based browsers. Most importantly, the HTML is short, clear, and easily readable.
Which is why I’m going to use nested lists. The styling will be done with CSS, and some event handling with Javascript (I’ll use JQuery because it’s nice, but don’t feel tied to it).
I’ve prepared a page complete with code quotes and comments:
I was too lazy to style it. Also, the magic was a trick. There was no magic. I’m sorry.
Your friend,
Brad
I disagree about the magic — that one can implement dropdown menu behaviour only in CSS is pretty magic and not something I was aware of.
It took me a while to figure out all the CSS. I guess selectors work like “tagname.class [childtag …]”. Now I know how to write CSS!
That example.html is sweet. Anybody who hasn’t tried it definitely should. If you set the class to both “drop” and “side” you can get vertical dropdown menus. It’s a little too bad one can only play with the html and not the styles too.
Your statement is in every way correct! It does work like “tagname.class [childtag …]”, but a more general description might be “tagname.class [descendant …]”.
Tyty! Do you think I should make it so you can play with the CSS in that example?
@Brad
You have taught me CSS!
I dunno? If you did that I would play with the CSS a small amount and enjoy it. If I were you I would definitely not do it if it takes significant effort?
I was too lazy to make the interface pretty still, you know with autosizing/hiding/showing and all that.
I made one that let’s you change the CSS too! 😀
http://www.gigglingcorpse.com/examples/menus/example2.html
Also I may have found an interesting bug in IE (the current version works in IE6 and 7). I will try again to see if I imagined it?
Yeah, it looks like IE6 and 7 don’t treat <style /> like other tags. They have a problem with you changing its contents.
The same sort of thing happens with a few other tags, such as <selects>, unless my memory is lying to me.
Here is an example: http://paste.bradleygill.com/index.php?paste_id=6169
Brad I love you like a child loves meat. This will truly aid me in my journey to becoming an internet programmer.
@Shaun
Haha I am reminded of coach oliander and his nightmarish meat plants