Lesson 5 - Image Navigation Bar


DW Cover


Dreamweaver CS3 and CS4 make it super easy for you to create a navigation bar or navbar. This feature has been deprecated in CS5. Following the Image Navbar lesson there are 2 additional lessons that show how to create a navbar using a list and CSS:

  1. List and CSS navbar (Text only, no images)
  2. Image Sprites navbar (Uses List and CSS)

Image Navigation Bar

This feature is based on the Image Rollover we learned earlier in this lesson. Instead of the browser responding only to the rollover event, the Nav Bar features instructs the browser to respond to four mouse events. These events

Up - displays the initial original image

Over - displays the rollover image

Down - displays a third image when the user clicks the mouse

Over While Down - displays a fourth image if the mouse stays on the image after the image has been clicked. I recommend that you DON'T use this state. ON SOME BROWSERS this state doesn't work, so many designers leave out this state and just use the up, over, and down states.

To create the Navigation bar you will need 3-4 images for each item or button on your navbar. I want to have 4 categories: Company, Products, Clients, Contact so I will use my image editing program to create 3-4 images for each of the categories, resulting in 12 or 16 images depending on whether I use the Over While Down state. These images should all be the same pixel dimensions.

Several image editing programs such as Fireworks and ImageReady allow you to create the interactive Images from within their program and export into Dreamweaver with the code for the HTML created. If you don't know how to use the programs or you don't have an image editing program, you can use the sets of button I've created below as a sample.

Take time to prepare or copy your images now so that you can follow along the demo and create your Dreamweaver Navigation Bar with me. To copy these images right click (control click on a Mac) and save to your images directory within your root folder of your site. Or simply download the zipped archive (click on this link.)


Follow These Steps to Create your Dreamweaver Navigation Bar

  1. Click the cursor where you want to insert the navigation bar. The bar can be positioned either horizontally or vertically on your page.
  2. Click the Navigation Bar option in the Image drop down menu of the Insert Bar or go to the Insert Menu - Insert> Image Objects >Navigation Bar.

    Image Navbar Selection Menu


  3. This will open the Insert Navigation Bar window. The Nav Bar Elements box at the top is only a display field. You can not enter any info into this field. Enter a name in the Element Name field. I entered company for the first element in my Navbar.

    Navbar


  4. Browse for the Up, Over, and Down images for the company button (and the Over while down image, if using).

    Navbar2


  5. Enter Alternate text for your link and insert the URL for your link in the When Clicked, Go to URL: field.
  6. Keep Preload Images checked.
  7. Select a page orientation for your nav bar using the Insert: dropdown menu and click the Use Tables checkbox.

    Navbar3


  8. Click on the Plus Button + at the top of the Insert Navigation Bar window to add a second menu element. I named this one products. Browse for the 3-4 states of the products element, and add its link and alt fields. Do the same for the remaining 2 elements: clients and contact. This is what your Insert Navigation Bar window will look like when it's complete for 4 buttons.

    Navbar 4


  9. Click OK and the nav bar will be displayed.

    In order to see the buttons function, go to File>Preview in Browser. Each image has 3 states. For demo purposes, I've kept my links null by setting each link to javascript:; (Again, depending on your browser and OS, the over while down may not work so just leave it out.)

    Company Button Products Button Clients Button Contacts Button

  10. To modify this nav bar, go to the Modify Menu - Modify>Navigation Bar which will bring up a window that looks similar to the Insert Navigation Bar window above but will say Modify Navigation Bar. You can edit your navbar in this window.

Navbar using a List and CSS

These days navigation is accomplished using a list and CSS. Below, I created a horizontal navigation bar using an unordered list and CSS controls the look and feel.

 

First, the html for the navigation bar is created. A wrapper, a div tag, controls where the navigation bar is positioned and the background color. An unordered list that contains the names of the pages, in this case, Home, Lessons, Resources, and Bio, is placed within the wrapper. The Lessons link is a not a link to a page but is a drop down menu which contains the links to other pages. This is done by making Lessons another unordered list which contains the items in the drop down menu, in this case, Lesson 1, Lesson 2, Lesson3.

The following is the html used to create the navigation bar:

<div id="navbar">
  <ul id="nav">
    <li class="sel">Home</li>
    <li onmouseover="">Lessons <img src="images/downArrow.png" 
                                         width="11" height="7" alt="Down Arrow"/>
      <ul class="normalWt">
        <li><a href="javascript:void(0);">Lesson 1</a></li>
        <li><a href="javascript:void(0);">Lesson 2</a></li>
        <li><a href="javascript:void(0);">Lesson 3</a></li>
      </ul>
    </li>
    <li><a href="javascript:void(0);">Resources</a></li>
    <li><a href="javascript:void(0);">Bio</a></li>
  </ul>
</div>

With the structure in place CSS is added to describe the look of the navigation bar and the behavior when the mouse rolls over a link. This is where everything happens. The wrapper has its id set to navbar and in CSS the style is set to center the navigation bar and the background color is set to light blue. The links used in the navigation bar are styled. The sel class is used in the navigation bar to style the currently selected page. In this case it is in bold and there is no link associated with it in the html.

To display the navigation bar horizontally the display property is set to inline for the list items. To display it vertically the display property would be set to block, which is done for the items in the submenu when it is made visible. Each of the items has a link to a new page except for the Lessons item which has a submenu associated with it. This submenu has its display property set to none so it is not visible and its position is set to absolute so that it may be placed just below Lessons. When the mouse is rolled over Lessons the submenu becomes visible by using the hover pseudo-class of the Lessons item to set the display property of the submenu list to block. Recall that setting the display property to block will display each item in the list vertically. That is what the last line is doing in the CSS listed below. Also, notice that onMouseOver is set to nothing. This will allow the drop down menu work on an iPad/iPhone.

/* Navigation */

/* Set style of container */
#navbar {
	margin:0 auto;
	padding:7px 0;
	width:90%;
	background-color:#dffff5;
	color:#036;
}

/* Set link styles */
#navbar a:link, #navbar a:visited {
	color:#036;
	text-decoration:none;
}

/* Set link hover color */
#navbar a:hover {
	color:#af9715;
}

/* Set style of link that has been selected, the current selection. */
#navbar .sel {
	font-weight:bold;
	color:#036;
}

/* Set style on unordered lists */
#navbar ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Set the style so the list is displayed inline, horizontally */
#navbar ul li {
	display:inline;
	position:relative;
}
	
/* Position the submenu */	
#nav li ul {
	position: absolute;
	left: 20px; /* Set 1px less than menu width */
	top: 16px;
	display: none;
}

/* Set the style for the list items closest to the tag with the nav id */
#nav > li {
	padding:0 30px;
	text-align:center;
}

/* Styles for submenu Items */
#navbar ul li ul li {
	display: block;
	color: #369;
	background: #dffff5; /* IE6 Bug */
	padding: 3px 5px;
	border: 1px solid #ccc;
	border-bottom: 0;
	font-weight:normal;
}

/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */
		
#nav li ul li a { padding: 2px 5px; width:80px; } /* Sub Menu Styles */
		
#nav li:hover ul, li.over ul { display: block; } /* The magic */

.normalWt { font-weight:normal; }
  

Feel free to use this code to create a navigation bar. Change it to match the look and feel of your site. Assign background images to the list items to create an image navigation bar. Reassign the background image when the mouse hovers over an item.

Visit WebsiteTips to find lots of examples of how to do navigation bars.

Navbar using a List, CSS and Image Sprites

An image sprite is a collection of images put into a single image. Since a web page with many images can take a long time to load and generate multiple server requests using image sprites will reduce the number of server requests and save bandwidth. Still using lists with CSS, image sprites can be used to switch images between menu button states. When hovering over a menu button a different image is shown. Using image sprites this is easily done by changing the background position of the image.

We will create a navbar using an image sprite made up of the images that were used in the first example. Each row represents the different states a button may take:

Here is the image sprite:

Image Sprite

We create a page that contains an unordered list with the four buttons displayed horizontally. Here is the html to do this. The first button has its link deadened because this page is going to be the company page. When creating the other 3 pages the links corresponding to the page will be deadened.

<ul id="navlist">
    <li id="company"><a href="javascript:void(0);"></a></li>
    <li id="products"><a href="products.htm"></a></li>
    <li id="clients"><a href="clients.htm"></a></li>
    <li id="contact"><a href="contact.htm"></a></li>
</ul>

In CSS we set the image positions to show the bottom row of the buttons and since this is the company page the button that corresponds to the company will be set to the current page button image from first row.

#navlist {
    width: 288px; height: 28px;
    background:url(images/navSprite.png) 0 0 no-repeat;
    margin: 0 auto; padding: 0;
    position: relative;
}
#navlist li { margin: 0; padding: 0; list-style: none;  position:absolute; height:28px; }
#navlist li, #navlist a { height:28px; display:block; }
#company { left:0px;width:71px; }
#company { background:url('images/navSprite.png') 0 0; }
#products { left:73px;width:71px; }
#products { background:url('images/navSprite.png') -73px -84px; }
#clients { left:145px;width:71px; }
#clients { background:url('images/navSprite.png') -145px -84px; }
#contact { left:217px;width:71px; }
#contact { background:url('images/navSprite.png') -217px -84px; }
#company a:hover { background: url('images/navSprite.png') 0 0; }
#products a:hover { background: url('images/navSprite.png') -72px -56px; }
#clients a:hover { background: url('images/navSprite.png') -145px -56px; }
#contact a:hover { background: url('images/navSprite.png') -217px -56px; }
  

CSS explained:

#navlist position is set to relative to allow absolute positioning inside of it. The list items contained within it have their margin and padding set to 0, list-style removed, and all are absolute positioned. The list items and the link heights are set to 28px which corresponds to the height of the sub-images and display is set to block.

Positioning and styles are set for each button.

#company { left:0px; width:71px; }
#company { background:url(images/navSprite.png) 0 0;}     

 

The Company button is positioned all the way to the left, and the width of the image is 71px. The background image and its position (left 0px, top 0px). It is using the button on the first row, the currently selected page.

#products { left:73px; width:71px; }
#products { background:url('images/navSprite.png') -73px -84px; }    

The Products button is using the image from the second column and bottom row, the black button. The Clients and Contact buttons are also from the last row but indexed over by the sum of the widths of the preceeding buttons. If the images are not quite the same size then these positions may have to be adjusted. To test for this we preview the page in the browser and roll over each of the buttons and see if the hover image is aligned. It will show a shift if it is not aligned.

Since the list item contains a link, we can use the :hover pseudo-class that will use CSS to reposition the image such that the image representing the hover state is shown. It is just a matter of changing the second coordinate. Since this is the company page the coordinates do not change. The Products button is offset in the horizontal direction because the images did not quite align otherwise. This is where you will have to adjust the coordinates to make the images align.

#company a:hover { background: url('images/navSprite.png') 0 0; }
#products a:hover { background: url('images/navSprite.png') -72px -56px; }

 

This same process is followed for each of the remaining pages, Products, Clients, and Contact. The image below is a snapshot of the navbar in the demo. Run the demo to see what it looks like:

Image Sprite Demo


Apple Navbar Example

Apple's Website - This is a great example of how a navigation bar should work. When the site comes up the navigation bar is in the 'home' state meaning that none of the buttons have been selected. After you click on any of the buttons the page that corresponds to the selection comes up and the background of the button has a darker background. This makes it really easy to tell which page is the current page. When your return to the home page the menubar returns to the 'home' state.

The first screenshot is the navbar as seen from the 'home' page. Notice that none of the buttons have been selected.

Apple Menubar Home

The second snapshot is the navbar on the Store page after the Store button has been pressed. The background of the Store button is dark which makes it really easy to tell what page is the current page.

Apple Menubar Select

The third snapshot shows the color used for hovering. It is different from both the unselected and selected states. The current page is the Store and the cursor is over the iPod button. At a glance you can tell which page is the current page and which button the cursor is hovering over. When the cursor hovers over the Store button the background color does NOT change. Why select it when it is already the current page?

Apple Menubar Hover

Note: Apple treats the navbar on the home page differently from all of the other pages by not setting the background of the home page button, the Apple icon button as it turns out. This is inconsistent and the visitor to the site has to shift focus to see how the navigation works. This is especially true after they have selected a page and would like to return to the home page. Since there was no indicator on the home page as to which button is the home page button then it is just a guess that the button with the Apple icon is the home page button. It is a good guess because it is the left-most button which is usually designated to be the home page button. Had the background of that button been darker to begin with there would have been no question as to it being the home page button.

Up Arrow Top