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

收藏

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

0、请不要问“在不在”之类的问题，有问题直接问！1、学生或暂时没有工作的童鞋，整站资源免费下载！2、￥9.9充值终身VIP会员,加我微信，826096331 拉你进VIP群学习！3、程序员加油,技术改变世界。在线 充值

查看演示

加我微信，拉你进VIP群学习：

下载资源 下载积分： 30 积分

导航菜单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.erdangjiade.com/" target="_blank" title="jquery图片特效">jquery图片特效</a>
        <a href="http://www.erdangjiade.com/" target="_blank" title="jquery导航菜单">jquery导航菜单</a>
        <a href="http://www.erdangjiade.com/" target="_blank" title="jquery选项卡特效">jquery选项卡特效</a>
        <a href="http://www.erdangjiade.com/" target="_blank" title="jquery文字特效">jquery文字特效</a>
        <a href="http://www.erdangjiade.com/" target="_blank" title="jquery表单特效">jquery表单特效</a>
        <a href="http://www.erdangjiade.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";
    }
}