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.

About ken

Ken started experimenting with web design and construction over a decade ago, and has spent countless hours agonising over layouts in Photoshop and marking up websites since then. He strives to create websites that are easy to use, functional, and stunning to look at. By taking time to fully understand the needs and goals of each project Ken aims to create design solutions that not only look great, but serve a purpose. When not creating solutions for the web, Ken can often be found picking banjo, jumping in lakes, and checking out live music around town.

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

Comments are closed.