I was rather impressed with Rob L Glazebrooks smart tabs (which is itself derived from Stephen Clarks Mini Slide Navigation) but wanted to see if I could rewrite the script to get the animation effect working in Opera.
I also wanted to adhere, as much as possible, to the original CSS used within the simpleBits miniTabs example, as this is probably the most prolific version of the CSS currently being used on the WWW (while Robs tabs look similar, the CSS differs substantially in that the tab styling is achieved on the LI element not the A element, as is the case with the simpleBits original).
This version of the script
- The JavaScript is now a single, self contained Object i.e. only one variable is set within the JavaScript global namespace.
- No extra/proprietary attributes are added to nodes using the DOM.
- The animation effect uses a Robert Penner easeIn algorithm.
- The “smartTab” should now automatically resize and reposition when the browser font size is changed (using a setInterval to track any change in size).
- The “smartTab” reacts to both mouse and keyboard events.
Bugs and annoyances
Opera has a bug in which an elements z-index is ignored should the element be floated and positioned. This means the “smartTab” gets positioned over, not behind, the menus anchor elements which interferes with the event order. The problem has been fixed in Opera 9.
Opera also does not seem to resize and reposition the tab when it’s page zoom feature is used – this affects all versions of Opera.
Safari (2.0.3) incorrectly calculates the y-axis pixel coordinates for the animated tab meaning it floats above the unordered list navigation. This should be easy to fix and will be as soon as I get my hands on a Mac.
Tested in Firefox, Internet Explorer 6 and Opera 9.
View the animated miniTabs demo
Centered miniTabs
A “proof of concept” (“proof of concept” meaning “Only tested in the latest version of Firefox”) demo has been made available in which the tabs are centered within the unordered list.
The CSS used to center the tabs was taken lock, stock and barrel from the Web Graphics centered minitabs demo
References
The ever interesting simpleBits for the original miniTabs, Stephen Clark for the original animation idea, Rob L Glazebrook for the snap back animation idea and finally, Web Graphics for the centered miniTab CSS. Get clicky and go visit.
Quick update #1 (08/03/2006):
An onunload event handler has been added that clears the animation interval (using clearInterval) in order to stop potential IE memory leaks.
Previous Comments ~
Greetings,
Very nice work here! Postively inspiring.
One comment though . . . . this is a great script, but it doesn’t work in Firefox and lots of folks are now using Firefox on both PC and Mac. Any plans for making the script work in that environment?
Have a fantastic vacation!
Peace,
Gail
@ Gail: Hi Gail, what version of FF are you currently using? I’m using 1.5.0.2 (Win) and the demo works fine?
and yep, the vacation was rather relaxing (and much needed).
Thanks for the comment,
Brian
Hi, I searched your script in the Java Scripts Source website and I find it is really a very good menu!
I plan to use it in a web site I designing now. Is it ok?
The FAQ of the Java Script Source stated I can use the scripts for personal and business use also. Can I use it in a company website I designed? I will keep all the information and credits in the file as the original. Is that all I need to do in order to use the script in my site?
Great script here guys! I loved all the links and samples.
Just a quick question/problem: I’ve tried to add a submenu and I end up having some floating issues. Any ideas as to how to ad a submenu?
In addition, any ideas as to how to make the css #current resolve to the page itself? For example, as a user starts at the “home” page, the link home would be selected by default. Once user choose “contact us” links, after the page is uploaded, “contact us” is the underlined link indicating where the user in located in relation to the root.
Thanks for the tips here!
Marcelo.
@ Calvin: Hi Calvin, in fact, all of the scripts presented here are licensed under a non-commercial creative commons but this is one of the scripts that I allow to be used commercially so, go ahead, use it whereever you want.
@ Marcelo: Hi Marcelo, the script wasn’t written with submenus in mind and it would take a complete rewrite to get it to work with nested ol’s. As for the script working out the #current, it’s entirely possible but I haven’t currently got the time to write the code so, I suggest you keep adding the #current server-side.
Sorry I can’t be more help!
Thanks for the comments,
Brian.
Hi, I am also planning on using your wonderful menu on my company website, if it’s alright with you. I love the script, works well, however I had a slight complication with the script I was hoping you could help me with.
class=”active”
seems to work well on most of my pages, but for some reason on a select few pages, it will show the link as active by showing the different color, but will not float the tab underneath the link. The tab just keeps returning to the far left link instead of the one I have chosen as active. I haven’t been able to find a reason for this; the only difference between the pages is that the url is different than the url I selected as the active link (this is because I have sub-pages under the main pages, but still want the main page link to show as active, so the user knows that they are still in the same category). Maybe this makes a difference? but I would assume that the code would simply work for the active link I have chosen, regardless of the page’s url? Any suggestion or explanation you have on this would be greatly appreciated!! Thank you so much, and have a great day!
Jackie
Hi Jackie, glad you like the script. I think you have to change line 54 (within the init() method) from
if(document.location.href.indexOf(aArr[i].href)>=0) {
to
if(aArr[i].className.search("active") != -1) {
and that should fix the problem.
Update: I’ve updated the code for both of the demos so you can just download the new version.
Regards,
Brian.
Hi there,
nice script. But in there seem to be several bugs when used with the safari browser…
1. the y-axis as you mentioned in the bug report
2. the tabs grow or shrink while moving the mouse over the links (on the centered demo more then on the normal one)
@ Louis: Hi Louis, yep, unfortunately there are Safari bugs that I haven’t had time to fix. I currently don’t have access to a Mac running Safari and so can’t even give an estimation on when they will be fixed – sorry!
As for the Y-axis bug, this can be fixed (I’m almost certain) by explicitly setting the height of the animated tab to be equal to the height of a regular tab within the CSS.
The tabs should grow or shrink to fit the width of the associated LI – this is normal functionality.
Thanks for the comment, sorry I can’t be more specific on the timeframe for the bug fix’s.
Regards,
Brian.
Hi Brian,
love the effect, very nice.
However, (in the centered demo) there seems to be some inconsistency in the CSS and HTML between classes/IDs and ‘active’/’current’ – which of each should be used?
@ Jazzle: Hey man, good to hear from you. Yep, your right, the centered miniTab demo CSS has (incorrectly) declared:
ul#miniflex a#current
when it should actually declare:
ul#miniflex a#active
I will shortly be “spring cleaning” the code for both the normal and centered demo’s and shall fix the error then.
Thanks for the heads up,
Brian.
If you use the menu in a centered div (http://www.frequency-decoder.com/demo/animated-minitabs/centered/), the bars will get screwed up when you resize the browser (until you move over the menu again).
I worked-around this by adding the following at the end of the init() function:
var resizeMethod = function() {
var width = (document.all ? document.body.clientWidth : window.innerWidth);
if (width != miniTab.bWidth) {
miniTab.bWidth = width;
miniTab.initSlide(miniTab.activeTab, true);
}
}
miniTab.resizeInterval = setInterval(resizeMethod,500);
You’ll also need to add “bWidth: 0,” and “resizeInterval: null,” at the top, and the appropriate code in cleanUp(). Hope this helps!
Great Script! Is it possible to move the css into a linked stylesheet. I am trying to keep my page code simple. Every way that I try to move the css code, when I do, the underline shifts down about 50px and the horizontal rule below the entire thjing disappears.
@ Moshe: Hi Moshe, why don’t you just copy the CSS declarations and add them to your main stylesheet? If there’s still problems, then something in your stylesheet is overriding the rules specific to the menu.
Regards,
Brian.
i tried to extend effects by styling the minitab with background instead of/in addition to borders, but i noticed the superimposition of elements actually working in FF2, but not in IE6: the text disappears under the tab background color.
it seems (as somewhere reported) that IE ignores z-index settings (animated tab z-index:1, other li elements z-index:2) when absolute positioning (of animated tab) interferes with other static or relative positioned elements.
...something like in Opera 9?
so please help, or better correct me, if IE6 support is tested also about this
@ chancego: Hi chancego, I’m no longer supporting this script as there are much better versions available around the web (fancy menu for example).
Sorry I can’t be more help,
Brian
Is there away to adapt this for a vertically oriented list?
Hey I can’t get the tabs to animate smoothly, like yours. The tab just disappears until I mouseover another one and then it reappears. Can you help me?
@ Moshe: I’m sure that it would be quite easy, the code should already position and scroll the tab to the necessary position so it’s probably just a matter of changing the list CSS.
@ Toby: Toby, looks to me like the JavaScript isn’t kicking in. I’ll need a link to the test page to help you further though.
Comments are currently closed for this article but feel free to email me with your input - I’d love to hear it.