Sliding JavaScript Menu Highlight 1kb

CSS, Javascript 190 responses so far

This sliding hover effect script is an easy method to add some flavor to your navigation. Using the CSS you can easily customize the navigation to fit your “look and feel”. The markup for the script is very simple as below.

<div class="menu">
<ul id="menu">
<li><a href="#">JavaScript</a></li>
<li><a href="#">Graphic Design</a></li>
<li><a href="#">HTML</a></li>
<li value="1"><a href="#">User Interface</a></li>
<li><a href="#">CSS</a></li>
</ul>
<div id="slide"></div>
</div>

In the above code the default menu selection is identified by the value=”1″ attribute on the appropriate list item. To initialize the script simply call the function as below.

menuSlider.init('menu','slide')

This script has been tested in all major browsers and is available free of charge for both personal or commercial projects under the creative commons license. Community support is available here. Paid support is also available, contact me for details.

Click here to download the script.

The following two tabs change content below.
Scriptiny is a web development blog featuring fresh articles on JavaScript, AJAX, CSS, XHTML, PHP, Photoshop and more.

Latest posts by Michael (see all)

  • http://acualicio.us Rolando Murillo

    Awesome! Realle, really awesome. Good examples of JavaScript Power, thanks!

  • Pingback: JavaScript sin frameworks / acualicio.us

  • Neil

    Fantastic. I have been making a real mess of a mootools version of this lava lamp effect. This looks much much simpler.
    Thank you very much.

  • christophe

    if you change :

    g=document.getElementById(k);

    by :

    g=document.createElement(‘div’);
    g.setAttribute(‘id’,k);
    m.parentNode.appendChild(g);

    you can remove <div id=”slide”></div> in html

    thanks for all your work

  • Pingback: Javascript : Quelques liens

  • Pingback: 1kb’lık kayan menu « basarozcan

  • http://www.graphic-euphoria.co.uk Si

    Wow, this is really cool stuff. Have you ever thought of creating your own javascript library? I use jQuery but it contains a lot of functions i would never use. If i had all your functionality in one library it would cover most of my needs for less advanced sites and be a tenth the size!

  • http://www.jankoatwarpspeed.com Janko

    Nicely done. I like to read your articles.

  • http://www.leigeber.com Michael

    Thanks for the suggestions/feedback.

    @christophe – I debated whether to add the slider to the DOM with the JavaScript or not. Anyone interested can definitely grab your code. I will consider changing it when I update the script.

    @Si – The thought had crossed my mind however I really do not have the time to support something on that scale. Perhaps with enough community support it would be possible. Will keep it in mind.

  • http://ayoze.linuxlover.org/blog Ayoze

    Really nice, working fine on Konqueror :)

  • Alexander

    On mouse-out the default position should be the last item you hovered over.

  • http://www.leigeber.com Michael

    @Alex – I developed the script using Firefox 3.0 RC1 and am testing it right now with no problems. Shoot me an email with some more information as to what exactly you are seeing if you don’t mind. Thanks for reporting.

  • Pingback: links for 2008-06-02 « Simply… A User

  • http://bubblebean.org/ KBG

    Just what I’ve been searching for. Thanks for all the hard work! Camxso

  • nickg

    Very Nice! (They all are.)

    I notice that each of the SliderMenus on this page are in iframes.
    Have you tried writing these scripts to allow multiple instances on a single page? I am trying to re-write your Horizontal Accordion as a js class to allow this, will let you know if I succeed.

    Keep up the good work :)

  • http://www.leigeber.com Michael

    @nickg – I have had a couple requests for multiple instance support so I probably will be changing them around a bit to accommodate. Thanks for the feedback.

  • Pingback: links for 2008-06-02 « Mandarine

  • http://www.applelounge.com manoranjan

    Thanks for you people you really make programming brilient.

  • Pingback: Sliding JavaScript Menu Highlight 1kb | White Sands Digital

  • Pingback: Sliding JavaScript Menu Highlight 1kb

  • Pingback: Katod’un Seyir Defteri - 02.06.2008 at katodivaihe

  • Pingback: links for 2008-06-02 « toonz

  • Pingback: » links for 2008-06-02 | Paul Cowles

  • http://bubblebean.org KBG

    I’ve used this in my menu here: http://bubblebean.org. Thanks so much! Camxso

  • Pingback: Skylog » Blog Archive » links for 2008-06-03

  • http://sixrevisions.com Jacob Gube

    Michael,

    Your solutions are so light weight – my first reaction to making something like that would be to use jQuery or mootools. To put it in perspective, the smallest file size that jQuery compresses to is 30KB. If you’re not using jQuery for anything else but an effect such as this, use this solution instead!

    Keep up the great work and I look forward to your future posts! This blog is on fire!

  • http://fruise.googlepages.com/home.html Lee

    This inspired me to create a more expandable, vertical menu along the same lines yesterday… see http://fruise.googlepages.com/bookmarks.html

  • http://www.leigeber.com Michael

    @Lee – Looks good. Thanks for sharing the link. In IE there does seem to be some jerking as you move through the links. Might want to look into it.

  • http://fruise.googlepages.com/home.html Lee

    Yes, thanks… I had to kludge the positioning for IE (at least I can run it in Linux). I still haven’t worked out how you got the slider bar to actually show the text underneath through it – if I fix IE to add the slider to the body then it becomes solid which is useless. If it’s attached to the menu, the ‘absolute’ position becomes relative to the menu… How did you get the CSS to work to show the text through the slider? (-:

  • http://www.leigeber.com Michael

    @Lee – It is a combination of the z-index on the slide and position:relative set on the parent. If you can’t get it working how you want shoot me an email and I will take a look at your code.

    @Areta do Bern – Obrigado :-)

  • Amanda

    This is SUPER-SUPER cool! I’m just wondering, can you do a version with a dropdown menu? ^ ^ hehe..

    Thank you!

  • Pingback: Leigeber: Web Development Blog | CNET.ro

  • gio

    you use :
    document.onmousemove = this.pos;

    if in the site you have another onmouseover declaration, yours will block the new one.
    can you fix this?

  • http://www.leigeber.com Michael

    @gio – This script down not use onmousemove, perhaps you are referring to the tooltip script? If so shoot me an email with a link so I can take a look at the conflict and find a compromise.

  • Richard

    This is awesome mate, I too want to use multiple menus – so I’m trying to modify your code, I suspect you’ll beat me to it though.
    I’m trying to modify your menu to have sub-menus appear horizontally below, it would be the perfect menu on the web then!

  • http://www.tmdesigner.it Giuseppe

    Bello, semplice, compatto. Molto utile per piccoli e grandi lavori. Complimenti!

  • AC

    Great work. I just modified a little bit to support multiple menus in a page, also support click to set the “menu selection”:
    <pre>
    var menuSlider=function(){
    // usage: onload=”menuSlider.init(‘menu1′,’slide1′);menuSlider.init(‘menu2′,’slide2′)” /
    var q=8; //delta width
    var i=8; //delta time interval (ms)

    var sliders=[]; //all share the sam idx;
    var ms=[];
    var intervals=[];
    return{
    init:function(menu,slider){
    var g=document.getElementById(slider);
    var idx = sliders.indexOf(g);
    if(idx !==-1) return; //already initialized

    sliders.push(g); idx=sliders.length-1;

    var menu_items=document.getElementById(menu).getElementsByTagName(‘li’);
    ms[idx]=menu_items[0];
    for(var i=0, L=menu_items.length;i<L;i++){
    var c=menu_items[i]; if(c.value==1){ms[idx]=c;}
    c.onmouseover=function(){menuSlider.mo(this, idx)}; c.onmouseout=function(){menuSlider.mo(ms[idx], idx)};
    c.onmousedown=function(){ms[idx]=this;return false};
    }
    g.style.width=ms[idx].offsetWidth+’px’;
    g.style.left =ms[idx].offsetLeft +’px’;
    },
    mo:function(d,idx){
    clearInterval(intervals[idx]);
    var el,ew; el=parseInt(d.offsetLeft); ew=parseInt(d.offsetWidth);
    intervals[idx]=setInterval(function(){menuSlider.mv(el,ew,idx)},i);
    },
    mv:function(el,ew,idx){
    var g=sliders[idx];
    var l,w; l=parseInt(g.offsetLeft); w=parseInt(g.offsetWidth);
    if(l!==el||w!==ew){
    if(l!=el){var ld,lr,li; ld=(l>el)?-1:1; lr=Math.abs(el-l); li=(lr<q)?ld*lr:ld*q; g.style.left =(l+li)+’px’}
    if(w!=ew){var wd,wr,wi; wd=(w>ew)?-1:1; wr=Math.abs(ew-w); wi=(wr<q)?wd*wr:wd*q; g.style.width=(w+wi)+’px’}
    }else{clearInterval(intervals[idx])}
    }};}();
    </pre>
    #note: those who want to support older version of browser, may need this Javascript extension: http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Reference:Objects:Array:indexOf

  • Windy Phillips

    Thank you, this is an awesome effect and very easy to implement.

    I am running into one problem when using it. It seems to prevent .png fixes for transparency in IE6 from working. I’m no javascript coder, so have no idea where to look. I’ve confirmed that when I remove the body onload the png fix works, when it’s there no dice. I’m currently using Supersleight (http://24ways.org/2007/supersleight-transparent-png-in-ie6). I’ve also tried a few of the other fixes and none seem to work with the menueffect enabled. Any ideas?

    And thanks again for this and all the other awesome scripts you’ve made available.

  • http://www.leigeber.com Michael

    @AC – Thanks for sharing, I will look over you code later on.

    @Windy – You can email me a link to check it out but it is probably due to multiple onload events. You would need to wrap both events in one global onload function. Hope that makes sense.

  • Windy Phillips

    Definitely makes sense. I’d puzzled that out as the probable culprit and started hunting for solutions when you responded. I’ve been poking around for some Global Onloaders on the web so I can have one js get called onload that does all the separate functions. I’ve found a couple variations online. Is there any you’d recommend? Thanks again for the great tools and help. You should put a donation link up so we can at least buy you lunch for all the great stuff. :)

  • http://www.leigeber.com Michael

    @Windy – If you only have a couple you could do something like…

    window.onload = function(){
    function1();
    function2();
    }

  • Henrik

    is there any way to use an id instead of value=”1″ for the active tab? trying to integrate this to joomla menu system, in the active <li> tag i have <li id=”current”>.

    And do you have any idea why the slider is moving so slow when integrated in joomla?

    Love your site by the way!!

  • http://yachtpartnership.org Parker

    Michael, Thanks for the email reply! I ended up scrapping the original yacht site and now am building one using these sliding menus. They work great for me on all browsers except IE. I know that it works on IE “as-is” but as soon as I wrap it in a containing div and lengthen the menu bar, I end up having problems (on IE). It seems that the text move relative to the slider. It could be something entirely trivial, but I can’t seem to figure it out regardless. Any thoughts? Here is the site: http://www.yachtpartnership.org

  • http://www.leigeber.com Michael

    @Parker – Looks like a CSS issue, shoot me a zip of the files and I will look into it.

  • http://yachtpartnership.org Parker

    I assumed it was a CSS issue as well, but could not find it until about 10 mins ago. I had text-align: center in the Body definition for some reason. This was shifting the list on the sliding Nav. Thank you for the help!

  • veeru

    Dear Michael,

    I have issue that i need load the menu based on user id, so i have 5 different menu category to load based on user. what will be right way to use this sliding down menu. As of now im using some menu its supporting XML as datasource. but im very much impressed with ur menu… plz try to give a solution that how i can go forward using ur menu.

    Thanks & Regards

  • Pingback: (依主題重組):電腦技術領域 « eweibookmark

  • http://www.benjitastic.com/ Ben

    Henrik, here’s how you can use an id=”current” instead of the value=”1″:

    On line 8 change this:
    var c,v; c=e[i]; v=c.value; if(v==1){s=c; w=c.offsetWidth; p=c.offsetLeft}

    To this:
    var c,v; c=e[i]; v=c.id; if(v==’current’){s=c; w=c.offsetWidth; p=c.offsetLeft}

    Amazing script Michael. I look forward to your future posts!

  • Ryan

    Is there a way to change the speed of the slide? I’m new to javascript so its tough to rap my head around it.

    Thanks in advance.

  • http://www.leigeber.com Michael

    @Ryan – The q and i variables at the top of the script will effect the speed.

  • http://soniderospecial.blogspot.com taquito

    hello, how you can add the messenger?
    I leave you here, I need some help installing it on my blog, maybe you can do for me, and besides you can give me a few more tips: P
    Please if you can add! here I leave the msn: mariano.143@hotmail.com
    Sorry for my English, I’m argentine , and don’t speak their language, ’cause use a translator
    or at least send a message explaining where each item goes on the page, I am novice in this CSS and HTML.
    I’ve been looking for a menu like this for months!
    please respond!
    taquito

  • maarten

    when used with Dynamic Image Gallery and Slideshow I can’t get the slide effect to work! Can you help? I think it has something to do with the onload event?

  • maarten

    ok, I moved the onload event from the body to the image gallery js script, this works perfectly!

    btw awesome scripts you’ve put online for all of us! thnx

  • http://www.extrasaus.nl maarten

    I put it online check result http://www.extrasaus.nl thnx again

  • dreedenator

    @windy I have the same problem I want to use a trans png and can’t get it to work, i’m using this png hack:http://www.twinhelix.com/css/iepngfix/

    @michael: what is this and how to implement it? :
    window.onload = function(){
    function1();
    function2();
    }

  • dreedenator

    @windy: I got my trans png working on ie6 with the htc hack i was using. Just had to initialize it by adding the li in the style section. Now however only the left side works the right corner is gone!

  • surelock

    This is a great lil script, but I am having trouble getting it to work in IE (6&7), any suggestions? Here is the site I am trying to get it to work on http://www.back40internetinnovators.com/thepuzzleboy/index3.htm It works fine in FF and Opera but it throws the text and slider to the center of the page, and does not align them properly. I realize that this is probably my fault due to an error I made somewhere, but I have had no luck tracking it down.

    Thanks much for any assistance or suggestions you may be able to provide.

  • http://www.leigeber.com Michael

    @dreedenator – The function I referenced is an example of wrapping multiple onload events into one global onload function call.

    @surelock – Looks the same in IE7 and FF to me so not sure what end result you are looking for. Email me if you like.

  • Shalini

    Awesome job…thanks a lot! It truly helps us lesser mortals with little or no knowledge of javascript :)
    But i’m having a problem with aligning the slider and the text in the menu. (in IE 7)
    css –>
    .menu{
    position:relative;
    background: url(“yellow.gif”) repeat-x; */yellow.gif is 1×100 px/*
    width:100%;
    height:100px;
    }

    .menu ul {list-style:none; z-index:10; position:absolute; z-index:100; padding:7px }
    .menu li {float:left}

    .menu a{
    font-size:12px;
    font-family: arial, helvetica, sans-serif;
    text-transform: uppercase;
    font-weight: bold;
    text-align:left;
    }

    .menu a, .menu a:active, .menu a:visited, .menu a:hover {
    text-decoration:none;
    color:#FFF;
    padding:6px;
    }

    #slide {position:absolute; height:30px; background:#89957a; opacity:0.4;
    filter:alpha(opacity=40); z-index:10}

    markup–>
    <div class=”menu”>
    <ul id=”menu”>
    <li id=”current”><a href=”#” >home</a></li>
    <li><a href=”#”>pictures</a></li>
    <li><a href=”#”>architectures</a></li>
    <li><a href=”#”>my account</a></li>
    <li><a href=”#”>how to</a></li>
    </ul>
    <div id=”slide”></div>

    </div>

  • Pingback: » 13 Awesome Javascript Animated Flash Like Menus

  • Pingback: 13 menús dinámicos gracias a Javascript | aNieto2K

  • Pingback: Selección de 13 menús dinámicos con Javascript » Cosas sencillas

  • http://www.diligentdesign.net Corey Freeman

    Awesome code snippet. It’s just what I was looking for for my new project. Thanks. :)

  • http://nometet.com Alex

    Thanks very much! Had you RSS’d and so found this. I wasn’t looking for something like this, but its so good I’m going to have to use it! TY!

  • IIF

    Hi, i’m using ajax to expand content. How to highlight current item in menu using onClick?
    ex. onClick getElementByID(‘id’).value = ’1′;

  • http://macaoidh.name conor

    your CSS link doesn’t work properly in FF3 linux :-) :-)

  • Pingback: 13 Javascript Animated Menus « Peppi Press

  • Pingback: Horizontal Sliding JavaScript Menu Highlighter - Sweet! | mBlog

  • Pingback: 13 Awesome Javascript Animated Flash Like Menus

  • stuemper

    It’s incredible what you can do with such a magnificent codestrip!
    See the slider work on: http://www.playingwithdesign.com
    It just gives the website that little something…

    Thank you so much!

    .s

  • Pingback: Uncontentio.us » Blog Archive » Mootools 1.2 Menu Slider

  • http://law9.com Ajay

    Amazing script..Love your site…

    Just sometimes the hover thing stops in the middle of two menu items..I mean its half on one item and half on the other one…I do not have a file upload capability otherwise would have shown you a screenshot..

    Also I use wordpress nextgen gallery for displaying the slideshow and was wondering wat impact does this have on the show as I see the slide show is taking some time to load…

    Is it possible to fit in your slideshow within wordpress page ? If yes how ?

    I would also love (please)to see a mooflow script – that is if time permits you ! – Mooflow script like – http: // wp – superslider . com/ superslider/superslider-mooflow (Spacing for no link back)

  • Jason

    This is great! Thank you so much for sharing. Question; can you show me (time permitting of course) how I can use this functionality and create a dropdown for each menu item? I would LOVE to be able to have the drop-down displayed horizontally… any ideas?

  • http://none Morten K

    Hey! Omg, looks so awesome!
    But is it possible to have the little stripe at the top, instead of having it at the bottom? And i now around about nothing javascript.

    Thx

  • Nick

    Did anyone find a fix for the transparent png files in IE6 – I’m using the menu and it works perfectly in IE7, FF and Chrome, but it’s a mess in IE6. No transparency and when the slider reach the mouse pointer it goes nuts.

  • foobarweb

    You know you’re my hero!

    Your gadgets are just too damn simple and nice.

  • Pingback: 13 Awesome Javascript CSS Menu « Reeckon

  • Oleg Ivanilov

    My fix to show an active menu:

    JS:

    var menuSlider=function(){
    var m,e,g,s,q,i,z; e=[]; q=8; i=8;
    return{
    init:function(j,k,z){
    m=document.getElementById(j); e=m.getElementsByTagName(‘li’);
    var i,l,w,p; i=0; l=e.length;
    for(i;i<l;i++){
    var c,v; c=e[i]; v=c.id; if(v==z){s=c; w=c.offsetWidth; p=c.offsetLeft}
    c.onmouseover=function(){menuSlider.mo(this)}; c.onmouseout=function(){menuSlider.mo(s)};
    }
    g=document.getElementById(k); g.style.width=w+’px’; g.style.left=p+’px’;
    },
    mo:function(d){
    clearInterval(m.tm);
    var el,ew; el=parseInt(d.offsetLeft); ew=parseInt(d.offsetWidth);
    m.tm=setInterval(function(){menuSlider.mv(el,ew)},i);
    },
    mv:function(el,ew){
    var l,w; l=parseInt(g.offsetLeft); w=parseInt(g.offsetWidth);
    if(l!=el||w!=ew){
    if(l!=el){var ld,lr,li; ld=(l>el)?-1:1; lr=Math.abs(el-l); li=(lr<q)?ld*lr:ld*q; g.style.left=(l+li)+’px’}
    if(w!=ew){var wd,wr,wi; wd=(w>ew)?-1:1; wr=Math.abs(ew-w); wi=(wr<q)?wd*wr:wd*q; g.style.width=(w+wi)+’px’}
    }else{clearInterval(m.tm)}
    }};}();

    PHP:

    $text .= ” <div style=\”width:700px; text-align=center;\” class=\”menu_top\”>\n”;
    $text .= ” <ul id=\”menu_top\”>\n”;
    $text .= ” <li id=\”menu_top_1\”><a href=\”javascript:database_order_select(1);\”>Время и место</a></li>\n”;
    $text .= ” <li id=\”menu_top_2\”><a href=\”javascript:database_order_select(2);\”>Участники заказа</a></li>\n”;
    $text .= ” <li id=\”menu_top_3\”><a href=\”javascript:database_order_select(3);\”>Финансовые расчеты</a></li>\n”;
    $text .= ” <li id=\”menu_top_4\”><a href=\”javascript:database_order_select(4);\”>Проверка информации</a></li>\n”;
    $text .= ” </ul>\n”;
    $text .= ” <div id=\”menu_top_slide\”></div>\n”;
    $text .= ” </div>\n”;
    $text .= ” <SCRIPT TYPE=\”text/javascript\”><!–\n”;
    $text .= ” menuSlider.init(‘menu_top’,’menu_top_slide’, ‘menu_top_1′);\n”;
    $text .= ” //–></SCRIPT>\n”;

    And now you can change active menu by:
    menuSlider.init(‘menu_top’,’menu_top_slide’, ‘menu_top_1′);
    menuSlider.init(‘menu_top’,’menu_top_slide’, ‘menu_top_2′);
    menuSlider.init(‘menu_top’,’menu_top_slide’, ‘menu_top_3′);
    menuSlider.init(‘menu_top’,’menu_top_slide’, ‘menu_top_4′);

  • Pingback: 20 Excellent JavaScript Navigation Techniques and Examples

  • Pingback: 20 Excellent JavaScript Navigation Techniques | For Technical Information

  • Pingback: UIがステキなサイトは沢山のユーザに見て貰えるって理由で10 JavaScript Navigation and Examples を紹介してみる | Web Design G

  • http://www.mintweb.com Ayo

    I am a newbee and a freelancer, new to almost all the tool, I am yet to try this out but here is my thank you in advance.

  • Pingback: 36 Eye-Catching Jquery Navigation Menus | 1stwebdesigner - Love In Design

  • Pingback: Que tal mais links? « Mi Estas Soife

  • nik

    Thank you very much for this! Your work is absolutely brilliant!
    I have a question about this menu slider – how can i align it in the center of the page? setting div tag align=”center” and centering tables does not seem to work in firefox…
    Your help much appreciated

  • Pingback: 36 Eye-Catching Jquery Navigation Menus | Inseven Designs

  • Pingback: 7 Rich & Creative User Interfaces and How to Create Your Own

  • Pingback: 7 Rich & Creative User Interfaces and How to Create Your Own | SeanBurdick

  • http://www.moi-uchastok.ru Aleks

    Thank you.
    Whether it is possible to insert in Joomla

  • Pingback: 7 Rich & Creative User Interfaces and How to Create Your Own | Code Blog

  • Alexander

    I LOVE IT!!!

    My friend needed a default item to be selected with the hover color and stay when you move the mouse away so I added the following:

    STYLE:

    .menu a:hover, .menu a:active, .menu a.default {color:#ffffff;}

    CODE:

    var menuSlider = function() {
    var m, e, g, s, q, i;
    e = [];
    q = 8;
    i = 8;
    return {
    init: function(j, k) {
    m = document.getElementById(j);
    e = m.getElementsByTagName('li');
    var i, l, w, p; i = 0; l = e.length;
    for (i; i < l; i++) {
    var c, v; c = e[i];
    v = c.value;
    if (v == 1) { s = c; w = c.offsetWidth; p = c.offsetLeft }
    c.onmouseover = function() { menuSlider.mo(this) };
    c.onmouseout = function() { menuSlider.mo(s) };
    }
    g = document.getElementById(k);
    g.style.width = w + 'px'; g.style.left = p + 'px';
    menuSlider.mo(s);
    },
    mo: function(d) {
    clearInterval(m.tm);
    var el, ew;
    el = parseInt(d.offsetLeft);
    ew = parseInt(d.offsetWidth);
    m.tm = setInterval(function() { menuSlider.mv(el, ew, d) }, i);
    },
    mv: function(el, ew, d) {
    if (d != s)
    s.all[0].className = '';
    var l, w; l = parseInt(g.offsetLeft); w = parseInt(g.offsetWidth);
    if (l != el || w != ew) {
    if (l != el) { var ld, lr, li; ld = (l > el) ? -1 : 1; lr = Math.abs(el – l); li = (lr < q) ? ld * lr : ld * q; g.style.left = (l + li) + 'px' }
    if (w != ew) { var wd, wr, wi; wd = (w > ew) ? -1 : 1; wr = Math.abs(ew – w); wi = (wr < q) ? wd * wr : wd * q; g.style.width = (w + wi) + 'px' }
    }
    else {
    clearInterval(m.tm);
    if (d == s)
    s.all[0].className = 'default';
    else
    s.all[0].className = '';
    }
    }
    };
    } ();

    In short, I'm passing along the element that the slider is moving to (function mv) and switch to the 'default' style if this is also the default element (s) when we started.

    I also call function mo() in init() so that the default item has the correct hover color from the start.

    GREAT CODE AND EASY TO FOLLOW!!!

    PS My friend found this on a Russian language site because she is working in Ukraine and speaks Russian as a first language. SO, your code is famous world-wide! :-)

  • Supratim

    This is fine but one problem here
    problem = * {margin:0; padding:0}

    for this code the whole pages table is not working cell padding

  • http://rosa.actewagl.net.au archie

    The slide.js seems to be conflicting with a jquery slideshow I have used on the same page. The slideshow is from (http://jonraasch.com/blog/a-simple-jquery-slideshow).
    The sliding image seems to be slowed down by the fade transition rate of the slideshow?
    Does anyone have a tip to fix this?

  • http://www.pixology.net Jon

    How difficult would it be to set the menu to make the default item the last clicked item.

  • http://7onlinecatalog.ru/ наука

    I too think so, but I think that this does not quite fit

  • rose

    Trying to use the id=”current” instead of the value=”1″ and I used the mentioned code above:

    On line 8 I changed this:
    var c,v; c=e[i]; v=c.value; if(v==1){s=c; w=c.offsetWidth; p=c.offsetLeft}

    To this:
    var c,v; c=e[i]; v=c.id; if(v==’current’){s=c; w=c.offsetWidth; p=c.offsetLeft}

    Which made the slider disappear. I tried doing this with the sample files downloaded from the site…no changes to the css, and the only change to the html was changing value="1" to id="current".

    Also what is the reason for the multiple z-index's on the .menu ul in the css?

  • Nathan

    I am getting a firebug error where "d" is undefined, I looked through the script.js and it isnt lying. I redownloaded your code as well and it seems to be the same.

    Any idea's?

  • Nathan

    Actually forget my last post, I forgot to add the default link. I am curious as to how I can increase the speed that the background travels at?

  • Nathan

    Forget all my posts. Thanks for the great work! Keep it up!

  • luppe

    Does anybody know why this menu (just vertical) dosent work in IE ? The submenu will not hide again … ?

  • Pingback: 清晰博客 » 36个引人注目JQuery导航菜单

  • Pingback: Chilesabe » 7 Rich & Creative User Interfaces and How to Create Your Own

  • Pingback: Jquery for Web Design: Navigation | Chicago Web Design

  • Pingback: Net-Kit.com » Blog Archive » 5 Lava lamp / Fancy menu versions

  • Pingback: Free web resources – Net-Kit.com » Blog Archive » 5 Lava lamp / Fancy menu versions

  • shaheen

    Hi

    i want to use this menu with drop down.

    Is it possible?

    Awaiting your answers ASAP.

    Many Thanks

    Shaheen

  • Juan

    Some tip for mix this awesome with a dropdown menu???
    And, it works very fast in Google Chrome… check it out.
    Cheers!

  • http://no Jason C

    Good example. Do you have similar code for vertical menu?

  • http://www.planningsources.com Amadis

    An easy way to make the menu active, in other words the slider stays on the item that has been clicked, is to introduce this code on line 9 after the onmouseover / onmouseout definitions:

    c.onclick=function (){ s=this; };

    This makes the highlighted item become the current one upon clicking

  • kads

    hi sir, for the active menu how can i change the font color to make it different than non active menu?
    ty

  • Grace

    Is there a way to combine the code from http://www.leigeber.com/2008/04/sliding-javascript-dropdown-menu/ with this one? Because I like this but also need a drop down menu

  • Pingback: Professional web designers and web 2.0 experts » Blog Archive » Top 40 Jquery for Web Design: Navigation

  • Pingback: 享受生活 » 36个引人注目JQuery导航菜单

  • Pingback: 15 Amazing jQuery Navigation Tutorials | Presidia Creative

  • Pingback: eagrapho » 35 Awesome jQuery Navigation Enhancing Plugin Tutorials

  • Pingback: 15 Amazing jQuery Navigation Tutorials | qface & sowmo sky

  • sam

    how to align it in centre? i m using tables (1003px) & i placed ur code in one of my TD. its working properly but whole page is left align. I want it CENRE aligned. plz help me. thanks for beautiful menu.

  • Pingback: 享受生活 » 20个优秀的Javascript导航技术 -- 专注于php编程,页面设计,用户体验,SEO,数据库,开源系统,开放平台,前端脚本,架构设计,解决方案,资源共享的web开发技术博客

  • http://digitalinvent.com/aqua/test.html Howard

    Michael, or anyone who knows Javascript, can you take a look at my test page http://digitalinvent.com/aqua/test.html i am having trouble getting the slider aligned to the actual menu texts. i don't know much about Java programing, or Action script, but i know enough to know that the alignment and positioning of the slider seems to be set by the internal slider javascript. Note that i have no trouble setting it's vertical offset by using #slide { position:absolute; top:; }, but i've tried using the same method like #slide { position:absolute; left:300px; }, or at the HTML individual item style level, none of it works. i tried using different positioning properties for #slide {} but fixed doesn't work, neither does float.

    Where in the javascript can i add/edit to make it offset to the right by EXTRA 350px.

    this is an awesome simple script, can't believe how simple it is. and it'll be great if i can get it to work. thanks. In case i loose track of this blog, my email is howzz1854@gmail.com. thanks so much. awesome job again.

  • http://digitalinvent.com/aqua/test.html Howard

    Thank you Michael for responding to my email so quickly. Although your suggested solution didn't work for me. But you did point me to the right direction. I wasn't able to use CSS Float:right;, since doing that renders layering unusable. I figured out that i had change my menu <div> from CSS Float property to "absolute" so the js script could properly register the width and position.

    thanks so much. hope to see more of your programing soon.

  • http://not-published-yet Jay Ashton

    Hi, first of all, this is great – thanks!

    Just wondered if there was a solution to the problem 2 others above have had coz I'm having the same: sam on January 27, 2010 at 12:44 am and Supratim on July 30, 2009 at 12:25 am. It does seem to be a problem with the * {margin:0; padding:0} code, but after 2 days, cannot find a fix :-(

  • Pingback: 36个引人注目JQuery导航菜单 | TechTrack- 科技追踪

  • Pingback: 30 Amazing JQuery Navigation Menu Examples » DJDESIGNERLAB – Find All Your Design Inspirations From This Laboratory

  • http://christschurchconnersville.com parsley

    Thank you for this great little script. My only problem is…. is it possible to make it so that on mouseout the slider will dissapear if there is no value=1. Right now it stays on the last one that was hovered over, but i would like it to dissapear. The main problem is if you mouseout real quick the slider can get caught inbetween list items and looks janky.
    Thanks!

  • http://www.msintermedia.com chicago web design

    Hey, thanks for sharing this, its easy to use the script. Hope to see more useful posts from you.

  • Pingback: 超强1000个jquery极品插件! | 对酒当歌WEB开发

  • http://exmmedia.com Web Design

    Awesome thanks for the script I am going to use this
    thanks for sharing

  • Justin C

    This is excellent! I did have a question though. I have a Flash movie (with a preloader of course) on one of the pages, because of the video, the page takes an extra second to load. I was wondering if there was any way to call the menu slider with $(document).ready instead of using onload in the body tag? Thank you!

  • Justin C

    Nevermind, I figured it out, and using $(document).ready to load the menu was much faster on my page. Its definitely the way to go for image or Flash heavy pages. Here is the code for anyone else though.

    <pre>
    <script type="text/javascript">
    $(document).ready(function(){
    menuSlider.init('menu','slide')
    });
    </script>
    </pre>

  • Pingback: 33 jQuery tutorials to create Navigation Menu

  • Pingback: 33 jQuery tutorials to create Navigation Menu | Photoshop Tutorial and effects

  • Pingback: 33 jQuery Menü | SyncapNoktaOrg

  • http://optisource Vika

    hey i have question regarding the menu script .
    first of all Thanks for making good script
    i am using your script on my site and i want display the current position of slider

    like in the sens

    when the user click html menu then the slider should stay on the html

    can we tell me how should i do that ?

    if you reply me asap then thanks a lot i appreciated

    Thanks ..

  • Arjun K

    Thanks for the fantastic code.

    Is there any way I use it to slide a png/gif image? I am trying to implement a photo-realistic slider selection.

  • http://www.mangliks.com Matrimonial

    Awesome Work.. you people really make programming brilliant. Keep it up..

  • Pingback: 36 Eye-Catching Jquery Navigation Menus | Everything of KK

  • http://70.84.76.21/ Vj

    Hi,
    Thanks for it make nice and short script.but i have problem. here is it
    i am using the background image on slider look the image its look bad ?
    can anyone tell me why it is look this ?

    Thanks

  • al

    did anyone ever manage to figure out the simplest way to have 2 or more instances of this on the same page?

  • Kirill

    Hey man,

    thanx for the great work. This is defintly what i was searching for.

    The only thing i need is to have an active status on each page. Do you have a solution for this, too? I coludn`t find a post that was working on this problem.

    Here is the Link to my work: http://www.growingdetail.de/demo/index.php

    Thanx for your help.

  • Kirill

    I found an easy way to mark up the actives. You only have to say to <li> that it is value=1 on each page with the body id="example". Here is the code:

    <ul id="navi">
    <li class="ind" <?php if ($bodyID == 'index') echo ' value="1" ' ?>><a href="index.php" class="ind">start</a></li>
    <li class="wor" <?php if ($bodyID == 'work') echo ' value="1" ' ?>><a href="work.php" class="wor">work</a></li>
    <li class="bio" <?php if ($bodyID == 'bio') echo ' value="1" ' ?>><a href="bio.php" class="bio">bio</a></li>
    <li class="lin" <?php if ($bodyID == 'links') echo ' value="1" ' ?>><a href="links.php" class="lin">links</a></li>
    <li class="con" <?php if ($bodyID == 'contact') echo ' value="1" ' ?>><a href="contact.php" class="con">contact</a></li>
    </ul>

    It works….!

  • Pingback: 36 Eye-Catching Jquery Navigation Menus - Nagpur City

  • http://inteoria.net/wp ALex

    hello there
    i'm trying to use this script in a dynamic wordpress menu system where i want the js to highlight the current page

    http://www.inteoria.net/bevisibleplus

    basically i need to be able to add the value=1 to the current page.
    any idea?

  • http://twitter.com/grwebguy Bill Creswell

    It's a little off in Chrome – too short?

  • http://freshinsite.com/ Fresh Insite

    This is very cool, the code is just simple …

  • Mr. Quoc Nha

    thanhk ! beautiful… !

  • Pingback: jQuery tutorials to create Navigation Menu. | LittleDime

  • Raxavier

    any chance u have a version of this which i will work with a drop down menu like this http://www.dynamicdrive.com/dynamicindex1/ddsmoothmenu.htm :) ?

  • Vikas

    hi, this is very cool and easy script..i used in my site look at
    http://www.1-800-optisource.com
    but how can i set slider to the current page menu ?

    i mean its show the current on first menu (chemistry) of the navigation bar when i click the machinery its should stay on it right ?

    please help me guys …i am not good at javascript.
    save my life….
    its very urgent .
    Thanks a lot…

  • Tom

    Read the code in the large black box above, and the 2 lines explaining it just below that. The 'value=1' has to be on the link for that page, to keep the highlight there. Each of your pages has the 'value=1' on the same link. :(

  • Vikas

    Thanks Tom for reply me.when look at my script i did same thing .but i am using masterpage and when click navigation menu, page is dynamically generated so how to store the page value =1 ?

  • Bjoern

    Just in case, that someone tries to do the same thing:

    I did it like that – but doesn't perform on IE.

    "
    <div class="menu">
    <ul id="menu">
    <?php
    $category = get_the_category();
    $GLOBALS["category"] = $category[0]->cat_name;
    $GLOBALS["parentcategory"] = get_cat_name($category[0]->category_parent);
    /*if (!empty($GLOBALS["parentcategory"])) {
    echo 'Debug Parent Cat: ' . $GLOBALS["parentcategory"];
    } else {
    echo 'Debug Cat: ' . $GLOBALS["category"];
    }
    */
    /*
    $GLOBALS["category"] = get_the_category();
    $GLOBALS["parentcategory"] = get_cat_name($GLOBALS["category"][0]->category_parent);
    if (!empty($GLOBALS["parentcategory"])) {
    echo 'Debug Parent Cat: ' . $GLOBALS["parentcategory"];
    } else {
    echo 'Debug Cat: ' . $GLOBALS["category"]->cat_name;
    }
    */
    ?>
    <li value="<?php if ( is_home() ) echo'1'; ?>"><a href="<?php bloginfo('url'); ?>">Home</a></li>
    <li value="<?php if ( is_home() == NULL && ($GLOBALS["category"] == Sendung || $GLOBALS["parentcategory"] == Sendung) ) echo'1'; ?>"><a href="<?php bloginfo('url'); ?>/category/sendung/">Sendung</a></li>
    <li value="<?php if ( is_home() == NULL && ($GLOBALS["category"] == Neuigkeiten || $GLOBALS["parentcategory"] == Neuigkeiten) ) echo'1'; ?>"><a href="<?php bloginfo('url'); ?>/category/neuigkeiten/">Neuigkeiten</a></li>
    <li value="<?php if ( is_home() == NULL && ($GLOBALS["category"] == Berichte || $GLOBALS["parentcategory"] == Berichte) ) echo'1'; ?>"><a href="<?php bloginfo('url'); ?>/category/berichte/">Berichte</a></li>
    </ul>
    <div id="slide"><!– –></div>
    </div>

  • Peter Marty

    Thanks for the code Michael, I have adapted it on my portfolio site.
    http://www.adapdivdesign.com

  • Karla

    I really love and admire your work, Keep it up..

    Many Thanks!

  • http://web.kentostudios.com/ Kentostudios

    Pretty! You describe the topic very well. Thanks once again for the push!

    <a href="http://web.kentostudios.com">Kentostudios</a&gt;

  • http://theweb-coder.com Masud Ibn Afjal

    Really .. amazing work ..Many many thanks to you for your great work.

  • http://www.facebook.com/people/Alex-Kittavong/710512127 Alex Kittavong

    I am trying to figure this out myself and i asked myself the exact same thing. Anyone have any answers?

  • Carlos

    Lovely slick code – is there a way to get this tied in with a dynamic wordpress site – i.e using wp_list_pages()

    Cheers.

  • http://www.premierpixels.com Las Vegas Web Design

     Thank you very much.

  • 735422133

    thank you

  • shakirullahi op

    thanks a lot master.. By Logico

  • Soundharrajan89

    thanks

  • Anonymous

    thank you

  • http://www.facebook.com/people/Wahyu-Surya/100002255648207 Wahyu Surya

    Hallo…! it's very good your kontens and thank's very much

  • http://www.hi-techwebmaster.com Web Designing Jodhpur

    Cool Man!! Thanks 4 sharing!!

  • http://www.web4you.co.in/ web4you

    The best part it is light weight which did not make website slow, thank you :)

  • http://www.logoonlinepros.com Affordadble Logo Design

    This is really a great share ,Appreciate it for sharing good work keep it on.

  • Vimal_prapakaran

    Thanks

  • http://www.facebook.com/genocidalchaos Jenna McClure

    Great menu… I adapted it for a site I am building… however, how do decrease the space between the list and the slider? It is like 2" below my menu.

  • http://www.cyberdesignz.com/services/web-redesign website redesign

    Awesome. I really like this menu and I found it long time ago and finally got it.
    Thanks for sharing

  • Timur

    Is there a way to make the line slide on the top instead of the bottom? thanks

  • Timur

    Never mind, I got it! :)

  • Boudewijn Bakker

    Thanks for this cool script!
    One question: is there a way to replace the value tag? Now it is not valid html5!
    Value tag is deprecated. Use styles instead.Specifies the value of a list item. The following list items will increment from that number (only for <ol> lists)

    http://www.tripledesign.nl

  • phuong

    sdf

  • Congtu321_ts

    Great

  • http://profile.yahoo.com/637AWBWYGZG7X27AXJVEVI475E Saimon

    Hi,
    How to work this for RTL( right To left ) menu .
    Thanks.
     

  • http://www.besthemorrhoidremoval.com/home-remedies-for-piles/ piles remedy

    The script is very helpful with my current project. Thanks a lot.

  • Shiva

    It is very nice and useful for me…..
    Thank you…

  • James Ali

    can u adapt this code to work with spry menu bars
     

  • Design
  • Swapna

    pls anybody give me an idea to locate thjs in vertical menu 

  • http://profiles.google.com/sachin9sharma Sachin Sharma

    How can I add "drop down" to the first one?

  • Kate

    Thanks for such a slick navigation. Love it.

    I am having one issue. When I embed an iframe further down in my page, the slider disappears. Only seems to be an issue with Chrome. Has anyone else had issues with this? Is there a solution?

  • Vas

    Thanks for the code! I changed the onmouseover with onclick to meet my requirements. But right after I click on a menu, the slider highlights it and then disappears within a second. I'll appreciate if someone share a solution.

  • ian

    Very nice code. and simple to. Never would have thought of something like this!

  • Ramon

    Nice function indeed, is it also possible to make it slide only once you've clicked and not before and without removing your mouse?

    I've tried this:

    c.onclick=function(){menuSlider.mo(this)}; c.onmouseout=function(){menuSlider.mo(s)}; c.onclick=function (){ s=this; };

    But this way you have to remove your mouse first in order to make it slide.

  • Ramon

    I fixed it by just leaving:

    c.onclick=function(){menuSlider.mo(this)};

    and remove the rest!

  • Craig Myles

    Not sure if this is helpful to anyone, but I noticed an error when there is no active menu item (in my case a 404 page that doesn't exist in the menu). To fix this I changed the code so that the slider disappears when you hover off the menu (as there is no active item to move to). I changed the mo function as follows:

    mo:function(d){ clearInterval(m.tm); var el,ew; if( d){ el=parseInt(d.offsetLeft); ew=parseInt(d.offsetWidth); } else { el=0; ew=0 } m.tm=setInterval(function(){menuSlider.mv(el,ew)},i); },

  • Fuzzypiggy

    Small, smart and slick! Very nice indeed, perfect for my needs!

  • ben

    Is there a way to make it return to <li> with specific "class" instead of "value"?

    Because if there is it will be great for the wp_nav_menu that automatically
    gives the current page <li> a class of "currentpage-item"…

  • minadzhiev

    great, thanks, really helped

x
Loading...