Awesome! Than you so much.

[...] Menú con resalte deslizante. [...]

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

[...] Красивое слайдинговое JavaScript меню можно от веб девелопера Laigber. Примеры здесь и здесь. Архив с меню здесь. Первоисточник здесь. [...]

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!

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

It’s broken in Firefox3 RC1

[...] Sliding JavaScript Menu Highlight 1kb (tags: javascript menu slider navigation webdesign css menus **) [...]

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

[...] Sliding JavaScript Menu Highlight 1kb This sliding hover effect script is an easy method to add some flavor to your navigation. (tags: javascript webdesign) [...]

Thanks for you people you really make programming brilient.

[...] sliding hover effect script is an easy method to add some flavor to your navigation.read more | digg [...]

[...] Sliding JavaScript Menu Highlight 1kb - Multi-Core Ant Colony Optimization for TSP in Erlang - SQL Server Programming Hacks - Using URL [...]

[...] блог Майкла Лейгебера. Категория: JavaScriptАвтор: Spider Дата: 3 Июнь 2008 Время: 0:14 [...]

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

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!

Muito bom garoto!!!

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

Thank you!

Excellent tutorial. Simple and direct.

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?

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!

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

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

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!

[...] Sliding JavaScript Menu Highlight 1kb - Web Development Blog [...]

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.

Thanks Michael!

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?

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

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

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.

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>