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