Join Chris Converse for an in-depth discussion in this video Adding a standard unordered (bulleted) list, part of Creating Navigation Menus with jQuery and Dreamweaver.
Now to begin editing our HTML file, let's open this file up inside of Dreamweaver. Now if you have prefer to take this course in a more code-oriented tool, we're offering the same course in the training library using Aptana Studio instead of Dreamweaver. Now inside of Dreamweaver you might notice right away that this doesn't look anything like what we saw on the browser. If you're using Dreamweaver CS3 or later, there's a Live View up here. Clicking on Live View will actually have Dreamweaver use its internal WebKit rendering engine to show us what this will look like in a browser. When I come out of Live View however, I am looking at a view here that doesn't look exactly like what we're seeing in our browser.
So this gives us the ability to work with HTML5 and still have our layouts work back in browsers as old as IE7 and 8. Other things you will notice at the top, I have already hooked in the menu.css, a copy of jQuery, the jquery.dropmenu, and the menu.js, and in addition at the very top, Dreamweaver shows you the related files for the particular project we have open. So I can click on each one of these items here and see all of the related files. So now I went ahead and set all of this up because I wanted those to focus specifically on the menu.
So if we come down into the navigation area here, I have an HTML comment called menu goes here. So the first thing we're going to do is add an unordered list. So let's come down here and select that entire comment, let's delete it, and let's start by creating an unordered list. So we'll start with a ul tag, let's end that tag, let's open it up. Inside here, we're going to add list items, that's an li tag, let's end that. So there is the first one we're going to need four.
Let me copy that to the clipboard. I am going to paste three more of these. Let's come inside of the first one, let's add an anchor link, a href equals, we'll link that to a pound sign, which is a self link, let's end the anchor tag, let's copy that, let's paste that inside each of the LIs we pasted earlier. Let's get the cursor inside of the anchor link for the very first one. We're going to type Link 1, let's go into the second one, Link 2, put Link 3 in the third one, and Link 4 in the fourth one. Let's choose File > Save.
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.