Join Chris Converse for an in-depth discussion in this video Adding CSS rules to style the menu, part of Creating Navigation Menus with jQuery and Dreamweaver.
Now there is a fair amount of CSS that goes along with styling these dropdown menus.…So I have gone ahead and created the snippet to kind of give us a jumpstart.…So from Dreamweaver come up to the File menu, let's choose Open.…Go into the exercise files, folder 3, and let's open up dropmenu.css.…So in here I have added a bunch of comments to help you understand what part of…the dropdown menu each one of these styles is affecting.…So all items, top items are the ones that go across the very top, the sub items…are the first level dropdown menus, and then the sub sub-items, which is the…third-level menu items. And down here we also have the indicators.…
These are custom CSS rules that I have added into this particular plug-in, and…we're going to look at activating with the jQuery, adding indicators to those menus.…This plug-in doesn't actually have that built-in to the architecture.…Now I'd also like to call your attention to the display: none attribute here that's inside of the main dropmenu.…This is going to be applied to the UL, where we just applied a dropmenu class in the last movie.…
To preview the finished project, visit: http://codifydesign.com/chris/lynda/samples/course-0015
This course was created and produced by Chris Converse. We are honored to host his material in the Lynda.com online training library.
Skill Level Intermediate
Q: Where can I find more menu information and plug-ins from menu systems?
A: There is a great article from 1stwebdesigner, "38 jQuery And CSS Drop Down Multi Level Menu Solutions", where they list and explain thirty-eight different plug-ins and techniques.