jquery_jquery を使用したドロップダウン メニューの簡単な実装

Jquery は個人的に非常に使いやすいと思う軽量フレームワークです。今日は、ドロップダウン メニュー機能を実装する非常に簡単な例を書きます。

まず、ページ上の jquery.js を必ず引用してください。バージョンは制限されていません。

次に、=====================html を投稿します:

コードをコピーします コードは次のとおりです:

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       

                                                                                                                                                                                                                                                                                       

                                                                                                                                                                                                                                                                                                        

                                                                                                                                                                                                                                                                                                        

                                                                                                                                                                                                                                                                                                                                                   

============================CSS スタイル:




コードをコピー


コードは次のとおりです:

/**Header menu**/ 
.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(); 
}); 
/**
* Header menu binding slide event
​*/ 
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(); 
    }); 
} 
/**
* Drop-down menu binding event
​*/ 
function initSubMenuHover() { 
    $(“.display”).hover(function() { 
        $(this).show(); 
    }, function() { 
        $(this).hide(); 
    }); 
} 
/**
* Change color of drop-down menu
​*/ 
function initSubMenuLiHover() { 
    $(“.redli”).hover(function() { 
        $(this).addClass(“redcolor”); 
    }, function() { 
        $(this).removeClass(“redcolor”); 
    }); 
} 

效果如下：

小伙伴们使用的时候自己美化下，自由扩展下就可以用到自己的项目中了，我这里仅仅是简单做了点样式而已。