jQuery實現(xiàn)帶展開動畫的導(dǎo)航欄效果
設(shè)計和自定義一個帶展開動畫效果的導(dǎo)航欄，嘗試寫了一個demo，加上設(shè)計和調(diào)試差不多寫了一天吧。
這里就來講講如何從設(shè)計->寫布局->寫樣式->寫JS代碼 完成一個完全自己設(shè)計的導(dǎo)航欄。
HTML寫布局，CSS寫樣式，JS寫動畫效果和事件響應(yīng)等，考慮到JQuery對DOM操作的便利性，這里選擇用JQuery可以達(dá)到事半功倍的效果。
設(shè)計：
如果覺得自己下載的一些導(dǎo)航欄插件太千篇一律了，那么就設(shè)計一個自己喜歡的導(dǎo)航欄?？梢韵饶脧埣埉嫯嬜约合Ｍ粋€什么樣的導(dǎo)航最終想要達(dá)到什么樣的效果。
比如這里想要寫一個導(dǎo)航欄，鼠標(biāo)懸浮在每一章節(jié)上面，可以橫向伸展出下面的每一個節(jié)點，節(jié)點的出現(xiàn)有一個跳躍的動作。
寫布局：
在理清楚思路以后，開始寫HTML，這步相對比較簡單。 一般用到<div> <span> <a> 這幾個標(biāo)簽就可以了。寫清楚層次關(guān)系是很重要的，這里
要說明幾點：
<div> 是一個塊級元素。這意味著它的內(nèi)容自動地開始一個新行。
<span>標(biāo)簽不會獨自占一行，一般用來包裹內(nèi)容。因為不是塊級元素設(shè)置width、height屬性無效
<a>標(biāo)簽當(dāng)然是用來放鏈接的啦
寫樣式：
樣式需要慢慢的調(diào)試，要用耐心。配色可以參考一些經(jīng)典的配色方案。因為我們想要實現(xiàn)橫向伸展出下面的每一個節(jié)點，必定會需要類似于多欄布局那樣的效果，<span> 和<div>標(biāo)簽設(shè)置樣式 display:inline-block可以將對象呈遞為內(nèi)聯(lián)對象，但是對象的內(nèi)容作為塊對象呈遞。簡單的說就是既一個設(shè)置width、height又不會強制占據(jù)一行。也可以用 display:flex這個牛逼的CSS3布局屬性，實現(xiàn)多欄多列布局。
寫JS：
布局寫好之后就需要實現(xiàn)功能了。前面提到導(dǎo)航欄實現(xiàn)鼠標(biāo)懸浮在每一章節(jié)上面，可以橫向伸展出下面的每一個節(jié)點。自然會用到hover事件，來看看jQuery的hover事件。
$(selector).hover(inFunction,outFunction)
括號內(nèi)第一個function必需寫，規(guī)定 mouseover 事件發(fā)生時運行的函數(shù)。
第二個function可選，規(guī)定 mouseout 事件發(fā)生時運行的函數(shù)。
jQuery同樣可以方便的實現(xiàn)動畫效果， animate() 方法通過CSS樣式將元素從一個狀態(tài)改變?yōu)榱硪粋€狀態(tài)。
CSS屬性值是逐漸改變的，這樣就可以創(chuàng)建動畫效果，這里不再贅述。
因為想要節(jié)點按順序依次出現(xiàn)，但又不想用animate的排隊，所以我寫了一個 回調(diào)函數(shù)，在回調(diào)函數(shù)中寫了setTimeout延時，用addClass給響應(yīng)的節(jié)點加上animation動畫樣式。
代碼：
<!--Created by CC on 2017/10/14-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>~myNav~</title>
<script type="text/javascript" src="jquery.js"></script>
<!--樣式-->
<style type="text/css">
.triangle-right {
width: 0;
height: 0;
border-left: 20px solid #FF7800;
border-bottom: 20px solid transparent;
border-top:2px dotted #333333;
display: inline-block;
margin-top:10px;
vertical-align: top;
}
.mynav
{
font-family: punctuation,"PingFangSC-Regular","Microsoft Yahei","sans-serif";
-webkit-font-smoothing: subpixel-antialiased;
margin:10px 2%;
width:90%;
heigth:450px;
display:flex;
}
.nav-left{
flex:auto;
heigth:200px;
font-size:20px;
font-weight: 700;
text-align: center;
background-color:#505050 ;
color:#FF7800;
border-right:3px solid #FF7800;
width:80px;
padding-top:40px;
}
.nav-right{
flex:auto;
width:90%
}
.nav-right div{
position:relative;
}
.cap{
display:inline-block;
width:70px;
height:30px;
background-color: #FF7800;
margin:10px 0;
border-bottom:2px dotted #333333;
border-top:2px dotted #333333;
}
.child{
display:inline-block;
width:0px;
border-top:2px dotted #333333;
vertical-align: top;
margin-top: 10px;
}
span.cap-child
{
position:absolute;
border:2px solid #333333;
background-color: #505050;
color: #ffffff;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
/*top:5px;*/
left:0px;
}
span.cap-child a{
font-size:15px;
color:white;
}
span.cap-child a:hover{
color: #ffc8aa;
}
.hr-over{
position:absolute;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
background-color: #FF7800;
width:20px;
height:20px;
margin-top:-10px;
border:1px solid #333333;
}
.showit{
animation: cho-show .5s;
}
@keyframes cho-show {
0% {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate3d(0, 0, 1, 45deg);
transform: rotate3d(0, 0, 1, 45deg);
opacity:0;
}
100% {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: none;
transform: none;
opacity:1;
}
}
</style>
</head>
<body>
<!--布局-->
<div class="mynav">
<div class="nav-left">
目<br/>錄<br>
<span style="font-size:6px">
by cc
</span>
</div>
<div class="nav-right" >
<div >
<span class="cap ">Chapter1</span><div class="triangle-right"></div>
<div class="child">
</div>
</div>
<div >
<span class="cap">Chapter2</span><div class="triangle-right"></div>
<div class="child">
</div>
</div>
<div >
<span class="cap">Chapter3</span><div class="triangle-right"></div>
<div class="child">
</div>
</div>
</div>
</div>
<script type="text/javascript">
var active='';
var space=80;
var myNodes =[{ name:'Chapter1',
children: [{name:'字符集',url:'https://baike.baidu.com/item/%E5%AD%97%E7%AC%A6%E9%9B%86/946585?fr=aladdin'},
{name:'注釋',url:'cc/sd1/index'},
{name:'直接量',url:'cc/sd2/index'}
]},
{name:'Chapter2',
children:[{name:'數(shù)字',url:'#'},
{name:'文本',url:'#'},
{name:'布爾值',url:'#'},
{name:'全局對象',url:'#'},
{name:'包裝對象',url:'#'}
]},
{
name:'Chapter3',
children: [{name:'貓貓',url:'#'},
{name:'狗狗',url:'#'}
]}
];
$('.cap').hover(function(){
var cap=this;
var mybox=$(cap.parentNode).find('.child');
if(active!=this.innerHTML)
{
//變色
$(cap).css('background-color','#ffc8aa');
$(cap).next().css('border-left-color','#ffc8aa');
//清理原來的內(nèi)容
for(var j=0;j<$('.child').length;j++)
{
//console.log($('.child')[j]);
$($('.child')[j]).empty();
$($('.child')[j]).css('width','0px');
}
active=this.innerHTML;
myNodes.forEach(function(item){
if(active==item.name)
{
myAnimate(item.children,mybox);
}
}
);
}
//順序顯示
orderShow($(mybox),$(mybox).children().length-1);
}, function(){
//變色
$(this).css('background-color','#FF7800');
$(this).next().css('border-left-color','#FF7800');
});
function myAnimate(arr,ele)
{
// console.log(ele);
var $ele=$(ele);
var pos;
arr.forEach(function(item,index){
pos=space*index+20;
addOne(item,pos+'px');
});
$ele.animate({width:pos+100+'px'},200,'linear',function(){
var left=pos+80+'px';
$ele.append("<span class='hr-over' style='left:"+left+"'></span>");
});
function addOne(item,pos)
{
var mylink="<a href='"+item.url+"'>"+item.name+"</a>";
$ele.append("<span class='cap-child' style='display:none;left:"+pos+"'>"+mylink+"</span>")
}
}
function orderShow($it,times)
{
if(times>=0)
{
setTimeout(function(){
$($it.children()[times]).css('display','block')
$($it.children()[times]).addClass('showit');
orderShow($it,times-1)
},100);
}
else
return;
}
</script>
</body>
</html>
效果：
動態(tài)效果：
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
此作品是一款jquery+html5實現(xiàn)的時鐘插件clock，效果非常棒，推薦給大家參考下，小伙伴們可以直接拿走使用。2015-04-04
jQuery實現(xiàn)搜索頁面關(guān)鍵字的功能
這篇文章主要為大家詳細(xì)介紹了jQuery實現(xiàn)搜索頁面關(guān)鍵字的功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-02-02
這次我們要實現(xiàn)的控件時Tab控件，在實際的應(yīng)用中也比較多2010-05-05
這篇文章主要介紹了jQuery統(tǒng)計指定子元素數(shù)量的方法,涉及jQuery可以通過>訪問子標(biāo)簽的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-03-03
上篇文章我們介紹了使用原生的javascript實現(xiàn)了圖片瀑布流效果，本文我們來用jQuery來實現(xiàn)同樣的效果。2014-12-12
jqPlot是一個灰常強大的圖表工具，曲線，柱狀，餅圖，應(yīng)該有盡有，更要命的是，調(diào)用方便~~2016-06-06
這篇文章主要介紹了jquery 鍵盤事件的使用方法詳解的相關(guān)資料,主要介紹keydown()、keyup()、keypress()等三種方法，需要的朋友可以參考下2017-09-09
本文實例中主要是通過判斷點擊菜單在菜單列表中的索引位置來顯示或隱藏選項區(qū).原生js還有很多種實現(xiàn)方法(藍(lán)色理想中搜索),為了與jQ版思路保持一致,本文實例用的是循環(huán)判斷.有需要的小伙伴可以參考下2015-04-04
本文是對jquery的map與get方法進(jìn)行了詳細(xì)的總結(jié)介紹，需要的朋友可以過來參考下，希望對大家有所幫助2013-11-11
JQuery 表單中textarea字?jǐn)?shù)限制實現(xiàn)代碼
textarea中的字?jǐn)?shù)的限制是在1000個之內(nèi)，下面是具體的實現(xiàn)代碼，基本上會點jquery的能看懂，不懂的可以學(xué)習(xí)下jquery,當(dāng)期比較流行了，要不就落伍了。2009-12-12