閱讀(82.4k) 書簽贊(11) 我要糾錯

jquery下拉菜單（導航）代碼匯總下載

2021-12-14 17:00 更新

下拉菜單或?qū)Ш绞俏覀冊诰W(wǎng)站開發(fā)中不可或缺的網(wǎng)站元素之一，使用jquery可以制作出簡潔易用，美觀大方的下拉菜單效果或是導航菜單，jquery是一個輕量級的JavaScript框架，可以兼容CSS3和各種主流瀏覽器，同時還有許多成熟的插件可供選擇，能給用戶帶來更好的使用體驗。下面為大家推薦幾個優(yōu)秀的jquery下拉菜單及導航菜單的代碼下載資源以供參考選擇。首先還是先以代碼實例來看下一個基礎(chǔ)的下拉菜單是如何實現(xiàn)的：

首先要在頁面引用jquery.js，版本不限；
HTML代碼如下：

<div class=”header_menu”>  
        <ul>  
            <li class=”menuli” id=”xtgl_menu”>系統(tǒng)管理</li>  
            <li class=”menuli” id=”ggsq_menu”>干管所勤</li>  
            <li class=”menuli” id=”bhz_menu”>保護站</li>  
            <li class=”menuli” id=”mcjy_menu”>木材檢驗</li>  
            <li class=”menuli” id=”slgh_menu”>森林管護</li>  
        </ul>  
    </div>  
<div class=”display movediv” id=”slgh_menu_div”>  
    <ul>  
        <li class=”redli”>出勤管理</li>  
        <li class=”redli”>巡視管理</li>  
        <li class=”redli”>現(xiàn)場取證</li>  
        <li class=”redli”>問題處置</li>  
    </ul>  
</div>  
<div class=”display movediv” id=”mcjy_menu_div”>  
    <ul>  
        <li class=”redli”>位置監(jiān)測</li>  
        <li class=”redli”>檢驗管理</li>  
    </ul>  
</div>  
<div class=”display movediv” id=”bhz_menu_div”>  
    <ul>  
        <li class=”redli”>出勤管理</li>  
        <li class=”redli”>監(jiān)管信息</li>  
    </ul>  
</div>  
<div class=”display movediv” id=”ggsq_menu_div”>  
    <ul>  
        <li class=”redli”>出勤管理</li>  
        <li class=”redli”>監(jiān)管信息</li>  
    </ul>  
</div>  
<div class=”display movediv” id=”xtgl_menu_div”>  
    <ul>  
        <li class=”redli”>權(quán)限管理</li>  
        <li class=”redli”>設(shè)備管理</li>  
    </ul>  
</div>

css樣式代碼如下：

/**頭部菜單**/  
.header_menu{  
    float:right;  
    width: 50%;  
    height: 100%;  
    cursor: pointer;  
}  
.header_menu ul{  
    list-style: none;  
    height: 100%;  
}  
.header_menu ul li{  
    float: right;  
    width: 20%;  
    color:white;  
    font-size:14px;  
    padding-top: 55px;  
    font-weight: bold;  
}  
.display{  
    display: none;  
}  
.display ul{  
    list-style: none;  
    width: 100px;  
}  
.display ul li{  
    padding-top:10px;  
    padding-bottom: 5px;  
    padding-left:5px;  
    cursor: pointer;  
    font-size: 14px;  
}  
.movediv{  
    position: fixed;  
    left: 0px;  
    top:0px;  
    font-size: 14px;  
    white;  
    border:1px solid white;  
}  
.redcolor{  
    #a0c9e6;  
}

js腳本代碼如下：

$(function() {  
    // 菜單綁定事件  
    initMenuListener();  
    // 下拉菜單綁定事件  
    initSubMenuHover();  
    // 下拉菜單顏色改變  
    initSubMenuLiHover();  
});  
/** 
 * 頭部菜單綁定滑過事件 
 */  
function initMenuListener() {  
    $(“.menuli”).hover(function() {  
        var hideDivId = $(this).attr(“id”) + “_div”;  
        // 得到菜單的位置  
        var left = $(this).offset().left;  
        var top = $(this).offset().top;  
        var height = $(this).outerHeight();//outerHeight是獲取高度，包括內(nèi)邊距，height是也是獲取高度，不過只包括文本高度  
        $(“#” + hideDivId).show();  
        $(“#” + hideDivId).css(“l(fā)eft”, left);  
        $(“#” + hideDivId).css(“top”, top + height);  
    }, function() {  
        // 將原來的菜單隱藏  
        $(“.display”).hide();  
    });  
}  
/** 
 * 下拉菜單綁定事件 
 */  
function initSubMenuHover() {  
    $(“.display”).hover(function() {  
        $(this).show();  
    }, function() {  
        $(this).hide();  
    });  
}  
/** 
 *  下拉菜單改變顏色 
 */  
function initSubMenuLiHover() {  
    $(“.redli”).hover(function() {  
        $(this).addClass(“redcolor”);  
    }, function() {  
        $(this).removeClass(“redcolor”);  
    });  
}

頁面效果如下：