Make a Multi-Level CSS Dropdown Menu in Dreamweaver CS4

Menu Preview

Menu Preview

Dreamweaver CS4Traditionally, multi-level dropdown menu navigation has been done in JavaScript. These kinds of menus can be very confusing to code, and more confusing to go back and edit later. Do it better and more beautifully with CSS and Dreamweaver CS4.

For this tutorial, we’ll be making a horizontal navigation bar for a zoo. It will have dropdowns and a couple of items will have flyouts to the right. We’ll simplify it the navigation by pretending our zoo has only four animals. I guess we can’t expect too many paid admissions. Luckily, after you’ve completed this tutorial you should be able to adapt this technique for any site.

Preview our menu here.

Step One: Plan Your Nav

Kookaburra

Kookaburra

It’s really important to get organized before you code. The BluLob Zoo needs three first-level navigation items: Home, Visit Us and Animals. Visit Us will need three second-level items: Hours & Pricing, Maps, and Calendar. Animals will have two second level items – Birds and Beast, and each of these will feature two animals at a third level (Kookaburra and Hammerkop for Birds; Wolverine and Wombat for Beasts).

It will help to create an outline of how we want our navigation organized. This can be done on the computer, but I often find myself sketching things up on Post-It notes or sheets of scratch paper. Here’s my sketch:

Sketch of Navigation Organization

Sketch of Navigation Organization

An alternate outline would look like this:

  • Home
  • Visit Us
    • Hours & Pricing
    • Maps
    • Calendar
  • Animals
    • Birds
      • Kookaburra
      • Hammerkop
    • Beasts
      • Wolverine
      • Wombat

Both of these outlines together will help us visualize how our navigation will be built. Let’s go!

Step Two: Build the HTML

Our navigation bar has two components: the HTML on the web page, and the CSS styling which will be in an external CSS style sheet that can control every page on our site. We’ll start with the basic content in HTML without any styling. Take a look at that second outline above. We need to recreate that in Dreamweaver. Remember to save your file frequently!

  1. Create a new HTML page in Dreamweaver (File > New). Then select Blank Page and HTML. Choose (none) for the layout, and set XHTML 1.0 Transitional as the Doctype. Click Create.

Create a new HTML page

Create a new HTML page

  1. Save the file as menu.html (File > Save As). Click on the Design button in the Document Toolbar.

Save As and Design button

Save As and Design button

  1. Navigation is really just a type of list, so we’ll make our menu a list. In the Property Inspector, click on the Unordered List icon. If you cannot see the Property Inspector, go to Window > Properties.

Unordered List icon

Unordered List icon

  1. Type out your first level navigation: Home, Visit Us and Animals. Press Enter (Mac: Return) after each item. Don’t worry that we appear to be going down rather than across. We will finesse that in the CSS.

First Level Navigation

First Level Navigation

  1. Click with your cursor just after the s in Visit Us. Press Enter/Return and then press Tab. The list should indent and the bullet type should change. This will be for our second-level navigation.

Second-level navigation

Second-level navigation

  1. Type in Hours & Pricing and press Enter/Return. Type in Maps and press Enter/Return. Type in Calendar.

Subnavigation for Visit Us

Subnavigation for Visit Us

  1. Click after the empty bullet at the bottom of the list and press Tab. Type in Birds and press Enter/Return. Type in Beasts.

Subnavigation for Animals

Subnavigation for Animals

  1. Time for our third-level items. Click after the s in Birds. Press Enter/Return and type Kookaburra. Press Enter/Return and type Hammerkop.

Subnavigation for Birds

Subnavigation for Birds

  1. Repeat for beasts: type in Wolverine and Wombat.

Subnavigation for Beasts

Subnavigation for Beasts

  1. Finally, we need to set up each item as a link. We don’t have pages to actually link to yet, so we’ll put in a pound sign (#) which is a sort of link placeholder. Select the word Home. In the Property Inspector, type # in the Link box and press Tab.

Add a link placeholder

Add a link placeholder

  1. Do the same for all the other navigational items.

Add link placeholders

Add link placeholders

All of our basic HTML scripting is done. Now we need to tell Dreamweaver what CSS classes and IDs to use in the HTML. And we need to set up all of our style rules in an external CSS file.

Nguồn: blulob.com

About these ads

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s