Webdesign/CSS Menus

With the prevalence of Javascript on the modern Web, it's easy to forget that CSS, too, has some tricks up its sleeve. With CSS, effects such as popup boxes and drop-down menus are easier to code, work faster and aren't stopped by security measures such as NoScript. Unless you need fancy animations (trust me, you don't) or compatibility with obsolete browsers (IE6, anyone?) you may want to give style sheets a chance.

I have explained elsewhere how to create three-column layouts using CSS. This tutorial focuses on the specific topic of navigation menus and menubars. And because it is a tutorial, I'll stick to the basics. The techniques presented can be combined to create more advanced examples.

Let's start with a classical menu bar, like the one you can find in any desktop app. That is essentially a row of words; clicking on one unrolls a whole list of options. Except CSS can't catch mouse clicks, so we'll have to make do with hovering.

CSS menubar demo page

Note the simplicity of both markup and CSS: with only 8 lines of the latter, we've packed together a bunch of definition lists, and made sure the data items (= menu options) are only visible when the mouse is over the menu.

Of course, with this technique you can't have submenus. Or separators. If you do need those (beware of complexity!) here's a slightly more advanced example.

CSS deep menu demo page

This time we need a whopping 9 lines of style declarations, but also the more advanced "direct child" selector. That's because we only want the next level of menus to open at each step.

(To be continued...)

Creative Commons License
CSS Menus by Felix Pleşoianu is licensed under a Creative Commons Attribution-Share Alike 3.0 Unported License.

Last modified: Thu 16 10 2014, 06:51:00 UTC