Create Navigation Menus with jQuery

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

Viewers:

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: 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.

Subjects:
Developer Web
Software:
jQuery
Author:

Previewing the final project

- Hi, this is Chris Converse and this is a course on creating a drop-down menu for your website. I wanna start by showing the final project. So inside of the exercise files you can open up, inside a final project, index that html and what we're gonna do here is take a standard, unordered list and we're gonna turn this into a drop-down menu. So when I roll over individual items we can see a menu that animates down and we can even create sub-menus. So under link four here, for example, I have sub-link here, which will then open up a third level menu navigation item. So using a plugin called jQuery Drop Menu, we're gonna take a standard, unordered list in html like this and have the JavaScript in CSS conform that into this menu that functions like a drop-down system.

This is a very common technique that you'll find among many jQuery and JavaScript plugins that turn your unordered lists into menus and we're gonna walk step-by-step through how to do that. Now if you're not a premium subscriber to the Lynda.com online training library, we are supplying folders one and three out of the exercise files which includes the plugin 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 and PhotoShop in the final project, you will have enough content 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.

please wait ...