使用jquery 簡單實作下拉選單_jquery

 
 
 
 
 
 

/**ヘッダーメニュー**/
.header_menu{
    フロート:右; 
    幅: 50%; 
    高さ: 100%; 
    カーソル: ポインタ; 
}
.header_menu ul{
    リストスタイル: なし; 
    高さ: 100%; 
}
.header_menu ul li{
    フロート: 右; 
    幅: 20%; 
    色:白; 
    フォントサイズ:14px; 
    パディングトップ: 55px; 
    フォントの太さ: 太字; 
}
.display{
    表示: なし。 
}
.display ul{
    リストスタイル: なし; 
    幅: 100ピクセル; 
}
.display ul li{
    パディングトップ:10px; 
    パディングボトム: 5px; 
    パディング左:5px; 
    カーソル: ポインタ; 
    フォントサイズ: 14px; 
}
.movediv{
    位置: 固定; 
    左: 0px; 
    上:0px; 
    フォントサイズ: 14px; 
    白; 
    ボーダー:1px ソリッドホワイト; 
}
.redcolor{
    #a0c9e6; 
}

$(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 は获取高さであり、内边距離を含みます、高さは获取高さでもあり、文本の高さだけを含みません
        $(“#” HideDivId).show(); 
        $(“#” HideDivId).css(“left”, left); 
        $(“#” hideDivId).css(“top”, 上部の高さ); 
    }, 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”); 
    }); 
}