Creating CSS-Based Menus
Drop-down menus allow you to offer your users a large number of
navigation options using very little screen estate, while providing an
insight into your site??™s structure. The menus illustrated here, which
you can ?¬? nd in the Stylib library ?¬? les, could provide links to dozens
of pages, although only the top level choices are visible until the
user hovers over the menu.
Here is what these menus look like (Figure 6.36):
Anyone who read the original edition of Stylin??™ with CSS might
think they have seen these menus in Figure 6.36 before, but I have
entirely rewritten the CSS to make them lighter (less code), and
optimized them for the new breed of browsers that has emerged
since Stylin??™ was written way back in 2004. The user-modi?¬? able CSS,
such as colors, line weights, and font sizes, is separated from the
more complex code that makes the menus work, so you can dive in
and make stylistic changes con?¬? dently, knowing you will not break
the underlying ???mechanics.??? These menus also now work better
in IE6, as I have hacked the bugs that prevented the backgrounds
of the menu items from responding to clicks in that browser. So
FIGURE 6.36 A multi-level menu
written in CSS.
STYLIN??™ WITH CSS - CHAPTER 6 218
while they are visually similar (the XHTML markup I use to demo
them here is unchanged from the original Stylin??™ version), the CSS is
greatly improved.
Pages:
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257