Implémentation simple du menu déroulant à l'aide de jquery

Implémentation simple du menu déroulant à l'aide de jquery_jquery

WBOY

Libérer： 2016-05-16 16:20:09

original

1035 Les gens l'ont consulté

Jquery est un framework léger que je pense personnellement très simple à utiliser. Aujourd'hui, je vais écrire un exemple très simple pour implémenter la fonction de menu déroulant

;

Tout d'abord, assurez-vous de citer jquery.js sur la page. La version n'est pas limitée

Ensuite, postez le =====================html :

Copier le code Le code est le suivant :

============================style CSS :

Copier le code

Le code est le suivant :

/**頭部菜單**/  

.header_menu{  

    浮動：右；  

    寬度：50%；  

    高度：100%；  

    遊標：指針；  

}  

.header_menu ul{  

    清單樣式：無；  

    高度：100%；  

}  

.header_menu ul li{  

    浮動：右；  

    寬度：20%；  

    顏色：白色；  

    字體大小：14px；  

    上方填入：55px；  

    字體粗細：粗體；  

}  

.顯示{  

    顯示：無；  

}  

.顯示 ul{  

    清單樣式：無；  

    寬度：100px；  

}  

.display ul li{  

    上方填入：10px；  

    底部填充：5px；  

    左內邊距：5px；  

    遊標：指針；  

    字體大小：14px；  

}  

.movediv{  

    位置：固定；  

    左：0px；  

    上方：0px；  

    字體大小：14px；  

    白色的;  

    邊框：1px純白；  

}  

.redcolor{  

    #a0c9e6；  

}

========================js腳本

複製程式碼以下程式碼：

$(函數() {  

    // 選單綁定事件 

    初始化選單監聽器（）；  

    // 下拉式選單綁定事件 

    initSubMenuHover();  

    // 下拉式選單顏色改變 

    initSubMenuLiHover();  

});  

/**

 * 頭部選單綁定滑過事件 

 */  

函數 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(「左」, 左);  

        $(“#” hideDivId).css(“頂部”, 頂部高度);  

    }, 函數() {  

        // 隱藏原來的選單 

        $(“.display”).hide();  

    });  

}  

/**

 * 下拉式選單綁定事件 

 */  

函數 initSubMenuHover() {  

    $(“.display”).hover(function() {  

        $(this).show();  

    }, 函數() {  

        $(this).hide();  

    });  

}  

/**

 *  下拉式選單改變顏色 

 */  

函數 initSubMenuLiHover() {  

    $(“.redli”).hover(function() {  

        $(this).addClass(“redcolor”);  

    }, 函數() {  

        $(this).removeClass(“redcolor”);  

    });  

}

效果如下：

小夥伴們使用的時候自己美化下，自由擴充下就可以佔用自己的專案中了，我在這裡簡單做了點樣式吧。