jquery drop-down menu (navigation) code summary download

Drop-down menu or navigation is one of our indispensable site elements in website development, the use of jquery can be produced simple and easy to use, beautiful and generous drop-down menu effects or navigation menu, jquery is a lightweight JavaScript framework, compatible with CSS3 and a variety of mainstream browsers, while there are many mature plug-ins to choose from, can bring users a better experience. H ere are a few good jquery drop-down menus and navigation menu code download resources for reference. Let's start with an example of the code to see how the next underlying drop-down menu is implemented:

First of all, the page refers to .js, the version is unlimited;
The HTML code is as follows:

<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>  

The css style code is as follows:

/**头部菜单**/  
.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;  
}  

The js script code is as follows:

$(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”);  
    });  
}  

The page effect is as follows:

Resource download:

Full-screen large drop-down menu navigation code