Comments on: Mini Slide Navigation

By: Stephen Clark

Stephen Clark — Sun, 03 Oct 2010 17:30:00 +0000

It does do that. Go to www.sgclark.com/sandbox/minislide to see it or look at nav of this site. Unless I am misreading your comment?

By: car dvd for chrysler 300c

car dvd for chrysler 300c — Sun, 03 Oct 2010 05:39:00 +0000

This fits great. This would be even more ideal if the slider automatically moved back to the default position on mouseout.

By: frequency decoder

frequency decoder — Mon, 06 Mar 2006 14:22:00 +0000

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

By: Rob

Rob — Mon, 13 Feb 2006 07:29:00 +0000

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. :)

By: Gavin

Gavin — Thu, 02 Feb 2006 04:32:00 +0000

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?

By: Rahul Gonsalves

Rahul Gonsalves — Mon, 23 Jan 2006 13:40:00 +0000

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!

By: Johan Sundström

Johan Sundström — Wed, 18 Jan 2006 15:12:00 +0000

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.

By: Johan Sundström

Johan Sundström — Wed, 18 Jan 2006 15:12:00 +0000

By: Marc

Marc — Fri, 13 Jan 2006 17:04:00 +0000

oopps i meant here

By: Marc

Marc — Fri, 13 Jan 2006 17:04:00 +0000

oopps i meant here

By: Marc

Marc — Fri, 13 Jan 2006 17:02:00 +0000

Very Nice!I was playing around with your code and added some flash to the 'slider' divcheck it out here

By: David

David — Fri, 13 Jan 2006 15:29:00 +0000

No problem Stephen. Thanks for fixing it so quickly!

By: Stephen Clark

Stephen Clark — Fri, 13 Jan 2006 14:51:00 +0000

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

By: David

David — Fri, 13 Jan 2006 14:45:00 +0000

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

By: David

David — Fri, 13 Jan 2006 14:45:00 +0000

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

By: Stephen Clark

Stephen Clark — Wed, 11 Jan 2006 15:10:00 +0000

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
www.sgclark.com

By: Stephen Clark

Stephen Clark — Wed, 11 Jan 2006 15:10:00 +0000

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

By: Tom

Tom — Wed, 11 Jan 2006 09:06:00 +0000

A nice piece of thing! However, is not proof against textsizing (yet?).

By: Tom

Tom — Wed, 11 Jan 2006 09:06:00 +0000

A nice piece of thing! However, is not proof against textsizing (yet?).

By: Brian Breslin

Brian Breslin — Tue, 10 Jan 2006 16:49:00 +0000

this is very clever. good job.

By: Brian Breslin

Brian Breslin — Tue, 10 Jan 2006 16:49:00 +0000

this is very clever. good job.

By: Anonymous

Anonymous — Tue, 10 Jan 2006 15:10:00 +0000

Doesn’t seem to work in Opera 8.5…

By: Anonymous

Anonymous — Tue, 10 Jan 2006 15:10:00 +0000

Doesn’t seem to work in Opera 8.5…

By: Anonymous

Anonymous — Mon, 09 Jan 2006 13:20:00 +0000

The effect doesn’t work on Opera (8.51, Linux), but the links are usable.

By: Anonymous

Anonymous — Mon, 09 Jan 2006 13:20:00 +0000

The effect doesn’t work on Opera (8.51, Linux), but the links are usable.

By: Dimitry

Dimitry — Mon, 09 Jan 2006 05:36:00 +0000

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

By: Dimitry

Dimitry — Mon, 09 Jan 2006 05:36:00 +0000

By: Anonymous

Anonymous — Mon, 09 Jan 2006 03:09:00 +0000

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

By: Anonymous

Anonymous — Mon, 09 Jan 2006 03:09:00 +0000

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

By: Anonymous

Anonymous — Sun, 08 Jan 2006 23:53:00 +0000

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.

By: Anonymous

Anonymous — Sun, 08 Jan 2006 23:53:00 +0000

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.

By: spcoon

spcoon — Sat, 07 Jan 2006 22:29:00 +0000

hey, steve. you just made del.icio.us popular! congrats!

i'm digging the redesign. hope all is well.

-sean

By: spcoon

spcoon — Sat, 07 Jan 2006 22:29:00 +0000

hey, steve. you just made del.icio.us popular! congrats!i’m digging the redesign. hope all is well.-sean

By: Martin Hedegaard

Martin Hedegaard — Sat, 07 Jan 2006 21:23:00 +0000

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;
}

By: Martin Hedegaard

Martin Hedegaard — Sat, 07 Jan 2006 21:23:00 +0000

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;}