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

Viewers:

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: 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:
Dreamweaver jQuery
Author:

Previewing the final project

- [Voiceover] Hi, this is Chris Converse and this is a course on creating a drop down menu for your website. I want to 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 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 and navigation item. So, using a plugin called Jquery Drop Menus, we're gonna take a standard, unordered list in HTML, like this, and have the JavaScript and 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 list into menus and we're gonna walk through step by step 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 roles inside of here. So, while you won't get the art templates in Photoshop and the final project, you will have enough content so that you can follow along with 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 ...