Create Navigation Menus with jQuery

with Chris Converse
please wait ...
Create Navigation Menus with jQuery
Video duration: 0s 24m 1s Intermediate


Find out how to add stylized dropdown menus to your web site using HTML, CSS, and JavaScript. In this short course, 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

Previewing the final project

Hi, This is Chris Converse, and this is a 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 a Final Project > index.html. And what we're going to do here is take a standard unordered list, and we're going to turn this into a dropdown menu. So when I rollover 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're going to take a standard unordered list in HTML like this, and have the JavaScript and 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 list into menus, and we're 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 one and three 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 up here. So while you won't get the Art Templates in Photoshop and the final project you will have enough contents 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.

There are currently no FAQs about Create Navigation Menus with jQuery.

please wait ...