一個(gè)簡(jiǎn)單的解決方案：頂端固定一個(gè)DIV作為導(dǎo)航容器，該DIV左端和右端分別用DIV模擬向左和向右的按鈕，中間區(qū)域呈現(xiàn)導(dǎo)航按鈕，計(jì)算當(dāng)前位置，用模擬的按鈕控制左右滾動(dòng)。
站在用戶的角度思考問題，與客戶深入溝通，找到科爾沁右翼前網(wǎng)站設(shè)計(jì)與科爾沁右翼前網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗(yàn)，讓設(shè)計(jì)與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個(gè)性化、用戶體驗(yàn)好的作品，建站類型包括：成都網(wǎng)站制作、成都網(wǎng)站建設(shè)、外貿(mào)營(yíng)銷網(wǎng)站建設(shè)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣、空間域名、網(wǎng)絡(luò)空間、企業(yè)郵箱。業(yè)務(wù)覆蓋科爾沁右翼前地區(qū)。
另，你說的手機(jī)端用手指滑動(dòng)，在 HTML 中是由瀏覽器根據(jù)手勢(shì)觸控事件來支持的，jQuery 超越不了瀏覽器對(duì) JS 的支持，因?yàn)?jQuery 就是 JS 的程序包。如果使用 Mouse 事件來實(shí)現(xiàn)，也不是不可以，因?yàn)槭謩?shì)觸控的本質(zhì)無非還是 Mouse 事件同源的衍生計(jì)算。費(fèi)老鼻子勁使用 Mouse 事假實(shí)現(xiàn)一個(gè)有加速減速效果的導(dǎo)航滑動(dòng)，不經(jīng)濟(jì)。供參考。
1、可以在url地址上加上一個(gè)參數(shù)，當(dāng)新頁(yè)面加載完成，你把參數(shù)值獲取下來，是哪個(gè)就給哪個(gè)菜單加上背景；2、也可以使用cookie來記錄，當(dāng)點(diǎn)擊菜單的時(shí)候，記錄下來，在新頁(yè)面加載完成的時(shí)候把這個(gè)cookie值獲取出來，就可以知道用戶之前點(diǎn)擊的哪個(gè)菜單，然后給這個(gè)菜單加上背景就可以了。不明白的話繼續(xù)追問~~
JQ其實(shí)還可以寫得更少(Write
Less)。
而且你那樣寫有一個(gè)毛病，那就是用光標(biāo)在的菜單上來回快速晃動(dòng)幾個(gè)，再移開光標(biāo)時(shí)，你會(huì)發(fā)現(xiàn)，下拉的菜單它還在那里一上一下晃著。
所以要得在效果前加上一個(gè)stop
$(function(){
$('.meun').hover(function(){$(this).find('ul').stop(true,true).slideDown();},
function(){$(this).find('ul').stop(true,true).slideUp('fast');
})
})
建議樓主改一下主體結(jié)構(gòu) 一級(jí)菜單 二級(jí)菜單 二級(jí)菜單 一級(jí)菜單 二級(jí)菜單 二級(jí)菜單 把一級(jí)菜單的li設(shè)置為相對(duì)定位，把二級(jí)菜單的ul設(shè)置為絕對(duì)定位并隱藏，然后在js中寫 $("#menuli").hover(function(){ $(this).find("ul").show(); },function()
!--?三級(jí)操蛋導(dǎo)航?--
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財(cái)務(wù)系統(tǒng)/h2
dl
dtb/b系統(tǒng)賬務(wù)/dt
dd
a?href=""平臺(tái)賬單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
效果圖：
可以參考：
為了建立導(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)樣式，以確保我們的菜單在每個(gè)瀏覽器是一樣的。我們使用字體圖標(biāo)fontawesome來顯示菜單項(xiàng)向下的圖標(biāo)。我們還需要引用jQuery來實(shí)現(xiàn)菜單的切換。
面板按鈕
每個(gè)網(wǎng)站面板導(dǎo)航按鈕都類似。它往往是一個(gè)圖標(biāo)字體，如fontawesome，但在本教程中我想添加一些動(dòng)畫，所以我們用橫線來實(shí)現(xiàn)。基本上，我們的按鈕是一個(gè)跨度，包含三個(gè)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;
}
按鈕有一個(gè)固定的位置，不動(dòng)時(shí)滾動(dòng)頁(yè)面。它也有一個(gè) z-index :15的樣式，以保證它總是保持在其他重疊元素之上。按鈕由三條橫線。每橫線都有自已的樣式，我們給它加上.menu-bar樣式。類其余的樣式被移動(dòng)到單獨(dú)的樣式文件中。動(dòng)畫發(fā)生時(shí)，我們添加一個(gè)類.button-open。我們引用jQuery，可以比較方便的實(shí)現(xiàn)它：
$(document).ready(function() {
var $toggleButton = $('.toggle-button');
$toggleButton.on('click', function() {
$(this).toggleClass('button-open');
});
});
初學(xué)者可能不熟悉jQuery，讓我解釋一下這是怎么回事。首先，我們初始化一個(gè)變量稱為$togglebutton，其中包含我們的按鈕。我們將它存儲(chǔ)為一個(gè)變量，然后我們創(chuàng)建一個(gè)事件監(jiān)視器監(jiān)聽點(diǎn)擊按鈕。每單擊一次，事件監(jiān)聽器會(huì)執(zhí)行方法 function toggleclass()來切換.button-open。
.button-open我們可以用它來改變這些元素的顯示方式。我們使用CSS3 translate()和rotate()功能使頂部和底部的橫線旋轉(zhuǎn)45度，與中間的橫線逐漸消失。你可以點(diǎn)擊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ì)解釋每個(gè)風(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;
}
它的位置是固定的，所以菜單一直在同一個(gè)地方滾動(dòng)。高度設(shè)為100%。注意，左邊距設(shè)置為負(fù)數(shù)，使這菜單從視圖中消失。為了讓它有一個(gè)出現(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');
});
});
我們?cè)黾右粋€(gè)變量$menuwrap其中包含菜單的所有項(xiàng)，并使用相同的事件來創(chuàng)建按鈕。這個(gè).menu-show的左邊距為0，并增加了一些盒子陰影效果。
.menu-show {
margin-left: 0;
box-shadow: 4px 2px 15px 1px #B9ADAD;
}
子菜單和鏈接
你可能會(huì)注意到一個(gè)列表項(xiàng)的class .menu-item-has-children。包含子菜單。同時(shí)，鏈接后，有一個(gè)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 有一個(gè)::after偽元素包實(shí)現(xiàn)fontawesome箭頭。默認(rèn)情況下，子菜單是隱藏的，只有單擊父級(jí)菜單時(shí)才出現(xiàn)：
$(document).ready(function() {
var $sidebarArrow = $('.sidebar-menu-arrow');
$sidebarArrow.click(function() {
$(this).next().slideToggle(300);
});
});
當(dāng)我們單擊箭頭，一個(gè)函數(shù)被調(diào)用時(shí)，它的目標(biāo)的下一個(gè)元素之后的span并使其可見。我們使用的jquery的slidetoggle。它使一個(gè)元素滑動(dòng)效果的出現(xiàn)或消失，函數(shù)有一個(gè)動(dòng)畫時(shí)間參數(shù)。
最后，我們的演示菜單項(xiàng)有一個(gè)懸停效果。它是使用一個(gè)::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;
}
這個(gè)::after偽元素包含在每個(gè)環(huán)節(jié)下絕對(duì)定位的塊級(jí)元素，隨著0.15em高度和寬度。我們不只是應(yīng)用背景顏色的線，我們使用linear-gradient() 在背景圖像功能。雖然這個(gè)功能的目的是使顏色梯度，我們可以通過指定的百分比，做了一個(gè)漸變的顏色變化。
.menu-sidebar li a::after {
background-image: linear-gradient(to right, transparent 50.3%, #FFFA3B 50.3%);
}
這里一半的線是透明的，另一半是黃色的。通過背景大小200%的寬度，使透明部分占用的所有鏈接的寬度。
重慶分公司
重慶分公司
