Mini Slide Navigation

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.

Update – I updated the directory for the Mini Slide Navigation so the files reside in a directory of the same name as the navigation (/sandbox/minislide/). I have a redirect in place on the old page.

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!

35 Responses to Mini Slide Navigation
  1. Martin Hedegaard Reply

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

  2. Martin Hedegaard Reply

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

  3. spcoon Reply

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

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

    -sean

  4. spcoon Reply

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

  5. Anonymous Reply

    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.

  6. Anonymous Reply

    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.

  7. Anonymous Reply

    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

  8. Anonymous Reply

    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

  9. Dimitry Reply

    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

  10. Dimitry Reply

    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

  11. Anonymous Reply

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

  12. Anonymous Reply

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

  13. Anonymous Reply

    Doesn’t seem to work in Opera 8.5…

  14. Anonymous Reply

    Doesn’t seem to work in Opera 8.5…

  15. Brian Breslin Reply

    this is very clever. good job.

  16. Brian Breslin Reply

    this is very clever. good job.

  17. Tom Reply

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

  18. Tom Reply

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

  19. Stephen Clark Reply

    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

  20. Stephen Clark Reply

    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

  21. David Reply

    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

  22. David Reply

    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

  23. Stephen Clark Reply

    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

  24. David Reply

    No problem Stephen. Thanks for fixing it so quickly!

  25. Marc Reply

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

  26. Marc Reply

    oopps i meant here

  27. Marc Reply

    oopps i meant here

  28. Johan Sundström Reply

    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.

  29. Johan Sundström Reply

    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.

  30. Rahul Gonsalves Reply

    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!

  31. Gavin Reply

    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?

  32. Rob Reply

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

  33. frequency decoder Reply

    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

  34. car dvd for chrysler 300c Reply

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

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

 

Hello

You are looking at the Mini Slide Navigation post which was published on January 3rd, 2006.

I have built a few online things including the Minislide Navigation and a whole host of Desktop Backgrounds. You will also find many posts about Lego, Star Wars, the Boston Red Sox, New England Patriots, and Syracuse Orange basketball.

Share This Post

ADS