Advanced CSS Menu Trick

CSS really opens the doors to a lot of powerful and rich opportunities. It is funny how such minor things can create a whole new look, feel, and effect of a site. The beauty of CSS really is that it gives you power, but not too much power. It is not a tool like flash that really invites you to run away and take things too far.

We are now coming to a point where the browsers are supporting a lot of new features, giving us more opportunities to take advantage of previously unused pseudo elements. This example, “advanced css menu tricks” will work perfectly in any modern browser, yet still be fully functional in your older version of IE as well.

The goal of the demo – example

What we want to do here, is instead of simply altering the state of the navigation item the user is currently rolling over, we want to alter the non navigation items as well. This will help focus the users attention on the item they have selected on, and create a new look and feel for the site overall. Want to see it in action? Look at my demo page before we start.

The first step – CSS roll overs

The first step of the game is building some CSS roll overs. We want to keep things accessible so I have opted to use an IR technique. Essentially we create an image that has both the static, active and rolled over state all lined up next to each other. We then set the image as the background of th element, but the width is only wide enough for one state of the image (so if the button image is 600px wide with all three states, we make the navigation element as a 200px wide button). We then set the text indent really high and overflow to hidden so that it pushes the text out of the box. Then we only see the image even though there is still HTML text on the page for search engines and accessibility.

Image Examples

Menu Before

Button Sliced, fixed and hover states

The CSS

#main_nav { list-style: none; margin: 0; padding: 0; }
#main_nav li { float: left; }
#main_nav li a { text-indent: -999999px; overflow: hidden; display: block; height: 72px; } 

#home { background: url(../images/navigation/home.gif); width: 103px; }
#home.active { background: url../images/navigation/home.gif) -103px 0; }

The HTML

<ul id="main_nav">
			<li><a href="index.html" accesskey="3" id="home" title="Home Page">Home Page</a></li>
			<li><a href="about-us.html" accesskey="4" id="about" title="About 3.7 Designs">About Us</a></li>
			<li><a href="web-design.html" accesskey="5" id="webdesign" class="active" title="Web Design and Development">Web Design</a></li>
			<li><a href="graphic-design.html" accesskey="6" title="Graphic Design and Marketing" id="graphicdesign">Graphic Designs</a></li>
			<li><a href="keyword-optimization/michigan-seo.html" accesskey="7" title="Search Engine Optimization and Marketing" id="seo">Search Engine Optimization SEO</a></li>
			<li><a href="ann-arbor-marketing.html" accesskey="8" id="contact" title="Contact Us">Contact Us</a></li>
		</ul> 

Then when we want to change the state of the button we simply adjust the background position to be -200px (or the size of the button itself) pulling the different state of the button into view. The reason for doing it this way then simply swapping images, is the latter method tends to create flickering in some browsers.

At this point most people have it set so that if an item is hovered on (#home for example) it switches the background-image position. This creates the standard run of the mill css roll over. However we want to do something else, something more unique. We want to have every roll over item on the menu change except the one you are hovering on. This requires a little css trickery!

IE7, Safari, Firefox, all support the :hover pseudo selectors so let’s take advantage of that. What we need to do is have all the menu items change the background-image position when the menu item itself has been rolled over. Then the item that is hovered on is set to have the background-position: 0px to keep it from moving when the rest do.

The CSS

	#main_nav:hover li a#webdesign { background-position: -280px; }
	#main_nav:hover li a#home { background-position: -206px; }
	#main_nav:hover li a#graphicdesign { background-position: -340px; }
	#main_nav:hover li a#contact { background-position: -232px; }
	#main_nav:hover li a#about { background-position: -242px; }
	#main_nav:hover li a#seo { background-position: -540px; 

This pulls each menu item’s background position back when any of #main_nav has been hovered on. Now all we have to do is set the hovered items to have a background-position of 0

	#home { background: url(../images/navigation/home.gif); width: 103px; }
	#home:hover { background: url(../images/navigation/home.gif) 0 0 !important; }

The HTML is all set, already coded! Now you are ready to rock and roll except for that pesky IE5.5+. Luckily there has been a behavior file developed called cssHover.htc that will fix this issue. Simply download it, and copy and paste the following code into an IE5+ specific style sheet.

body  {
	behavior:	url("/css/csshover.htc");
}

The Whole Shabang

CSS

#main_nav { list-style: none; margin: 0; padding: 0; }
#main_nav li { float: left; }
#main_nav li a { text-indent: -999999px; overflow: hidden; display: block; height: 72px; } 

#home { background: url(../images/navigation/home.gif); width: 103px; }
#home:hover { background: url(../images/navigation/home.gif) 0 0 !important; }
#home.active { background: url../images/navigation/home.gif) -103px 0; }

#main_nav:hover li a#home { background-position: -206px; }

HTML

<ul id="main_nav">
			<li><a href="index.html" accesskey="3" id="home" title="Home Page">Home Page</a></li>
			<li><a href="about-us.html" accesskey="4" id="about" title="About 3.7 Designs">About Us</a></li>
			<li><a href="web-design.html" accesskey="5" id="webdesign" class="active" title="Web Design and Development">Web Design</a></li>
			<li><a href="graphic-design.html" accesskey="6" title="Graphic Design and Marketing" id="graphicdesign">Graphic Designs</a></li>
			<li><a href="keyword-optimization/michigan-seo.html" accesskey="7" title="Search Engine Optimization and Marketing" id="seo">Search Engine Optimization SEO</a></li>
			<li><a href="ann-arbor-marketing.html" accesskey="8" id="contact" title="Contact Us">Contact Us</a></li>
		</ul> 

Live Example