Sliding JavaScript Menu Highlight 1kb

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.

Posted by Michael in CSS, JavaScript on May 31, 2008

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