Advanced CSS Menu Trick originate

What we wish to try to to here, is rather than merely sterilization the state of the navigation item the user is presently rolling over, we wish to change the non navigation things similarly. this may facilitate focus the users attention on the item they need elect on, and make a brand new look and grieve the location overall. wish to examine it in action? cross-check my demo page before we have a tendency to begin.

The first step – CSS roll overs

The first step of the sport is building some CSS roll overs. we wish to stay things accessible thus I actually have opted to use Associate in Nursing IR technique. basically we have a tendency to produce a picture that has each the static, active and rolled over state all lined up next to every different. we have a tendency to then set the image because the background of the component, however the breadth is simply wide enough for one state of the image (so if the button image is 600px wide with all 3 states, we have a tendency to build the navigation component as a 200px wide button). we have a tendency to then set the text indent very high and overflow to hidden in order that it pushes the text out of the box. Then we have a tendency to solely see the image despite the fact that there's still hypertext markup language text on the page for search engines and accessibility.

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 have a tendency to|once we|after we} wish to vary the state of the button we merely modify the background position to be -200px (or the dimensions of the button itself) actuation the various state of the button into read. the rationale for doing it this manner then merely swapping pictures, is that the latter methodology tends to form a flicker in some browsers.

At now the general public have it set in order that if Associate in Nursing item is hovered on (#home for example) it switches the background-image position. This creates the quality run of the mill css roll over. but we wish to try to to one thing else, one thing a lot of distinctive. we wish to own each roll over item on the menu amendment except the one you're hovering on. this needs a little CSS trickery!

IE7, Safari, Firefox, all support the :hover pseudo selectors thus let’s profit of that. What we'd like to try to to is have all the menu things amendment the background-image position once the menu item itself has been rolled over. Then the item that's hovered on is ready to own the background-position: 0px to stay it from moving once the remainder 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 every menu item’s background position back once any of #main_nave has been hovered on. currently all we've got to try to to is ready the hovered things to own 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 HTML5  is set, already coded! currently you're able to rock and roll apart from that plagiary IE5.5+. fortuitously there has been a behavior file developed referred to as shoveler.ht c that may fix this issue. merely transfer it, and duplicate Associate in Nursing d paste the subsequent code into an IE5+ specific sheet.