簡單易懂的jQuery導(dǎo)航(三級菜單)源碼

!--?三級操蛋導(dǎo)航?--

為東莞等地區(qū)用戶提供了全套網(wǎng)頁設(shè)計制作服務(wù)，及東莞網(wǎng)站建設(shè)行業(yè)解決方案。主營業(yè)務(wù)為網(wǎng)站設(shè)計制作、網(wǎng)站建設(shè)、東莞網(wǎng)站設(shè)計，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務(wù)。我們深信只要達(dá)到每一位用戶的要求，就會得到認(rèn)可，從而選擇與我們長期合作。這樣，我們也可以走得更遠(yuǎn)！

div?class="nav_left"

div?class="nav_leftlist"

h2b/b用戶系統(tǒng)/h2

dl

dtb/b用戶管理/dt

dd

a?class="cur"?href=""商戶信息b/b/a

a?href=""用戶信息b/b/a

/dd

/dl

/div

div?class="nav_leftlist"

h2b/b財務(wù)系統(tǒng)/h2

dl

dtb/b系統(tǒng)賬務(wù)/dt

dd

a?href=""平臺賬單b/b/a

a?href=""賬單明細(xì)b/b/a

/dd

/dl

dl

dtb/b商戶賬務(wù)/dt

dd

a?href=""商戶賬單b/b/a

a?href=""提現(xiàn)管理b/b/a

/dd

/dl

dl

dtb/b用戶賬務(wù)/dt

dd

a?href=""用戶賬單b/b/a

a?href=""提現(xiàn)管理b/b/a

/dd

/dl

/div

/div

style

.nav_left{background:?#232b35;height:?100%;width:?220px;min-height:?600px;position:?fixed;top:?100px;left:?0;}

.nav_leftlist{}

.nav_leftlist?h2{height:?50px;line-height:?50px;padding-left:?40px;font-size:?16px;background:?#3b444f;color:?#999999;position:?relative;cursor:?pointer;}

.nav_leftlist?h2?b{position:?absolute;top:?20px;left:?13px;width:?16px;height:?9px;background:?url(../images/icon04.png)?no-repeat;background-position:?0?0;cursor:?pointer;}

.nav_leftlist?h2?b.cur{background-position:?-16px?0;}

.nav_leftlist?dl{}

.nav_leftlist?dl?dt{height:?50px;line-height:?50px;background:?#2c3643;font-size:?16px;color:?#ffffff;padding-left:?60px;position:?relative;cursor:?pointer;}

.nav_leftlist?dl?dt?b{position:?absolute;top:?20px;left:?34px;width:?16px;height:?9px;background:?url(../images/icon04.png)?no-repeat;background-position:?0?-10px;}

.nav_leftlist?dl?dt?b.cur{background-position:?-16px?-10px;}

.nav_leftlist?dl?dd{}

.nav_leftlist?dl?dd?a{display:?block;height:?50px;line-height:?50px;color:?#fff;padding-left:?80px;font-size:?16px;position:?relative;}

.nav_leftlist?dl?dd?a.cur{color:?#ee581c;}

.nav_leftlist?dl?dd?a.cur?b{display:?block;position:?absolute;top:?16px;right:?-1px;width:?11px;height:?18px;background:?url(../images/icon04.png)?no-repeat;background-position:?0?-20px;}

/style

/body

script?type="text/javascript"?src="../js/jquery.js"?/script

script?type="text/javascript"?

$(function(){

$('.nav_leftlist').on('click',?'h2',?function(event)?{

$(this).siblings('dl').toggle();

if($(this).siblings('dl').css('display')=='none'){

$(this).find('b').addClass('cur');

}else{

$(this).find('b').removeClass('cur');

}

});

$('.nav_leftlist').on('click',?'dl?dt',?function(event)?{

$(this).siblings('dd').toggle();

if($(this).siblings('dd').css('display')=='none'){

$(this).find('b').addClass('cur');

}else{

$(this).find('b').removeClass('cur');

}

});

})

/script

效果圖：

怎么用CSS和jQuery實現(xiàn)一個側(cè)滑導(dǎo)航菜單

可以參考：

為了建立導(dǎo)航菜單，讓我們先看看html結(jié)構(gòu)：

!DOCTYPE html

html lang="en"

head

meta charset="UTF-8"

titleAnimation Menu Demo/title

link rel="stylesheet" href=""

link href='' rel='stylesheet' type='text/css'

link rel="stylesheet" href=""

script src=""/script

script src="script.js"/script

link rel="stylesheet" href="style.css"

/head

body

!-- Content goes here --

/body

/html

首先，我們引用normalize.css作為默認(rèn)樣式，以確保我們的菜單在每個瀏覽器是一樣的。我們使用字體圖標(biāo)fontawesome來顯示菜單項向下的圖標(biāo)。我們還需要引用jQuery來實現(xiàn)菜單的切換。

面板按鈕

每個網(wǎng)站面板導(dǎo)航按鈕都類似。它往往是一個圖標(biāo)字體，如fontawesome，但在本教程中我想添加一些動畫，所以我們用橫線來實現(xiàn)。基本上，我們的按鈕是一個跨度，包含三個div顯示為水平橫線。

span class="toggle-button"

div class="menu-bar menu-bar-top"/div

div class="menu-bar menu-bar-middle"/div

div class="menu-bar menu-bar-bottom"/div

/span

樣式看起來如下：

.toggle-button {

position: fixed;

width: 44px;

height: 40px;

padding: 4px;

transition: .25s;

z-index: 15;

}

.toggle-button:hover {

cursor: pointer;

}

.toggle-button .menu-bar {

position: absolute;

border-radius: 2px;

width: 80%;

transition: .5s;

}

.toggle-button .menu-bar-top {

border: 4px solid #555;

border-bottom: none;

top: 0;

}

.toggle-button .menu-bar-middle {

height: 4px;

background-color: #555;

margin-top: 7px;

margin-bottom: 7px;

top: 4px;

}

.toggle-button .menu-bar-bottom {

border: 4px solid #555;

border-top: none;

top: 22px;

}

.button-open .menu-bar-top {

transform: rotate(45deg) translate(8px, 8px);

transition: .5s;

}

.button-open .menu-bar-middle {

transform: translate(230px);

transition: .1s ease-in;

opacity: 0;

}

.button-open .menu-bar-bottom {

transform: rotate(-45deg) translate(8px, -7px);

transition: .5s;

}

按鈕有一個固定的位置，不動時滾動頁面。它也有一個 z-index :15的樣式，以保證它總是保持在其他重疊元素之上。按鈕由三條橫線。每橫線都有自已的樣式，我們給它加上.menu-bar樣式。類其余的樣式被移動到單獨的樣式文件中。動畫發(fā)生時，我們添加一個類.button-open。我們引用jQuery，可以比較方便的實現(xiàn)它：

$(document).ready(function() {

var $toggleButton = $('.toggle-button');

$toggleButton.on('click', function() {

$(this).toggleClass('button-open');

});

});

初學(xué)者可能不熟悉jQuery，讓我解釋一下這是怎么回事。首先，我們初始化一個變量稱為$togglebutton，其中包含我們的按鈕。我們將它存儲為一個變量，然后我們創(chuàng)建一個事件監(jiān)視器監(jiān)聽點擊按鈕。每單擊一次，事件監(jiān)聽器會執(zhí)行方法 function toggleclass()來切換.button-open。

.button-open我們可以用它來改變這些元素的顯示方式。我們使用CSS3 translate()和rotate()功能使頂部和底部的橫線旋轉(zhuǎn)45度，與中間的橫線逐漸消失。你可以點擊Demo中的按鈕來看看效果。

側(cè)滑菜單

側(cè)滑菜單的html的結(jié)構(gòu)如下：

div class="menu-wrap"

div class="menu-sidebar"

ul class="menu"

lia href="#"Home/a/li

lia href="#"About/a/li

lia href="#"Blog/a/li

li class="menu-item-has-children"a href="#"Click The Arrow/a

span class="sidebar-menu-arrow"/span

ul class="sub-menu"

lia href="#"Alignment/a/li

lia href="#"Markup/a/li

lia href="#"Comments/a/li

/ul

/li

lia href="#"Courses/a/li

lia href="#"Get In Touch/a/li

/ul

/div

/div

在這里不詳細(xì)解釋每個風(fēng)格的菜單，我們看下.menu-wrap 的div。它的樣式如下：

.menu-wrap {

background-color: #6968AB;

position: fixed;

top: 0;

height: 100%;

width: 280px;

margin-left: -280px;

font-size: 1em;

font-weight: 700;

overflow: auto;

transition: .25s;

z-index: 10;

}

它的位置是固定的，所以菜單一直在同一個地方滾動。高度設(shè)為100%。注意，左邊距設(shè)置為負(fù)數(shù)，使這菜單從視圖中消失。為了讓它有一個出現(xiàn)的特效，我們用jquery來了調(diào)用另一class來顯示和關(guān)閉。JavaScript代碼如下：

$(document).ready(function() {

var $toggleButton = $('.toggle-button'),

$menuWrap = $('.menu-wrap');

$toggleButton.on('click', function() {

$(this).toggleClass('button-open');

$menuWrap.toggleClass('menu-show');

});

});

我們增加一個變量$menuwrap其中包含菜單的所有項，并使用相同的事件來創(chuàng)建按鈕。這個.menu-show的左邊距為0，并增加了一些盒子陰影效果。

.menu-show {

margin-left: 0;

box-shadow: 4px 2px 15px 1px #B9ADAD;

}

子菜單和鏈接

你可能會注意到一個列表項的class .menu-item-has-children。包含子菜單。同時，鏈接后，有一個class .sidebar-menu-arrow。

li class="menu-item-has-children"a href="#"Click The Arrow/a

span class="sidebar-menu-arrow"/span

ul class="sub-menu"

!-- List items --

/ul

/li

span 有一個::after偽元素包實現(xiàn)fontawesome箭頭。默認(rèn)情況下，子菜單是隱藏的，只有單擊父級菜單時才出現(xiàn)：

$(document).ready(function() {

var $sidebarArrow = $('.sidebar-menu-arrow');

$sidebarArrow.click(function() {

$(this).next().slideToggle(300);

});

});

當(dāng)我們單擊箭頭，一個函數(shù)被調(diào)用時，它的目標(biāo)的下一個元素之后的span并使其可見。我們使用的jquery的slidetoggle。它使一個元素滑動效果的出現(xiàn)或消失，函數(shù)有一個動畫時間參數(shù)。

最后，我們的演示菜單項有一個懸停效果。它是使用一個::after偽元素。代碼如下：

.menu-sidebar li a::after {

content: "";

display: block;

height: 0.15em;

position: absolute;

top: 100%;

width: 102%;

left: 50%;

transform: translate(-50%);

background-image: linear-gradient(to right, transparent 50.3%, #FFFA3B 50.3%);

transition: background-position .2s .1s ease-out;

background-size: 200% auto;

}

.menu-sidebar li a:hover::after {

background-position: -100% 0;

}

這個::after偽元素包含在每個環(huán)節(jié)下絕對定位的塊級元素，隨著0.15em高度和寬度。我們不只是應(yīng)用背景顏色的線，我們使用linear-gradient() 在背景圖像功能。雖然這個功能的目的是使顏色梯度，我們可以通過指定的百分比，做了一個漸變的顏色變化。

.menu-sidebar li a::after {

background-image: linear-gradient(to right, transparent 50.3%, #FFFA3B 50.3%);

}

這里一半的線是透明的，另一半是黃色的。通過背景大小200%的寬度，使透明部分占用的所有鏈接的寬度。

基于jquery的手機(jī)觸控左右滑動拖動導(dǎo)航菜單

一個簡單的解決方案：頂端固定一個DIV作為導(dǎo)航容器，該DIV左端和右端分別用DIV模擬向左和向右的按鈕，中間區(qū)域呈現(xiàn)導(dǎo)航按鈕，計算當(dāng)前位置，用模擬的按鈕控制左右滾動。

另，你說的手機(jī)端用手指滑動，在 HTML 中是由瀏覽器根據(jù)手勢觸控事件來支持的，jQuery 超越不了瀏覽器對 JS 的支持，因為 jQuery 就是 JS 的程序包。如果使用 Mouse 事件來實現(xiàn)，也不是不可以，因為手勢觸控的本質(zhì)無非還是 Mouse 事件同源的衍生計算。費老鼻子勁使用 Mouse 事假實現(xiàn)一個有加速減速效果的導(dǎo)航滑動，不經(jīng)濟(jì)。供參考。

jquery導(dǎo)航菜單點擊背景變色問題

1、可以在url地址上加上一個參數(shù)，當(dāng)新頁面加載完成，你把參數(shù)值獲取下來，是哪個就給哪個菜單加上背景；2、也可以使用cookie來記錄，當(dāng)點擊菜單的時候，記錄下來，在新頁面加載完成的時候把這個cookie值獲取出來，就可以知道用戶之前點擊的哪個菜單，然后給這個菜單加上背景就可以了。不明白的話繼續(xù)追問~~

當(dāng)前題目：jquery導(dǎo)航菜單,jQuery導(dǎo)航欄
文章URL：http://chinadenli.net/article18/dsehgdp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站設(shè)計、ChatGPT、小程序開發(fā)、網(wǎng)站營銷、網(wǎng)站收錄、做網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)