What follows is an exercise that will teach you how to create CSS
drop-down menus from ???ID-and-class-free??? lists. All that??™s required
is context??”a surrounding div with a class, so the correct CSS styles
are applied to the list within. The biggest bene?¬? t of this all-CSS
based approach is that it scales to a limitless number of choices at
every level, simply by adding more items to the nested lists, without
any modi?¬? cations to the CSS.
A DROP-DOWN MENU TUTORIAL
Rather than take you through the lengthy and complex CSS of the
multi-level menu, let??™s look at a more simple example to help you
understand the concepts behind it. This is a fun exercise to write for
yourself from scratch. It??™s not too complex, but it incorporates just
about every CSS technique that we have seen so far. So once you
can successfully write the CSS for this menu, you will feel more con-
?¬? dent in tackling all kinds of CSS development problems.
As shown in Figure 6.36, the multilevel
menu in the Stylib library can
support up to four menu levels.
Although more levels could be easily
added, beyond four levels becomes
a bit cumbersome for the user to
navigate.
DESIGNING INTERFACE COMPONENTS 219
In this exercise, we will create a two-level menu: a horizontal row of
choices and a menu that drops from each one when hovered. Let??™s
start with the markup for the top level.
Pages:
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259