updated: December 29th, 2015 / 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

The HTML

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

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

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.

The Whole Shabang

CSS

HTML

Live Example

170 thoughts Advanced CSS Menu Trick

  1. Pingback: kre8ive » Advanced CSS Menu Trick

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

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

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

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

  6. Pingback: Menú horizontal muy interesante

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

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

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

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

  11. Pingback: Best Of January 2008 | Blog

  12. Pingback: Advanced CSS Navigation Menu Trick

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

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

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

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

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

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

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

  20. Pingback: Quick Accessibility Testing

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

  22. Pingback: Upgrading to Rails 2.0. A Recipe

  23. Pingback: News » Best Of January 2008

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

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

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

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

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

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

  30. Pingback: Powerful CSS-Techniques For Effective Coding

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

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

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

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

  35. Pingback: Powerful CSS-Techniques For Effective Coding

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

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

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

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

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

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

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

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

  44. Pingback: Powerful CSS-Techniques For Effective Coding | Studio 646

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  68. 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

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

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

  71. Pingback: A Quick Introduction | StylizedWeb.com

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

  73. Pingback: A Quick Introduction | Castup

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

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

  76. Pingback: 30 Exceptional CSS Navigation Techniques

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

Comments are closed.