使用jquery 簡(jiǎn)單實(shí)現(xiàn)下拉菜單

更新時(shí)間：2015年01月14日 14:23:34 投稿：hebedich

這里給大家展示了一例使用jQuery實(shí)現(xiàn)下拉菜單效果，代碼非常簡(jiǎn)潔，推薦給小伙伴們

Jquery 是一個(gè)輕量的框架，個(gè)人認(rèn)為非常好用，今天就寫(xiě)一個(gè)非常簡(jiǎn)單的例子，實(shí)現(xiàn)下拉菜單功能；

首先肯定要在頁(yè)面引用jquery.js 版本不限；

接下來(lái)把=====================html貼出來(lái)：

復(fù)制代碼代碼如下:

<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樣式：

復(fù)制代碼代碼如下:

/**頭部菜單**/  

.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腳本

復(fù)制代碼代碼如下:

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

    });  

}