Radar Hill Technology Inc.

Great Clients, Great Websites

Radar Hill Blog

Overlapping Menu Items

Menu items mouse over state overlaps

Menu items mouse over state overlaps

With one of our latest designs that we are currently developing, we have come across the issue of menu items needing to overlap each other.  Normally we don’t run into this problem as our navigation items would just line up next to each other without any overlap. So I set out to achieve the effect using standards compliant XHTML and CSS only (no javascript) that worked in all major browsers.


> View the Demo


The XHTML Code

Using semantic markup, I created the menu in an unordered list. To assist screen readers and search engine rankings, all the links are entered as plain text links that we will replace with background images using CSS, but that will come later.

<ul id="menu">
  <li id="menu_1"><a href="#" title="Home">Home</a></li>
  <li id="menu_2"><a href="#" title="Locations">Locations</a></li>
  <li id="menu_3"><a href="#" title="About Us">About Us</a></li>
  <li id="menu_4"><a href="#" title="Deals">Deals</a></li>
  <li id="menu_5"><a href="#" title="Reservations">Reservations</a></li>
  <li id="menu_6"><a href="#" title="Contact Us">Contact Us</a></li>
</ul>

I added ID tags to each list item so that we can control each link individually in the stylesheet. It is preferred that we use a simple naming structure for our ID tags such as “menu_1″. It makes life for us easier in the future when links get re-order or changed.

The Background Images

I created our image that we are going to use for the CSS sprite in photoshop. I noted down the widths that each menu item should be along with the width that would be overlapping in the final layout. These measurements are crucial to getting all the menu items to line up correctly.

> View the sprite used in the demo

As you can see in the demo sprite I alternated the mouse over states instead of making our image extra large to accommodate each menu state.

The CSS Styles

We set the z-index of each menu item to be below the item that comes before it and we use a negative margin-left to offset the menu items so that they will be overlapped.

When the menu item is moused over and the hover state is to be displayed, the z-index of that link is set to be above all the other menu items so its over state will show (overlap and all).

> View the CSS used in the demo. It is well commented so you can follow along with each line to see what’s going on.

For those of you who just want the css without all the comments, here it is:

#menu {
	display: block;
	position: relative;
	margin: 0 auto;
	padding: 0;
	width: 960px;
}

#menu li {
	list-style: none;
	display: inline;
	margin: 0;
	padding: 0;
}

#menu a {
	position: relative;
	display: block;
	float: left;
	height: 55px;
	background: url("../images/menu.gif") no-repeat;
	text-indent: -99999px;
}

li#menu_1 a {
	width: 116px;
	background-position: 0px 0px;
	z-index: 6;
}

li#menu_1 a:hover {
	background-position: 0px -55px;
	z-index: 100;
}

li#menu_2 a {
	width: 199px;
	background-position: -90px 0px;
	z-index: 5;
	margin-left: -26px;
}

li#menu_2 a:hover {
	background-position: -90px -110px;
	z-index: 100;
}

li#menu_3 a {
	width: 200px;
	background-position: -263px 0px;
	z-index: 4;
	margin-left: -26px;
}

li#menu_3 a:hover {
	background-position: -263px -55px;
	z-index: 100;
}

li#menu_4 a {
	width: 168px;
	background-position: -437px 0px;
	z-index: 3;
	margin-left: -26px;
}

li#menu_4 a:hover {
	background-position: -437px -110px;
	z-index: 100;
}

li#menu_5 a {
	width: 232px;
	background-position: -579px 0px;
	z-index: 2;
	margin-left: -26px;
}

li#menu_5 a:hover {
	background-position: -579px -55px;
	z-index: 100;
}

li#menu_6 a {
	width: 175px;
	background-position: -785px 0px;
	z-index: 1;
	margin-left: -26px;
}

li#menu_6 a:hover {
	background-position: -785px -110px;
	z-index: 100;
}

Browser Testing

The menu has been tested and works in FireFox 3 (Win, & OS X), Safari 3 & 4 (Win, & OS X), IE6, IE7, IE8, Chrome, & Opera.

If you find any bugs or have any suggestions, please post a comment.

This entry was posted in Uncategorized and tagged , , , , . Bookmark the permalink.