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.
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.
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...)
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