Javascript 滑动导航菜单

发布于：电脑网络 2,139 次践踏

先看看今天折腾 WordPress 的成果吧，请见我现在的导航菜单，鼠标移上去试试，滑动的哟，很帅吧。我知道有一个 lavalamp 的 JQuery 效果可以实现滑动导航菜单，不过我试了一下，需要改动太多的地方，而且代码并不是很简洁，违背了我用 JQuery 的初衷，所以放弃了。无意间又发现了一个相较而言比较精简的 Javascript 代码同样可以实现滑动导航的较果，小试一下，居然成功了。

方法来自一个老外的网站：http://www.leigeber.com/2008/05/sliding-javascript-menu-highlight-1kb/

下面是我自己的实践过程：

1、HTML 部分

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

2、Javascript 部分

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)}
}};}();

3、触发 Javascript

在<body>中添加如下代码：

<body onload="menuSlider.init('nav','slide')">

4、CSS 部分

样式部分根据不同的主题有不同的写法，但是有一个地方很关键，以第一步中的 HTML 为例，.nav ul 的 z-index 值一定要比 #slide 的z-index 值大。

补充说明，效果是很不错，但是唯一美中不足的是，我导航菜单中的“日志分类”页面本来是有二级菜单的，可是这么一整，二级菜单的效果木有了，郁闷。。。估计是 JS 冲突了，不知道哪位 JS 高手帮个忙给解决下，实在没办法，我明天又要继续折腾了，不完美不停歇！