HTML – JavaScript – CSS | Jan 2009 | M.McKennedy
I stumbled upon this lightweight (1kb) horizontal sliding JavaScript menu highlighter yesterday – simple to implement, cross-browser compatible and free! This morning I replaced the existing navigation on McKennedy.org with this sweet-looking version from www.leigeber.com.
McKennedy.org got a make-over this morning which bumped up the site version from 2.0 to 3.0. I replaced the navigation with a nifty sliding JavaScript menu highlighter. The old navigation was a bit boring. The coding was fine and lightweight and relied on CSS using background images but really there wasn’t any flare – at all! Now that I look back at it I am wondering, “what the hell was I thinking?”
2008 Navigation on McKennedy.org
The new sliding JavaScript menu highlighter is pretty slick. On mouseover the highlighting “slides” over the where the mouse pointer was and then slides back to it’s original place. It’s very cool!
2009 Navigation on McKennedy.org
The original sliding JavaScript menu highlighter script can be found here. To implement the new navigation was really simple.
<div class="menu">
<ul id="menu">
<li><a href="some-web-page.html" title="Some Web Page">Web Page 1</a></li>
<li><a href="some-web-page-2.html" title="Some Web Page">Web Page 2</a></li>
<li><a href="some-web-page-3.html" title="Some Web Page">Web Page 3</a></li>
<li value="1"><a href="some-web-page-4.html" title="Some Web Page">Web Page 3</a></li>
</ul>
<div id="slide"></div>
</div>
To set the default menu item use this sytax value=”1″ (as seen above).
The CSS side of it consists of a mere 6 lines which I adjusted below for formatting reasons:
{
margin:0; padding:0;
}
.menuSlide {
position:relative;
background-color:#000000;
height:35px;
width:100%;
}
.menuSlide ul {
list-style:none;
z-index:10;
position:absolute;
z-index:100;
padding:9px 5px;
}
.menuSlide li {
float:left;
}
.menuSlide a, .menuSlide a:active, .menuSlide a:visited, .menuSlide a:hover {
text-decoration:none;
color:#FFF; padding:10px;
}
#slide {
position:absolute;
top:6px;
height:24px;
background:#ffcc33;
z-index:10;
}
The JavaScript (which is a bit advanced for me) side of things is also somewhat compact. I made a few formatting changes below so the code will fit on this page.
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';
},
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)}
}};}();
To initialize the script simply call the function:
menuSlider.init('menu','slide')
For example:
<body onload="menuSlider.init('menuSlide','slide')">
To see this in action go to McKennedy.org.
To download the script from the original source and to check out more of what Mr. Leigeber has to offer (free for both personal and commercial use) go here.
I have personally tested this in the follow web browsers and did not find any issues:
- Firefox – v 3.0.5
- Google Chrome – v 1.0.154.36
- Internet Explorer – v 7.0
- Safari (for Windows) – v 3.2.1
- Opera – v 9.51
Thanks Mr. Leigeber!
