Flexible CSS tabnavigation
Update: judging by the comments below it seems it was not obvious that the JavaScipt is only needed to support MSIE. I added this even more obviously to the explanation text. Hopefully it is clearer now…
I was asked by a friend yesterday to review their company web site and was amazed to see table layouts with MM_ JavaScript rollover abominations still being paid good money for.
One of the arguments for the oldschool design was that they wanted “buttons” for navigation, and I promised to make a demo of a text/CSS navigation that does look like a nice graphical one and allow for font-resizing without breaking apart. It is nothing special, it has been done before but what the hey, have a look for yourself:
“Proceed to the flexible navigation example”:http://icant.co.uk/articles/flexible-css-menu/
October 13th, 2005 at 9:32 pm
You don’t need any JS for this, a:hover works in IE aswell. :)
October 13th, 2005 at 11:29 pm
That is true, however, if you had read the article and looked at the example you’d realise that we need a hover effect on both the link and the list element to get the flexible tab (left corner on the LI, right corner on the link… And MSIE does not do li:hover and I didn’t want to add or generate extra SPANs inside the links, which would be another way of doing it…
October 21st, 2005 at 5:27 pm
It’s funny that such a new article is still using the unnecessary JS to do the rollover, has no one paid attention to ALA? There’s an article that tells you all this, just better.
http://www.alistapart.com/stories/rollovers/
October 21st, 2005 at 7:13 pm
Far it be for me to question Jesus, but could you enlighten us how you do the same effect in MSIE 6 without using a script or add another SPAN into the A?
MSIE only recognises :hover on links, to achieve the effect of both rounded courners we need two elements overlapping and both changing when you roll over. As we don’t use a SPAN inside the link (as that would be extra markup) we need to have a rollover on the LI.
On Firefox, Opera and Safari there is no need for any JavaScript, but instead of codeforking I just applied it to all browsers…
October 27th, 2005 at 10:20 pm
Hey, I tried out your flexible css navigation. I did however run into a small problem with IE (Firefox and Opera worked fine). If you click on the tab and press the “back” button. Sometimes the colors are not correct on the tabs. But when you use your mouse and click anywhere on the page other than the tab, the color is restored. Can you look into this problem? If you need to visualize it, please let me know. Thanks
May 12th, 2006 at 5:24 pm
What about clickable rows? In JS I can I can set onclick event for whole row. It’s typical use in database views – to switch user from table view to detail.
How can I make it without JS? IMVHO it’s impossible. Of corse, in all cells I can add anchors, but they can contain react only for space with text, no for white space, or table borders…
January 26th, 2007 at 12:23 pm
Hi, ive run into a problem in IE, when you have the cache settings set to ‘check for new versions of stored pages, every visit to the page’ the rollovers dont work properly, every time you hover on them it reloads the image, this doesnt look too good.
is there any way of solving this, thanks.
December 12th, 2007 at 8:09 pm
Hi Chris,
I wonder if there is anyway to center the nav bar if needed. Because of the way we float the li to the left, I can’t seem to center the nav bar at all(tried tex-align:center;margin-left:auto;margin-right:auto;)
Regards
yellow1912
May 9th, 2008 at 10:04 am
This seems like it will make a good solution to the wishlist bug of my current software project. Thanks for the really clear, detailed and nicely visualized tutorial. As soon as I can make it along these lines you may enjoy credit for your work inside the code of every Sensorbox created. :-)
Greetings
April 6th, 2009 at 8:13 am
Hi These Tab Menus work magically with all main browsers only using single image. really great trick…but this may be greatest trick if you can make these menus working with all browsers without using Java Script…Thanks a lot for this great effort…Keep it up and try to provide the solution only using CSS…
January 31st, 2010 at 11:41 pm
Hi there. First of all, thank you for this tutorial, it helped me out a lot. But I am stuck at the JavaScript stage. I am new to web design and although I have built a website using HTML and CSS, I have no prior knowledge of JavaScript. My question is – where do I put the JavaScript code? Do I need a separate sheet (like CSS) or does it fit into the body of my HTML page? If so, where do I put it so it just relates to the navigation bar?
Your response would be very much appreciated.
Regards,
Laura.