View Comments Mini Slide Navigation post

1. 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 had this to say on January 7th, 2006 at 4:23 PM

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

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

   -sean

   spcoon had this to say on January 7th, 2006 at 5:29 PM

3. 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 had this to say on January 8th, 2006 at 6:53 PM

4. 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 had this to say on January 8th, 2006 at 10:09 PM

5. 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 had this to say on January 9th, 2006 at 12:36 AM

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

   Anonymous had this to say on January 9th, 2006 at 8:20 AM

7. Doesn’t seem to work in Opera 8.5…

   Anonymous had this to say on January 10th, 2006 at 10:10 AM

8. this is very clever. good job.

   Brian Breslin had this to say on January 10th, 2006 at 11:49 AM

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

   Tom had this to say on January 11th, 2006 at 4:06 AM

10. 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 had this to say on January 11th, 2006 at 10:10 AM

11. 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 had this to say on January 13th, 2006 at 9:45 AM

12. Sorry! The link has been fixed! I was updating the CSS incorporating Martin’s suggestions and I forgot to update the link. My apologies!!

    - Stephen
    http://www.sgclark.com

    Stephen Clark had this to say on January 13th, 2006 at 9:51 AM

13. No problem Stephen. Thanks for fixing it so quickly!

    David had this to say on January 13th, 2006 at 10:29 AM

14. Very Nice!

    I was playing around with your code and added some flash to the ‘slider’ div

    check it out here

    Marc had this to say on January 13th, 2006 at 12:02 PM

15. oopps i meant here

    Marc had this to say on January 13th, 2006 at 12:04 PM

16. 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 had this to say on January 18th, 2006 at 10:12 AM

17. 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!

    Rahul Gonsalves had this to say on January 23rd, 2006 at 8:40 AM

18. 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?

    Gavin had this to say on February 1st, 2006 at 11:32 PM

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

    Rob had this to say on February 13th, 2006 at 2:29 AM

20. 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 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

    frequency decoder had this to say on March 6th, 2006 at 9:22 AM

What's On Your Mind?