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
1 2 3 4 5 6 7 8 9 | #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
1 2 3 4 5 6 7 8 9 10 | <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> <!-- end main_nav --> |
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
1 2 3 4 5 6 7 | #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
1 2 3 4 | #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.
1 2 3 4 5 | body { behavior: url("/css/csshover.htc"); } |
The Whole Shabang
CSS
1 2 3 4 5 6 7 8 9 10 11 12 | #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
1 2 3 4 5 6 7 8 9 10 | <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> <!-- end main_nav --> |
Pingback: kre8ive » Advanced CSS Menu Trick
Clever.
Another way to achieve this is by using Apple.Com’s menu technique (multiple states on a single image – controlled by positions).
Pingback: Fatih Hayrioğlu’nun not defteri » 31 Aralık 2007 Web’den Seçme Haberler
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.
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.
Pingback: 7 Advanced CSS Menu For Your Next Design
Pingback: 7 Menu css da usare nei propri siti web | Lordmarin
Pingback: CSS ile yatay menü örnekleri - Günlük Haftalık Aylık
Pingback: Menú horizontal muy interesante
Pingback: napyfab:blog» Blog Archive » links for 2008-01-07
thanks
Whenever I try to load the example page, my FF 2.0.0.11 breaks.
Just to know.
Pingback: 7个强大超酷的CSS导航菜单 | 帕兰卓一得
Pingback: Best Of January 2008 | Best of the Month | Smashing Magazine
Pingback: Best Of January 2008 | Best of the Month | Smashing Magazine
Pingback: Best Of January 2008 | Blog
ADVANCED WOULD BE MAKING IT WORK IN IE6 🙂
than you’ll see some trafic
It does work in IE6 with the behavior file mentioned at the end of the article.
Pingback: Advanced CSS Navigation Menu Trick
Pingback: purrl.net |** urls that purr **|
Pingback: Usenet Newsgroups: Anachronistic Service or Useful Communication Tool?
Pingback: 101 CSS Techniques Of All Time- Part 1
Pingback: links for 2008-01-28 | Funny Stuff is all around
Pingback: 7 Advanced CSS Menu, A Great Roundup!!
Pingback: Blog | exand.net » Мои закладки в Январе
Very nice. Clean, easy, good looking. Great post!
Pingback: sbh* - Ma.gnolia: Recently Ma.rk’d
Pingback: Quick Accessibility Testing
Pingback: UK Government fails to take IPv6 implementation seriously
Pingback: Upgrading to Rails 2.0. A Recipe
Pingback: News » Best Of January 2008
Pingback: dock men yapm_?_ - vBulletinTurk.org | Webmaster Forumu
Pingback: blog.bouctoubou.com » Archive du blog » Bouctoubou’s links Graphics #2
Pingback: Powerful CSS-Techniques For Effective Coding | How-To | Smashing Magazine
Pingback: Powerful CSS-Techniques For Effective Coding | Blog
Pingback: 50种强大的CSS技术 | 帕兰映像
Pingback: مدونة الدكتور نت » أرشيف المدونة » مواقع ووصلات (فبراير -2008)
Pingback: Powerful CSS-Techniques For Effective Coding
Pingback: Tips Trick, Software dan Aplikasi Review » Blog Archive » Powerfull CSS Teknik
Good CSS Menu Trick.
Hi
this example are very nice.
i need one more help.
how to give sub menus????????
jarald
Really creative.
Pingback: Skylog » Blog Archive » links for 2008-02-28
Pingback: Un par de trucos avanzados CSS « el50
Pingback: AllSprite | 关注互联网发展,为访客创造价值! » Blog Archive » 50种强大的CSS技术
Pingback: Powerful CSS-Techniques For Effective Coding
Why this technique doesn’t work under a joomla site? Look here: (http://www.eliacomes.com)
Pingback: Advanced CSS Navigation Menu Trick | GreatSo.com
Pingback: Truco CSS para Menu de Navegación | Blogultura.com
Pingback: Kolz Blog » Blog Archive » Powerful CSS-Techniques For Effective Coding
Pingback: jujubeans » Blog Archive » Gotta brush up on the scripting
Pingback: CSS Concept » Blog Archive » Techniques for a Professional CSS
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.
🙁 malesef kod da bazı eksiklikler var sanırım ben yapamadım bunu indirmemizin bir yolu varmı????? 🙁 Helpppp….!!!
May be you are right with all these opportunities of CSS. I will test them and give my opinion after.
Pingback: Sharepoint 2007 from an interface developer’s view
Pingback: Web Design » » Advanced CSS Menu Trick - Web Design Marketing Podcast & Blog
Pingback: 傻仔仔 » 網誌彙整 » 50種強大的CSS技術
gotta try this and see if it works. thanks.
intresting…
very nice comment and menu thanks .
very nice comment and menu thanks .
Good Job.
It’s so nice.
good man nice work….
I love this man…
呵呵 只有看代码能懂一些
Very good i can say
Pingback: Powerful CSS-Techniques For Effective Coding | Studio 646
Pingback: bdITjobs.com : : Blog » Blog Archive » Powerful CSS-Techniques For Effective Coding
Pingback: Flying Code — Flying over the code… » Articles » Créer un menu avec rollover avancé
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!
Pingback: 50种强大的CSS技术 | CodeLog
Pingback: Powerful CSS-Techniques For Effective Coding | adtech ile reklam 2.0 dönemi başlıyor ve Trkycmhrytllbtpydrklcktr r10.net seo yarışması
Good simple css menu script and trick. I like it a lot.
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…
nice job!
crashes my firefox too, shame cause it looks great five seconds before the crash 😉
thanks for this great codes
perfect, thanks
thanx good
Whenever I go to example, my firefox crushes and close it.
Is anything wrong with me??
thankss..
perfect idea thanks
Pingback: Umair’s Blog » Blog Archive » Super Powerful CSS - Techniques For Effective Coding
oh very amazing. my friend you are very good.dış cephe
Pingback: Powerful CSS Techniques For Effective Coding | Udesign's Blog
perfect..
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.
Great technique that has gone straight into the ‘code bank’! Excellent, well done
Pingback: CSS-Styled Lists: 20+ Demos, Tutorials and Best Of
Pingback: sapnagroup notes » Blog Archive » CSS Techniques
Pingback: 五毒 » Blog Archive » 7个强大超酷的CSS导航菜单
Pingback: Advanced CSS Menu Trick | WhiteSandsDigital.com
Great example, thanks.
How wonderful the blog site is! yes its my favorite.
Pingback: Улыбнитесь » Blog Archive » CSS-Styled Lists: 20+ Demos, Tutorials and Best Practices
eyvallah saol admaım
Pingback: deckox - The design Destination » Blog Archive » Advanced CSS Navigation Menu Trick
up down css menü please adress
up down css menü please adress
比较牛
thanks you bro.
Pingback: 10 Challenging But Awesome CSS Techniques - NETTUTS
like it
Pingback: 10 tutoriales de técnicas avanzadas de CSS | frogx.three
Thx u bro.
thx you very much.
Pingback: 50种强大的CSS技术 | 伊莱利奥的博客
Pingback: Blog - WEBmagix » Blog Archive » Awesome CSS techniquies
Thanks
Thanks………
Pingback: Simple Way to Modify Menu Items with jQuery | Joh.nson.us
Pingback: Colección Css (tutoriales): Layout, tables, forms, buttons… — WYDBLOG
awesome tricks boy. Really great.
Pingback: 50 técnicas avanzadas CSS para una codificación efectiva. | AlainAlemany
It does work in IE6 with the behavior file mentioned at the end of the article.
awesome tricks boy. Really great.
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.
Pingback: WebMaster Hizmetleri - CSS ile yatay menü kullanın - derleme
Pingback: 放飞梦想 » Blog Archive » 一个伟大的汇集(7个超炫的CSS菜单)
Pingback: Download 6 Free Ebooks,Software,Scripts and Templates, Iphone, Technology, Games, Life, Webmasters » Blog Archive » 50 Free CSS Navigation Menu Designs
Pingback: OpsiyonBlog.com | Video | Program | Photoshop | Müzik | Css | E-Ticaret | Script | Youtube | Yutub | » Blog Archive » CSS ile yatay menü örnekleri
Hi,
Amazing activities
Great !!!!!!!
I have read this Blog and you have shared good information about Advanced CSS Menu Trick……….
Nice Post!!!!!!!
Thanks.
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
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.
thank you.
Wow, I had no idea it was that easy!
Pingback: Ngra CSS knep som r vrt att ta en titt p | Webbrelaterat
Wow, I had no idea it was
thank youu.
web site::)
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.
seslichat http://www.bizimsokak.biz and sesli sohbet http://www.seslichatbiziz.com
Pingback: Sete tutoriais avançados para criar menus via CSS - Blog do yogodoshi
Wow, I had no idea it was that easy!
Pingback: A Quick Introduction | StylizedWeb.com
möcten sie chat?kommen sie bitte unsere web seite http://www.bizimsokak.biz http://www.seslichatbiziz.com
möcten sie chat?kommen sie bitte unsere web seite http://www.bizimsokak.biz http://www.seslichatbiziz.com ….
The sample site is a fantastic example of the CSS trick. Just loved it!!!
sesli chat te tek adres…
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.
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:
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;)
Pingback: 50种强大的CSS技术 at cssframework
Pingback: A Quick Introduction | Castup
Pingback: Powerful CSS Techniques For Cool Website | Standalone Complex
merci
cok mersi thank you
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
Thanks you very much. It is wonderful..
Above all, this is the most important secret to getting
started on an Internet business: Do it badly — but at least do it!!
thanks you
Thanks you really perfect one writing.I m always follow you
that’s really grat,i just get css button,now css menu.
I love css.
sesli chat,sesli sohbet,sesli chat,sesli sohbet ,sesli chat ,sesli sohbet,sesli sohbet,birsesdeyiz,seslikankam,sesliyizibiz.net
thanks .ok güzel bir site yolunuz açık olsun kankalar
thank çok güzel bir site olmuş elinize sağlık biz size her zaman diyoruz
thanks çok güzel olmuş evet başarılarınızıu dileriz
Pingback: 43 PSD to XHTML, CSS Tutorials Creating Web Layouts And Navigation | 1stwebdesigner - Love In Design
thanks
Goddiiy!
oowwww
thank you supper…
Thanks you too much, this is wonderful.
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.
Pingback: 30 Exceptional CSS Navigation Techniques
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.
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!
Pingback: 55 CSS Menu And Button Coding Tutorials « FED视野
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.