欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

使用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”); 
    }); 

效果如下:

小伙伴們使用的時(shí)候自己美化下,自由擴(kuò)展下就可以用到自己的項(xiàng)目中了,我這里僅僅是簡(jiǎn)單做了點(diǎn)樣式而已。

相關(guān)文章

最新評(píng)論