Jquery ist ein leichtes Framework, das meiner Meinung nach sehr einfach zu verwenden ist. Heute werde ich ein sehr einfaches Beispiel zur Implementierung der Dropdown-Menüfunktion schreiben
Stellen Sie zunächst sicher, dass Sie jquery.js auf der Seite angeben. Die Version ist nicht begrenzt
============================== CSS-Stil:
Code kopieren
Der Code lautet wie folgt:
/**頭部菜單**/
.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”);
});
}
效果如下:
小夥伴們使用的時候自己美化下,自由擴充下就可以佔用自己的專案中了,我在這裡簡單做了點樣式吧。