The Ultimate Tabbed Menu
Posted 2 years, 1 month ago at 12:17 am. 20 comments
Many of my loyal readers, cough cough, will remember the story I had here a while back talking about a great tutorial a friend of mine wrote on how to achieve rounded corners with CSS. Not only was his guide great, but it was received well throughout the web community. Well, he wasn’t done wowing us, and has released yet another guide with downloads and all.
Tonight ladies and gentlemen, I introduce the aptly named Ultimate Tabbed Menu, from the same creator of the Octopus Engine, my dear friend Anand Sharma.
His latest guide is extremely detailed, features examples, and a breakdown of the source and css. Best of all, hes packed everything up into one nice download. Tons of various tab designs, examples, the PSD’s, he’s got it all in there!
So head over to his site (freshly redesigned) and check out his amazing tutorial. Digg it here!
I accidently stumbled upon this article at del.ico.us,
and after I read this article another one immediately came to my mind :
http://www.damninteresting.com/?p=406
Read it, learn from it. Develope your skills for a few years and learn how other people solve problems. And then come back and apologize for that crappy solutions you were posting here as you we’re thinking you’re really good in what you’re doing. And don’t forget to delete my post because you are afraid to let other people discuss what I just wrote.
It’s nice (and I don’t really see a reason to go mad like… That person above me did), but I can’t see why it’s the ‘ultimate tabbed menu’. Havn’t tabbed menus, based on the same code, been around for ages now? Heck, I could make them myself ages ago without tutorials, so you’re just making a downloadable version of them with some nice styles, really. I can’t see any difference…
This seems to break in IE if you use two words in the tab. The second word doesn’t stay inline. Does anyone else have this problem?
Great resource otherwise for non-designers such as myself.
It goes away if you use
instead of normal whitespace. damn IE! Thanks again!
Hmm. I’m glad you got it working. Silly IE…
It doesn’t work in IE 7 Beta 2.
Yeah, I guess they aren’t very ultimate. The article was rushed to be released.
and again, not a single example on 456 berea street’s inverted sliding doors technique..
great job, though.
It’s a matter of using in the text for the tabs where a regular space would go, or using {white-space: nowrap;} in your css for the anchor tag. That should fix it. Or do a search regarding this method.
It still validates using this.
Great article and great tutorial! Thanks!
uh, that would be “
Like this:
Tabbed ItemThe tabs don’t scale vertically in Gecko. Also, in my opinion the technique used to indicate the active tab moves structure to the style layer. I prefer to add a class to the active tab’s list item, wrap its inline elements in em or strong and append “ (You are here)â€? or prepend “You are here: â€? to the title attribute of its anchor.
They also look junky on Safari 2.
‘Ultimate’ seems to be a strong word for what is a relatively simple technique and which doesn’t work in the browser with the best CSS support on the market.
Dude, great work and way to add to the community!
Thanks!
they don’t work in safari
Yeah, something wacky is going on with the backgrounds above each tabs in Safari. This affects each demo past the basic one.
I LOVE it.
The files and everything look and work great. I do have one issue that I haven’t been able to solve.
When these tabs are on a large page and not at the top, when a tab is clicked the page scrolls to the level of the text that is to appear. The tabs then are no longer visible, not very practical for navigation.
What can I do to achieve the same, but let it scroll in such a way that the tabs remain visible?
I checked out the page, but none of the demos work?
I wish that when you hovered over the body class tab, it would do nothing. You cannot go to a page where you already on, thus the proper behavior would be no action when you hover over it or click it.
Also if there was code to make the tabs duck a little instead of rise a little, it would be able to simulate rollover buttons.
tested 6 demo links - all broken
what happened?
ref:
http://www.dragon-labs.com/articles/utm/