建站
咨詢
售后
建站咨詢
新聞中心
下拉菜單或?qū)Ш绞俏覀冊诰W(wǎng)站開發(fā)中不可或缺的網(wǎng)站元素之一，使用jquery可以制作出簡潔易用，美觀大方的下拉菜單效果或是導(dǎo)航菜單，jquery是一個輕量級的JavaScript框架，可以兼容CSS3和各種主流瀏覽器，同時還有許多成熟的插件可供選擇，能給用戶帶來更好的使用體驗。下面為大家推薦幾個優(yōu)秀的jquery下拉菜單及導(dǎo)航菜單的代碼下載資源以供參考選擇。首先還是先以代碼實例來看下一個基礎(chǔ)的下拉菜單是如何實現(xiàn)的：
首先要在頁面引用jquery.js，版本不限 ；
HTML代碼如下：
- 出勤管理
- 巡視管理
- 現(xiàn)場取證
- 問題處置
- 位置監(jiān)測
- 檢驗管理
- 出勤管理
- 監(jiān)管信息
- 出勤管理
- 監(jiān)管信息
- 權(quán)限管理
- 設(shè)備管理
css樣式代碼如下：
/**頭部菜單**/
.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();
});
/**
* 頭部菜單綁定滑過事件
*/
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是獲取高度，包括內(nèi)邊距，height是也是獲取高度，不過只包括文本高度
$(“#” + hideDivId).show();
$(“#” + hideDivId).css(“l(fā)eft”, left);
$(“#” + hideDivId).css(“top”, top + height);
}, 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”);
});
}
頁面效果如下：
資源下載：
全屏大幅下拉菜單導(dǎo)航代碼
jQuery全屏大幅下拉菜單導(dǎo)航代碼是一款仿微軟的藍(lán)色大氣全屏網(wǎng)站導(dǎo)航菜單特效。
點此下載
電商網(wǎng)站分類導(dǎo)航菜單特效
jQuery電商網(wǎng)站分類導(dǎo)航菜單特效是一款兼容ie8瀏覽器，點擊左側(cè)的下拉菜單來查看各種商品的列表。
點此下載
黑色網(wǎng)站導(dǎo)航下拉菜單代碼 腳本簡介jQuery黑色網(wǎng)站導(dǎo)航下拉菜單代碼是一款大氣下拉多層tab導(dǎo)航條代碼。
點此下載
動畫下拉導(dǎo)航菜單代碼 jQuery動畫下拉導(dǎo)航菜單代碼是一款在菜單項之間切換時，下拉菜單會根據(jù)菜單內(nèi)容的大小來動態(tài)變形，效果非常有趣。
點此下載
多條件篩選下拉選擇框代碼
jQuery多條件篩選下拉選擇框代碼是一款多種條件篩選的下拉菜單特效下載
點此下載
Hover響應(yīng)下拉導(dǎo)航菜單欄代碼 jQuery Hover響應(yīng)下拉導(dǎo)航菜單欄代碼是一款鼠標(biāo)經(jīng)過，下拉顯示一片子導(dǎo)航菜單欄目特效，排版精致，推薦下載。
點此下載
input文本框點擊下拉選擇代碼 jQuery input文本框點擊下拉選擇代碼是一款鼠標(biāo)點擊input文本框下拉菜單選擇代碼。
點此下載
響應(yīng)式下拉導(dǎo)航菜單
jQuery響應(yīng)式下拉導(dǎo)航菜單插件megamenu是一款兼容IE8瀏覽器，它使用jQuery動畫作為過渡效果，并且具有響應(yīng)式效果，可以無縫和wordpress集成。
點此下載
適應(yīng)移動端選擇銀行下拉列表 jQuery適應(yīng)移動端選擇銀行下拉列表是一款適用于移動端的選擇銀行下拉菜單代碼。
點此下載
鼠標(biāo)經(jīng)過二級菜單下拉代碼
jQuery鼠標(biāo)經(jīng)過二級菜單下拉代碼是一款基于jQuery+CSS3實現(xiàn)的鼠標(biāo)懸浮滑動下拉二級菜單特效。
點此下載
垂直手風(fēng)琴菜單列表代碼
jQuery垂直手風(fēng)琴菜單列表代碼是一款基于jQuery+CSS3實現(xiàn)的用戶列表導(dǎo)航展開收縮下拉菜單代碼。
點此下載
左側(cè)下拉菜單代碼
網(wǎng)站左側(cè)下拉菜單jQuery代碼是一款藍(lán)色風(fēng)格的適合做后臺下拉菜單代碼。
點此下載
當(dāng)前名稱：創(chuàng)新互聯(lián)jQuery教程：jquery下拉菜單（導(dǎo)航）代碼匯總下載
本文路徑：http://www.fisionsoft.com.cn/article/djoccjo.html
