Sliding JavaScript Menu Highlight 1kb

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

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

Nicely done. I like to read your articles.

Really nice, working fine on Konqueror

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

Thanks for you people you really make programming brilient.

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!

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!

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!

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>

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!

Awesome! Than you so much.

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

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?

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.

greate work so simple tnks a lot

nice menu and very useful

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

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!

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?

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

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?

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

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

Hi

i want to use this menu with drop down.

Is it possible?

Awaiting your answers ASAP.

Many Thanks

Shaheen

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

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

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.

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.

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

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

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

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>

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.

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

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

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

cool navigation-menus
thanks!You made some good points there.
<a href="http://www.xn--12c1bcr4c5bwcm5j8c.com//">seo</a>

Hi
Nice script.
Thanks
Avi