This is a slight modification on the Day 4 Application. This shows how a slight modification in the css can achieve different results. Again this enables web site users to navigate through the entire site structure from any page on the site. It also has a secondary benefit of being an SEO friendly sitemap.

Horizontal Menu

Horizontal Menu


The first thing you’ll need to do is figure out where on your page you want to position your menu. Then in this location setup the following div and list structure.

<div class="nav">



Place the menu in an include file or define it as a Dreamweaver library item to make updating your sites navigation easier.


Once you have placed the menu structure into your page, you'll need to setup the stylesheet for your menu.  Place this in a file called menu.css wherever you typically define CSS files.


/* CSS Document */

div.nav
{
	width: 820px;
	height: 37px;
	background-color: #4F669A; /* Sets the menu background color */
       /* Or you can use an image, make sure the file is relative to the css document */
/*	background:url(images/navigation_background.gif);
	background-repeat:repeat-x; */
	margin-left: auto;
	margin-right: auto;
	margin-top: 0px;
	margin-bottom: 0px;
	padding-top: 0px;
	padding-bottom: 0px;
	vertical-align: bottom;
	text-align: left;
	font-size: 11px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color:#fff;
}

#nav, #nav ul {
	float: left;
	width: 800px;
	list-style: none;
	line-height: 33px;
	font-weight: bold;
	vertical-align: bottom;
	padding: 0 9px 0 1px;
	border: 0;
	margin: 0 0 0 0;
}

#nav a {
	display: block;
	text-decoration: none;
	text-transform: uppercase;
	text-align: left;
	vertical-align: bottom;
	color: #fff;
	padding: 2px 2px 2px 0px;
}

#nav a:hover,active
{
	color: #663300;
	font-weight: bold;
	background-color: #D4BD9D;
}

#nav li {
	float: left;
	color: #fff;
	padding: 0 18px 0 6px;
	text-align: left;
	vertical-align: bottom;
	border-right: 1px solid #fff;
}

#nav li.last {
	border-right: none;
}

#nav li ul {
	position: absolute;
	left: -999em;
	height: auto;
	overflow: visible;
	height: 24px;
	width: auto;
	font-weight: normal;
	border-width: 0.25em;
	margin: 0px 0 0 -12px;
	padding: 0;
	background-color: #D4BD9D;
}

#nav li ul li {
	padding-left: 4px;
	padding-right: 10px;
	line-height: 20px;
	text-align: left;
	clear: none;
	float: left;
}

#nav li ul.list-right li {
	float: right !important;
}

#nav li ul a {
	min-width: 100%;
	color: #663300;
}

#nav li ul ul {
	margin: -1.75em 0 0 14em;
}

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
	left: -999em;
}

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
	left: auto;
}

#nav li:hover, #nav li.sfhover {
	color: #663300;
	background: #D4BD9D;
}


Then include the css file in your html document in the  section.


<link rel="stylesheet" href="menu.css" type="text/css" />



That should be it for most browsers.  IE6 needs some special attention (doesn't always).  In this case it is including the following javascript file.


sfHover = function() {
	var sfEls = document.getElementById("nav").getElementsByTagName("LI");
	for (var i=0; i < sfEls.length; i++) {
		sfEls[i].onmouseover=function() {
			this.className+=" sfhover";
		}
		sfEls[i].onmouseout=function() {
			this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
		}
	}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);



You can also include this in the  section of your html file with the following code.


<script src="menu.js" type="text/javascript">

Once you are done you should have a menu like this.  Now modify the stylesheet to make it appear the way you want.


Screenshot


View this application online.