js二级下拉导航菜单演示下载

javascript原生代码制作网页导航菜单，当鼠标悬浮上去切换对应的子级菜单，鼠标离开后，高亮显示初始选中菜单。

分类：导航菜单 > 下拉导航难易：初级

查看演示下载资源下载积分： 20 积分

导航菜单html代码

<ul class="smenu">
    <li id="s_1" class='s_li_a'>jsfoot 网页特效主要有jquery 特效 js特效 flash特效 div+css教程 html5教程</li>
    <li id="s_2" class='s_li' onmouseover='mover(2);' onmouseout='mout(2);'>
        <a href="http://www.sucaihuo.com/" target="_blank" title="jquery图片特效">jquery图片特效</a>
        <a href="http://www.sucaihuo.com/" target="_blank" title="jquery导航菜单">jquery导航菜单</a>
        <a href="http://www.sucaihuo.com/" target="_blank" title="jquery选项卡特效">jquery选项卡特效</a>
        <a href="http://www.sucaihuo.com/" target="_blank" title="jquery文字特效">jquery文字特效</a>
        <a href="http://www.sucaihuo.com/" target="_blank" title="jquery表单特效">jquery表单特效</a>
        <a href="http://www.sucaihuo.com/" target="_blank" title="jquery表格特效">jquery表格特效</a>
    </li>
</ul>

//设置当前频道
var def = "1";

function mover(object) {

    //主菜单
    var mm = document.getElementById("m_" + object);
    mm.className = "m_li_a";

    //初始主菜单先隐藏效果
    if (def != 0) {
        var mdef = document.getElementById("m_" + def);
        mdef.className = "m_li";
    }

    //子菜单
    var ss = document.getElementById("s_" + object);
    ss.style.display = "block";

    //初始子菜单先隐藏效果
    if (def != 0) {
        var sdef = document.getElementById("s_" + def);
        sdef.style.display = "none";
    }

}

function mout(object) {

    //主菜单
    var mm = document.getElementById("m_" + object);
    mm.className = "m_li";

    //初始主菜单还原效果
    if (def != 0) {
        var mdef = document.getElementById("m_" + def);
        mdef.className = "m_li_a";
    }

    //子菜单
    var ss = document.getElementById("s_" + object);
    ss.style.display = "none";

    //初始子菜单还原效果
    if (def != 0) {
        var sdef = document.getElementById("s_" + def);
        sdef.style.display = "block";
    }
}