December 22nd, 2007 / Ross Johnson / 170 Comments

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

Advanced Menu Image

Button Sliced, fixed and hover states

Example Navigation Element

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

170 thoughts Advanced CSS Menu Trick

  1. Pingback: kre8ive » Advanced CSS Menu Trick

  2. Clever.

    Another way to achieve this is by using Apple.Com’s menu technique (multiple states on a single image – controlled by positions).

    Andrei Gonzales
  3. Pingback: Fatih Hayrioğlu’nun not defteri » 31 Aralık 2007 Web’den Seçme Haberler

  4. That is a good technique. I would like to point out to you that your site slightly bends (not break;)) when viewed in Opera. The grey background and page itself seem to extend as far as if the content were in a horizontal line.

  5. I like this…
    Something different and a nice option that can be used for all browsers and look the same.

    Well done. I will definitely have to use something like this.

  6. Pingback: 7 Advanced CSS Menu For Your Next Design

  7. Pingback: 7 Menu css da usare nei propri siti web | Lordmarin

  8. Pingback: CSS ile yatay menü örnekleri - Günlük Haftalık Aylık

  9. Pingback: Menú horizontal muy interesante

  10. Pingback: napyfab:blog» Blog Archive » links for 2008-01-07

  11. Whenever I try to load the example page, my FF 2.0.0.11 breaks.

    Just to know.

    psilos
  12. Pingback: 7个强大超酷的CSS导航菜单 | 帕兰卓一得

  13. Pingback: Best Of January 2008 | Best of the Month | Smashing Magazine

  14. Pingback: Best Of January 2008 | Best of the Month | Smashing Magazine

  15. Pingback: Best Of January 2008 | Blog

  16. ADVANCED WOULD BE MAKING IT WORK IN IE6 :)

    than you’ll see some trafic

    one web designer
  17. It does work in IE6 with the behavior file mentioned at the end of the article.

  18. Pingback: Advanced CSS Navigation Menu Trick

  19. Pingback: purrl.net |** urls that purr **|

  20. Pingback: Usenet Newsgroups: Anachronistic Service or Useful Communication Tool?

  21. Pingback: 101 CSS Techniques Of All Time- Part 1

  22. Pingback: links for 2008-01-28 | Funny Stuff is all around

  23. Pingback: 7 Advanced CSS Menu, A Great Roundup!!

  24. Pingback: Blog | exand.net » Мои закладки в Январе

  25. Very nice. Clean, easy, good looking. Great post!

  26. Pingback: sbh* - Ma.gnolia: Recently Ma.rk’d

  27. Pingback: Quick Accessibility Testing

  28. Pingback: UK Government fails to take IPv6 implementation seriously

  29. Pingback: Upgrading to Rails 2.0. A Recipe

  30. Pingback: News » Best Of January 2008

  31. Pingback: dock men yapm_?_ - vBulletinTurk.org | Webmaster Forumu

  32. Pingback: blog.bouctoubou.com » Archive du blog » Bouctoubou’s links Graphics #2

  33. Pingback: Powerful CSS-Techniques For Effective Coding | How-To | Smashing Magazine

  34. Pingback: Powerful CSS-Techniques For Effective Coding | Blog

  35. Pingback: 50种强大的CSS技术 | 帕兰映像

  36. Pingback: مدونة الدكتور نت » أرشيف المدونة » مواقع ووصلات (فبراير -2008)

  37. Pingback: Powerful CSS-Techniques For Effective Coding

  38. Pingback: Tips Trick, Software dan Aplikasi Review » Blog Archive » Powerfull CSS Teknik

  39. Hi

    this example are very nice.

    i need one more help.

    how to give sub menus????????

    jarald

    jarald
  40. Pingback: Skylog » Blog Archive » links for 2008-02-28

  41. Pingback: Un par de trucos avanzados CSS « el50

  42. Pingback: AllSprite | 关注互联网发展,为访客创造价值! » Blog Archive » 50种强大的CSS技术

  43. Pingback: Powerful CSS-Techniques For Effective Coding

  44. Why this technique doesn’t work under a joomla site? Look here: (http://www.eliacomes.com)

  45. Pingback: Advanced CSS Navigation Menu Trick | GreatSo.com

  46. Pingback: Truco CSS para Menu de Navegación | Blogultura.com

  47. Pingback: Kolz Blog » Blog Archive » Powerful CSS-Techniques For Effective Coding

  48. Pingback: jujubeans » Blog Archive » Gotta brush up on the scripting

  49. Pingback: CSS Concept » Blog Archive » Techniques for a Professional CSS

  50. Brillant idea. But in code is error which made me mad. I spend a half day to before it works properly. In line:
    [code]
    #home.active { background: url../images/navigation/home.gif) -103px 0; }
    [/code]
    you forgott about “(” before path to image.

    bleki
  51. :( malesef kod da bazı eksiklikler var sanırım ben yapamadım bunu indirmemizin bir yolu varmı????? :( Helpppp….!!!

  52. May be you are right with all these opportunities of CSS. I will test them and give my opinion after.

  53. Pingback: Sharepoint 2007 from an interface developer’s view

  54. Pingback: Web Design » » Advanced CSS Menu Trick - Web Design Marketing Podcast & Blog

  55. Pingback: 傻仔仔 » 網誌彙整 » 50種強大的CSS技術

  56. gotta try this and see if it works. thanks.

  57. very nice comment and menu thanks .

  58. very nice comment and menu thanks .

  59. 呵呵 只有看代码能懂一些

    尹飞
  60. Pingback: Powerful CSS-Techniques For Effective Coding | Studio 646

  61. Pingback: bdITjobs.com : : Blog » Blog Archive » Powerful CSS-Techniques For Effective Coding

  62. Pingback: Flying Code — Flying over the code…  » Articles » Créer un menu avec rollover avancé

  63. Hey dude,

    Just wanna say a word of thanks for making my day. This solved my chunky navigation javascript problem over at my site’s navigation bar. Neat trick!

  64. Pingback: 50种强大的CSS技术 | CodeLog

  65. Pingback: Powerful CSS-Techniques For Effective Coding | adtech ile reklam 2.0 dönemi başlıyor ve Trkycmhrytllbtpydrklcktr r10.net seo yarışması

  66. Good simple css menu script and trick. I like it a lot.

  67. Great CSS Menu trick, i may even used somewhere on my site! I think ill try and post a css drop down to this and post it here maybe…

  68. crashes my firefox too, shame cause it looks great five seconds before the crash 😉

  69. Whenever I go to example, my firefox crushes and close it.
    Is anything wrong with me??

    elvis
  70. Pingback: Umair’s Blog » Blog Archive » Super Powerful CSS - Techniques For Effective Coding

  71. oh very amazing. my friend you are very good.dış cephe

  72. Pingback: Powerful CSS Techniques For Effective Coding | Udesign's Blog

  73. Quite an amazing technique…what i like about CSS is that with slight Changes we can entirely change the look and feel of websites…nice post.

  74. Great technique that has gone straight into the ‘code bank’! Excellent, well done

  75. Pingback: CSS-Styled Lists: 20+ Demos, Tutorials and Best Of

  76. Pingback: sapnagroup notes » Blog Archive » CSS Techniques

  77. Pingback: 五毒 » Blog Archive » 7个强大超酷的CSS导航菜单

  78. Pingback: Advanced CSS Menu Trick | WhiteSandsDigital.com

  79. How wonderful the blog site is! yes its my favorite.

  80. Pingback: Улыбнитесь » Blog Archive » CSS-Styled Lists: 20+ Demos, Tutorials and Best Practices

  81. Pingback: deckox - The design Destination » Blog Archive » Advanced CSS Navigation Menu Trick

  82. up down css menü please adress

  83. Pingback: 10 Challenging But Awesome CSS Techniques - NETTUTS

  84. Pingback: 10 tutoriales de técnicas avanzadas de CSS | frogx.three

  85. Pingback: 50种强大的CSS技术 | 伊莱利奥的博客

  86. Pingback: Blog - WEBmagix » Blog Archive » Awesome CSS techniquies

  87. Pingback: Simple Way to Modify Menu Items with jQuery | Joh.nson.us

  88. Pingback: Colección Css (tutoriales): Layout, tables, forms, buttons… — WYDBLOG

  89. awesome tricks boy. Really great.

  90. Pingback: 50 técnicas avanzadas CSS para una codificación efectiva. | AlainAlemany

  91. It does work in IE6 with the behavior file mentioned at the end of the article.

  92. How do you get the whole thing from breaking apart when you play around with stretching out the browser?

    My links just float down when you resize.

    Vadim.
    Thank you.

    Vadim
  93. Pingback: WebMaster Hizmetleri - CSS ile yatay menü kullanın - derleme

  94. Pingback: 放飞梦想 » Blog Archive » 一个伟大的汇集(7个超炫的CSS菜单)

  95. Pingback: Download 6 Free Ebooks,Software,Scripts and Templates, Iphone, Technology, Games, Life, Webmasters » Blog Archive » 50 Free CSS Navigation Menu Designs

  96. Pingback: OpsiyonBlog.com | Video | Program | Photoshop | Müzik | Css | E-Ticaret | Script | Youtube | Yutub | » Blog Archive » CSS ile yatay menü örnekleri

  97. Hi,
    Amazing activities
    Great !!!!!!!
    I have read this Blog and you have shared good information about Advanced CSS Menu Trick……….
    Nice Post!!!!!!!
    Thanks.

  98. Pingback: CSS ile yatay menuler | Egenc.Net | css ile menu yap, css, menu, css menu, yatay menu, menu yap, css menu yap | Egenc.Net | Eğlence Sitesi

  99. Here at BMSB.com the theological holding that Han shot first in the first episode of the Holy Trilogy is considered blasphemy. That’s why I’m awfully confused to come across the following picture thank you.

  100. Wow, I had no idea it was that easy!

  101. Pingback: Ngra CSS knep som r vrt att ta en titt p | Webbrelaterat

  102. Couldn’t you get the same effect if you set up the image with the 3 states lined up vertically? That way the CSS would have all the same values for the state change position. Yes, no? Thanks for a great tutorial.

    jsteb
  103. Pingback: Sete tutoriais avançados para criar menus via CSS - Blog do yogodoshi

  104. Wow, I had no idea it was that easy!

  105. Pingback: A Quick Introduction | StylizedWeb.com

  106. The sample site is a fantastic example of the CSS trick. Just loved it!!!

  107. Do as my client is doing on the Internet and as mhy client has done
    in the past with self-publishing which has led to his books being
    published in 20 languages and 27 different countries. Jump into it
    full force and correct course when necessary. You will have to because
    Google keeps changing the rules of the game.

  108. Google Page rank counts but not near as much as content. As the Internet
    experts all say, “Content is King.”

    Unfortunately, when most people see successful individuals make a
    system like the Internet work, but they themselves don’t understand,
    they make up stories. Stories abound about how successful individuals
    are lucky, how they have gotten all the breaks in life, and how they
    have to be dishonest to make it in this world. Most of these stories
    are either untrue or out-and-out lies.

    It turns out that becoming an Internet success is a lot simpler than
    that. Success, after all, is based on commitment, perseverance, and
    common sense. Above all, this is the most important secret to getting
    started on an Internet business: Do it badly — but at least do it!!
    That is exactly what I am doing this week with the launch of three
    new websites for a client:

  109. I personally think PR is not as important as it was. Google seems to be steering down a lexical keywords / page keyword density route (back to the old days of excite! in 96). Link text is still as important as ever, both internal and external. Whatever, Google is doing these days they seem to be purposefully leaving themselves open to increased manipulation by SEO professionals and weakening the index as a whole. I mean bulk cross-linking and lexical keywords stuffing in titles, they should have an algorithm to kick that stuff out, shouldn’t they? but I plead guilty on all counts;)

  110. Pingback: 50种强大的CSS技术 at cssframework

  111. Pingback: A Quick Introduction | Castup

  112. Pingback: Powerful CSS Techniques For Cool Website | Standalone Complex

  113. It can also get kind of hairy when trying to get it to understand what a conversion is. Instead of just any click, it needs to be one specific click

  114. Thanks you very much. It is wonderful..

  115. Above all, this is the most important secret to getting
    started on an Internet business: Do it badly — but at least do it!!

  116. Thanks you really perfect one writing.I m always follow you

  117. that’s really grat,i just get css button,now css menu.
    I love css.

  118. sesli chat,sesli sohbet,sesli chat,sesli sohbet ,sesli chat ,sesli sohbet,sesli sohbet,birsesdeyiz,seslikankam,sesliyizibiz.net

  119. thanks .ok güzel bir site yolunuz açık olsun kankalar

  120. thank çok güzel bir site olmuş elinize sağlık biz size her zaman diyoruz

  121. thanks çok güzel olmuş evet başarılarınızıu dileriz

  122. Pingback: 43 PSD to XHTML, CSS Tutorials Creating Web Layouts And Navigation | 1stwebdesigner - Love In Design

  123. Thanks you too much, this is wonderful.

  124. the blurred or out-of-focus effect only works the first time one enters your page. Afterward, you have regular menus and even by clicking on home it won’t load the blurred effect. One has to refresh the page to see it again. Good, but only for the first time one access the page; otherwise, a regular menu.

    eduardo
  125. Pingback: 30 Exceptional CSS Navigation Techniques

  126. the blurred or out-of-focus effect only works the first time one enters your page. Afterward, you have regular menus and even by clicking on home it won’t load the blurred effect. One has to refresh the page to see it again. Good, but only for the first time one access the page; otherwise, a regular menu.

  127. Very nice. Your design inspired me to create an alternative version on my blog that utilises CSS3for the fuzzy effect, rather than CSS Sprites. I’ve yet to make it compatible with IE: that will be an updated entry. Thanks again!

  128. Pingback: 55 CSS Menu And Button Coding Tutorials « FED视野

  129. Nice piece though I feel there are some issues with the browser compatibility specially with the pseudo class in MSIE. Having said that, there is a solution for the same as it is mentioned to us .htc file but that will use scripting which is not recommended in my opinion. So overall I can say its a nice piece but should be use only for specific browsers and without the .htc file’s inclusion.

    Rupam

Comments are closed.