jquery下拉菜單（導(dǎo)航）代碼匯總下載

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

首先要在頁(yè)面引用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”>保護(hù)站</li>  
            <li class=”menuli” id=”mcjy_menu”>木材檢驗(yàn)</li>  
            <li class=”menuli” id=”slgh_menu”>森林管護(hù)</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)場(chǎng)取證</li>  
        <li class=”redli”>問(wèn)題處置</li>  
    </ul>  
</div>  
<div class=”display movediv” id=”mcjy_menu_div”>  
    <ul>  
        <li class=”redli”>位置監(jiān)測(cè)</li>  
        <li class=”redli”>檢驗(yàn)管理</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();  
});  
/** 
 * 頭部菜單綁定滑過(guò)事件 
 */  
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是也是獲取高度，不過(guò)只包括文本高度  
        $(“#” + hideDivId).show();  
        $(“#” + hideDivId).css(“l(fā)eft”, left);  
        $(“#” + hideDivId).css(“top”, top + height);  
    }, function() {  
        // 將原來(lái)的菜單隱藏  
        $(“.display”).hide();  
    });  
}  
/** 
 * 下拉菜單綁定事件 
 */  
function initSubMenuHover() {  
    $(“.display”).hover(function() {  
        $(this).show();  
    }, function() {  
        $(this).hide();  
    });  
}  
/** 
 *  下拉菜單改變顏色 
 */  
function initSubMenuLiHover() {  
    $(“.redli”).hover(function() {  
        $(this).addClass(“redcolor”);  
    }, function() {  
        $(this).removeClass(“redcolor”);  
    });  
}  

頁(yè)面效果如下：

資源下載：

全屏大幅下拉菜單導(dǎo)航代碼

點(diǎn)此下載

點(diǎn)此下載

jQuery Hover響應(yīng)下拉導(dǎo)航菜單欄代碼是一款鼠標(biāo)經(jīng)過(guò)，下拉顯示一片子導(dǎo)航菜單欄目特效，排版精致，推薦下載。

jQuery input文本框點(diǎn)擊下拉選擇代碼是一款鼠標(biāo)點(diǎn)擊input文本框下拉菜單選擇代碼。

jQuery適應(yīng)移動(dòng)端選擇銀行下拉列表是一款適用于移動(dòng)端的選擇銀行下拉菜單代碼。