If my email is anything to go by, drop-down menus like these
appear to be one of the most sought-after pieces of CCS code, and
I wrote my original version of them back in 2003 after I became
tired of dealing with the complexities of making menus work with
JavaScript. As you can see from Figure 6.36, this menu can be up
to four levels deep, and it is very easy to implement in your site.
All you need to do is write a simple set of unordered lists, just like
the ones we saw in the navigation element we made previously,
and nest them inside each other to create the various levels of the
menu, as I will show you shortly. Then wrap the whole thing in
a div that has a class to associate the menu with the related CSS
(multi_level_menus_class.css in the Stylib library), and you are
done. If you plan to generate the menu choices from items in your
site??™s database, the programmers on your team will love the simplicity
of the code (just nested unordered lists) that their middleware
has to generate to populate these menus.
Other CSS-based menus that I saw before I wrote these required
different classes for every level of the menu to be present on every
list item, which I felt made them unnecessarily complex. So when I
originally approached the problem of creating a menu from nested
list markup, I wanted to have it work without needing to add any
additional markup??”just vanilla XHTML list markup and the CSS.
Pages:
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258