Create Navigation Menus with jQuery and Dreamweaver

with Chris Converse
please wait ...
Create Navigation Menus with jQuery and Dreamweaver
Video duration: 0s 25m 49s Intermediate


Find out how to add stylized dropdown menus to your web site using HTML, CSS, and JavaScript. Working in Dreamweaver, author Chris Converse breaks down the menu design process, explaining how to build a menu foundation using unordered lists, establish hierarchy with nested submenus, apply styling using CSS rules, and incorporate dropdown functionality using a jQuery plug-in.

To preview the finished project, visit:

This course was created and produced by Chris Converse. We are honored to host his material in the online training library.

Developer Web
Dreamweaver jQuery

Previewing the final project

Hi, this is Chris Converse, and this is the course on creating a dropdown menu for your web site. I want to start by showing the Final Project. So inside of the exercise files, you can open up inside of Final Project, index.html. And what we are going to do here is take a standard unordered list, and we are going to turn this into a dropdown menu. So when I roll over individual items, we can see a menu that animates down. And we can even create submenus. So under Link 4 here, for example, I have Sub Link here, which will then open up a third level menu navigation item. So using a plug-in called jQuery Drop Menu, we are going to take a standard unordered list in HTML, like this, and have the JavaScript in CSS conform that into this menu that functions like a dropdown system.

This is a very common technique that you'll find among many jQuery and JavaScript plug-ins that turn your unordered lists into menus, and we are going to walk step-by-step through how to do that. Now, if you're not a premium subscriber to the online training library, we are supplying folders 1 and 3 out of the exercise files, which includes the plug-in and all of the CSS files and the Snippet files to help you create some of the CSS rules inside of here. So while you won't get the art templates in Photoshop in the Final Project, you will have enough contents so that you can follow along in the course as well.

So I hope this sounds interesting to you, and if so, let's get started with the first movie.

Find answers to the most frequently asked questions about Create Navigation Menus with jQuery and Dreamweaver .

Expand all | Collapse all
please wait ...
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.
please wait ...