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

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

效果如下：

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