下拉菜單或導航是我們在網站開發中不可或缺的網站元素之一，使用jquery可以制作出簡潔易用，美觀大方的下拉菜單效果或是導航菜單，jquery是一個輕量級的JavaScript框架，可以兼容CSS3和各種主流瀏覽器，同時還有許多成熟的插件可供選擇，能給用戶帶來更好的使用體驗。下面為大家推薦幾個優秀的jquery下拉菜單及導航菜單的代碼下載資源以供參考選擇。首先還是先以代碼實例來看下一個基礎的下拉菜單是如何實現的：

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

<div class=”header_menu”>  
        <ul>  
            <li class=”menuli” id=”xtgl_menu”>系統管理</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”>現場取證</li>  
        <li class=”redli”>問題處置</li>  
    </ul>  
</div>  
<div class=”display movediv” id=”mcjy_menu_div”>  
    <ul>  
        <li class=”redli”>位置監測</li>  
        <li class=”redli”>檢驗管理</li>  
    </ul>  
</div>  
<div class=”display movediv” id=”bhz_menu_div”>  
    <ul>  
        <li class=”redli”>出勤管理</li>  
        <li class=”redli”>監管信息</li>  
    </ul>  
</div>  
<div class=”display movediv” id=”ggsq_menu_div”>  
    <ul>  
        <li class=”redli”>出勤管理</li>  
        <li class=”redli”>監管信息</li>  
    </ul>  
</div>  
<div class=”display movediv” id=”xtgl_menu_div”>  
    <ul>  
        <li class=”redli”>權限管理</li>  
        <li class=”redli”>設備管理</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是獲取高度，包括內邊距，height是也是獲取高度，不過只包括文本高度  
        $(“#” + hideDivId).show();  
        $(“#” + hideDivId).css(“left”, 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”);  
    });  
}  

頁面效果如下：

資源下載：

全屏大幅下拉菜單導航代碼

點此下載

點此下載

jQuery Hover響應下拉導航菜單欄代碼是一款鼠標經過，下拉顯示一片子導航菜單欄目特效，排版精致，推薦下載。

jQuery input文本框點擊下拉選擇代碼是一款鼠標點擊input文本框下拉菜單選擇代碼。

jQuery適應移動端選擇銀行下拉列表是一款適用于移動端的選擇銀行下拉菜單代碼。