So I was recently playing around with a couple of navigation treatments that I’ve seen – Simplebits’ MiniTabs and SlayerOffice’s Focus Slide. And I came up with a navigation “mash-up” of the two. I’m calling it the Mini-Slide Navigation (click to see demo page). I’m not sure this is any great innovation here, and I’m not claiming it to be.
I essentially applied the small Javascript used by Steve Chipman at Slayeroffice for his neat Focus Slide navigation to the equally neat Mini Tab navigation treatment created by Dan Cederholm @ Simplebits, with a few CSS tweaks. So instead of having the bottom indicators “appear” when you hover over the navigation link, the indicator slides between the navigation choices. So if you are a CSS purist, you can go with Dan’s creation. Or you can add Steve’s little Javascript (so Web two point oh-ish) and give the navigation a little bit of life.
This has been tested on IE 5 and Firefox 1.5, however I made no material changes to the Slayeroffice JS so the testing done there should be valid for this. Enjoy!
Martin Hedegaard 7 Jan ’06
Hi
just found this trick, and it works pretty neat, but I dident really liked the way the the slider is activated, but it is an easy fix, done in css only. It basicly makes the whole a element fill more than just the text so the slider is activated in the whole area over the slider. It havent been tested on IE, but it works in Safari and Firefox for mac. The changed css is just posted below
#navheader {
position:relative;
margin:0 auto;
width:100%;
height:18px;
border-top:1px solid #fff;
border-bottom:1px solid #78919B;
background-color:#ffffff;
padding:6px 0 0 0;
z-index:0;
}
#navheader li {
position:relative;
display:inline;
font:10px verdana;
padding:0;
z-index:20;
display : block;
float : left;
}
#navheader li a {
text-decoration:none;
color:#000000;
display : block;
text-align : center;
width : 80px;
}
#navheader li a:hover {
text-decoration:none;
color:#999999;
}
#slider {
position:absolute;
background-color:#ffffff;
border-bottom:5px solid #78919B;
width:80px;
height:17px;
margin:0 2px 0 2px 0;
z-index:1;
margin-left : 5px;
}
Martin Hedegaard 7 Jan ’06
Hi just found this trick, and it works pretty neat, but I dident really liked the way the the slider is activated, but it is an easy fix, done in css only. It basicly makes the whole a element fill more than just the text so the slider is activated in the whole area over the slider. It havent been tested on IE, but it works in Safari and Firefox for mac. The changed css is just posted below#navheader { position:relative; margin:0 auto; width:100%; height:18px; border-top:1px solid #fff; border-bottom:1px solid #78919B; background-color:#ffffff; padding:6px 0 0 0; z-index:0;}#navheader li { position:relative; display:inline; font:10px verdana; padding:0; z-index:20; display : block; float : left;} #navheader li a { text-decoration:none; color:#000000; display : block; text-align : center; width : 80px;}#navheader li a:hover { text-decoration:none; color:#999999;}#slider { position:absolute; background-color:#ffffff; border-bottom:5px solid #78919B; width:80px; height:17px; margin:0 2px 0 2px 0; z-index:1; margin-left : 5px;}
spcoon 7 Jan ’06
hey, steve. you just made del.icio.us popular! congrats!
i’m digging the redesign. hope all is well.
-sean
spcoon 7 Jan ’06
hey, steve. you just made del.icio.us popular! congrats!i’m digging the redesign. hope all is well.-sean
Anonymous 8 Jan ’06
I really love this. I’m trying it out. One thing though….it seems like the underline that moves with the mouse is a fixed width. Would be great it the width could change based on some parameter.
Anonymous 8 Jan ’06
I really love this. I’m trying it out. One thing though….it seems like the underline that moves with the mouse is a fixed width. Would be great it the width could change based on some parameter.
Anonymous 8 Jan ’06
Hi there,
I really like the visuals of this navigation design but am worried about the inherent usability flaw that it creates.
Developers routinely indicate the current location by changing the visual design of the active tab. A kinda “you are here” approach.
If you are on the homepage, you know this because the homepage tab is different.
Your navigation breaks this premise. If you hover over (but do not click) another tab the visual focus shifts to that tab. In essence, even though you are still on the homepage it appears that you are on, for example, the prices page.
This navigation could be greatly improved if that nav. pointer “snapped back” to the active tab on mouseout.
Cheers, Greg
Anonymous 9 Jan ’06
Hi there,I really like the visuals of this navigation design but am worried about the inherent usability flaw that it creates.Developers routinely indicate the current location by changing the visual design of the active tab. A kinda “you are here” approach.If you are on the homepage, you know this because the homepage tab is different. Your navigation breaks this premise. If you hover over (but do not click) another tab the visual focus shifts to that tab. In essence, even though you are still on the homepage it appears that you are on, for example, the prices page.This navigation could be greatly improved if that nav. pointer “snapped back” to the active tab on mouseout.Cheers, Greg
Dimitry 9 Jan ’06
Nice idea! I’ll definitely use this in my upcoming release. This fits great. This would be even more ideal if the slider automatically moved back to the default position on mouseout. For ex. Say if I was currently on the About page, it’d slide to About after the mouse left the menu.
Thanks for the code,
Dimitry
Dimitry 9 Jan ’06
Nice idea! I’ll definitely use this in my upcoming release. This fits great. This would be even more ideal if the slider automatically moved back to the default position on mouseout. For ex. Say if I was currently on the About page, it’d slide to About after the mouse left the menu.Thanks for the code,Dimitry
Anonymous 9 Jan ’06
The effect doesn’t work on Opera (8.51, Linux), but the links are usable.
Anonymous 9 Jan ’06
The effect doesn’t work on Opera (8.51, Linux), but the links are usable.
Anonymous 10 Jan ’06
Doesn’t seem to work in Opera 8.5…
Anonymous 10 Jan ’06
Doesn’t seem to work in Opera 8.5…
Brian Breslin 10 Jan ’06
this is very clever. good job.
Brian Breslin 10 Jan ’06
this is very clever. good job.
Tom 11 Jan ’06
A nice piece of thing! However, is not proof against textsizing (yet?).
Tom 11 Jan ’06
A nice piece of thing! However, is not proof against textsizing (yet?).
Stephen Clark 11 Jan ’06
Hi all:
Thanks for all the comments and good words. To quickly respond to a few comments:
* Yes, the fact that the nav does not have an “active” treatment to indicate the user’s location is something I intend to address. I had started looking into it but did not finish.
The “snapping back” functionality is definitely a good suggestion and also a noticable area for improvement. I’ll look into that as well.
* Martin, thanks for the CSS code and comment. I’ll check it out further!
* Not sure on the fixed/flexible width of the underline. I’ll investigate that as well.
* Didn’t test it on Opera/Linux so not surprised there. Sorry!
Thanks
Stephen
http://www.sgclark.com
Stephen Clark 11 Jan ’06
Hi all:Thanks for all the comments and good words. To quickly respond to a few comments:* Yes, the fact that the nav does not have an “active” treatment to indicate the user’s location is something I intend to address. I had started looking into it but did not finish. The “snapping back” functionality is definitely a good suggestion and also a noticable area for improvement. I’ll look into that as well.* Martin, thanks for the CSS code and comment. I’ll check it out further!* Not sure on the fixed/flexible width of the underline. I’ll investigate that as well.* Didn’t test it on Opera/Linux so not surprised there. Sorry! ThanksStephenhttp://www.sgclark.com
David 13 Jan ’06
Hi Stephen!
Big troubles downloading the style-sheet from the link. I get directed to a Lycos page not found… Can you check it please?
ps… I was one of those who posted you to delicious
David 13 Jan ’06
Hi Stephen!Big troubles downloading the style-sheet from the link. I get directed to a Lycos page not found… Can you check it please?ps… I was one of those who posted you to delicious
Stephen Clark 13 Jan ’06
Sorry! The link has been fixed! I was updating the CSS incorporating Martin’s suggestions and I forgot to update the link. My apologies!!- Stephenwww.sgclark.com
David 13 Jan ’06
No problem Stephen. Thanks for fixing it so quickly!
Marc 13 Jan ’06
Very Nice!I was playing around with your code and added some flash to the ‘slider’ divcheck it out here
Marc 13 Jan ’06
oopps i meant here
Marc 13 Jan ’06
oopps i meant here
Johan Sundström 18 Jan ’06
I’d rewrite it to make the transition constant time rather than constant slide speed, using a cosine stepper, i e x(t,x1,x2) = cos(PI*t/2)*(x2-x1)+x1, t stepping from 0.0 to 1.0. It would probably also make for a snappier interface experience.
Johan Sundström 18 Jan ’06
I’d rewrite it to make the transition constant time rather than constant slide speed, using a cosine stepper, i e x(t,x1,x2) = cos(PI*t/2)*(x2-x1)+x1, t stepping from 0.0 to 1.0. It would probably also make for a snappier interface experience.
Rahul Gonsalves 23 Jan ’06
One of my queer perversities involves changing all fonts to relative font-sizes, and I have taken the liberty to do so with your CSS code. #navheader { position:relative; margin:0 auto; width:100%; height:1.2em; border-top:1px solid #fff; border-bottom:1px solid #78919B; background-color:#fff; padding:6px 0 0 0; z-index:0; max-width: 1000px; } #navheader li { position:relative; display:inline; font:0.8em verdana; padding:0; z-index:20; display : block; float : left; } #navheader li a { text-decoration:none; color:#000; display: block; text-align: center; width: 8em; } #navheader li a:hover { text-decoration:none; color:#999; } #slider { position:absolute; background-color:#FFF; border-bottom:.3em solid #78919B; width:5.2em; height:1.2em; margin:0 2px; z-index:1; margin-left:5px; }Thanks for the sliding tabs. It’s really nice – semantic, and lightweight!
Gavin 2 Feb ’06
Hi,That Navigation is really cool. Im new to CSS and Javascript. I noticed that I could change the speed of the slider in the javascript one way, but was unable to change the other. Even in your demo it slides one way faster. I wanted to slow it a bit and make both directions slide the same speed. Can this be done?
Rob 13 Feb ’06
I’ve developed a variant of this navigation I’m calling Smart Mini Tabs. It extends the usability a bit. I thought you might like to check it out. :)
frequency decoder 6 Mar ’06
Like Rob, I’ve also written a version. It seems to work in IE6, FF, Moz and Opera 9; it’s also keyboard accessible, handles browser font resizing and uses a Robert Penner easeIn algorithm for the snapIn/snapOut animation effect.Great little idea stephen, especially as the original simpleBits miniTabs must be one of the most prolific menu designs on the http://WWW.A demo can be viewed here:http://www.frequency-decoder.com/demo/animated-minitabs/Of course, I didn’t know the idea originated with you and so I will have to change the blog post to point in this direction…Cheers,Brian
car dvd for chrysler 300c 3 Oct ’10
This fits great. This would be even more ideal if the slider automatically moved back to the default position on mouseout.
Stephen Clark 3 Oct ’10
It does do that. Go to http://www.sgclark.com/sandbox/minislide to see it or look at nav of this site. Unless I am misreading your comment?