jQuery實(shí)現(xiàn)帶展開(kāi)動(dòng)畫的導(dǎo)航欄效果
設(shè)計(jì)和自定義一個(gè)帶展開(kāi)動(dòng)畫效果的導(dǎo)航欄，嘗試寫了一個(gè)demo，加上設(shè)計(jì)和調(diào)試差不多寫了一天吧。
這里就來(lái)講講如何從設(shè)計(jì)->寫布局->寫樣式->寫JS代碼 完成一個(gè)完全自己設(shè)計(jì)的導(dǎo)航欄。
HTML寫布局，CSS寫樣式，JS寫動(dòng)畫效果和事件響應(yīng)等，考慮到JQuery對(duì)DOM操作的便利性，這里選擇用JQuery可以達(dá)到事半功倍的效果。
設(shè)計(jì)：
如果覺(jué)得自己下載的一些導(dǎo)航欄插件太千篇一律了，那么就設(shè)計(jì)一個(gè)自己喜歡的導(dǎo)航欄?？梢韵饶脧埣埉嫯嬜约合Ｍ粋€(gè)什么樣的導(dǎo)航最終想要達(dá)到什么樣的效果。
比如這里想要寫一個(gè)導(dǎo)航欄，鼠標(biāo)懸浮在每一章節(jié)上面，可以橫向伸展出下面的每一個(gè)節(jié)點(diǎn)，節(jié)點(diǎn)的出現(xiàn)有一個(gè)跳躍的動(dòng)作。
寫布局：
在理清楚思路以后，開(kāi)始寫HTML，這步相對(duì)比較簡(jiǎn)單。 一般用到<div> <span> <a> 這幾個(gè)標(biāo)簽就可以了。寫清楚層次關(guān)系是很重要的，這里
要說(shuō)明幾點(diǎn)：
<div> 是一個(gè)塊級(jí)元素。這意味著它的內(nèi)容自動(dòng)地開(kāi)始一個(gè)新行。
<span>標(biāo)簽不會(huì)獨(dú)自占一行，一般用來(lái)包裹內(nèi)容。因?yàn)椴皇菈K級(jí)元素設(shè)置width、height屬性無(wú)效
<a>標(biāo)簽當(dāng)然是用來(lái)放鏈接的啦
寫樣式：
樣式需要慢慢的調(diào)試，要用耐心。配色可以參考一些經(jīng)典的配色方案。因?yàn)槲覀兿胍獙?shí)現(xiàn)橫向伸展出下面的每一個(gè)節(jié)點(diǎn)，必定會(huì)需要類似于多欄布局那樣的效果，<span> 和<div>標(biāo)簽設(shè)置樣式 display:inline-block可以將對(duì)象呈遞為內(nèi)聯(lián)對(duì)象，但是對(duì)象的內(nèi)容作為塊對(duì)象呈遞。簡(jiǎn)單的說(shuō)就是既一個(gè)設(shè)置width、height又不會(huì)強(qiáng)制占據(jù)一行。也可以用 display:flex這個(gè)牛逼的CSS3布局屬性，實(shí)現(xiàn)多欄多列布局。
寫JS：
布局寫好之后就需要實(shí)現(xiàn)功能了。前面提到導(dǎo)航欄實(shí)現(xiàn)鼠標(biāo)懸浮在每一章節(jié)上面，可以橫向伸展出下面的每一個(gè)節(jié)點(diǎn)。自然會(huì)用到hover事件，來(lái)看看jQuery的hover事件。
$(selector).hover(inFunction,outFunction)
括號(hào)內(nèi)第一個(gè)function必需寫，規(guī)定 mouseover 事件發(fā)生時(shí)運(yùn)行的函數(shù)。
第二個(gè)function可選，規(guī)定 mouseout 事件發(fā)生時(shí)運(yùn)行的函數(shù)。
jQuery同樣可以方便的實(shí)現(xiàn)動(dòng)畫效果， animate() 方法通過(guò)CSS樣式將元素從一個(gè)狀態(tài)改變?yōu)榱硪粋€(gè)狀態(tài)。
CSS屬性值是逐漸改變的，這樣就可以創(chuàng)建動(dòng)畫效果，這里不再贅述。
因?yàn)橄胍?jié)點(diǎn)按順序依次出現(xiàn)，但又不想用animate的排隊(duì)，所以我寫了一個(gè) 回調(diào)函數(shù)，在回調(diào)函數(shù)中寫了setTimeout延時(shí)，用addClass給響應(yīng)的節(jié)點(diǎn)加上animation動(dòng)畫樣式。
代碼：
<!--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:'全局對(duì)象',url:'#'},
{name:'包裝對(duì)象',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');
//清理原來(lái)的內(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>
效果：
動(dòng)態(tài)效果：
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
此作品是一款jquery+html5實(shí)現(xiàn)的時(shí)鐘插件clock，效果非常棒，推薦給大家參考下，小伙伴們可以直接拿走使用。2015-04-04
jQuery實(shí)現(xiàn)搜索頁(yè)面關(guān)鍵字的功能
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)搜索頁(yè)面關(guān)鍵字的功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-02-02
這次我們要實(shí)現(xiàn)的控件時(shí)Tab控件，在實(shí)際的應(yīng)用中也比較多2010-05-05
jQuery統(tǒng)計(jì)指定子元素?cái)?shù)量的方法
這篇文章主要介紹了jQuery統(tǒng)計(jì)指定子元素?cái)?shù)量的方法,涉及jQuery可以通過(guò)>訪問(wèn)子標(biāo)簽的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03
上篇文章我們介紹了使用原生的javascript實(shí)現(xiàn)了圖片瀑布流效果，本文我們來(lái)用jQuery來(lái)實(shí)現(xiàn)同樣的效果。2014-12-12
jqPlot是一個(gè)灰常強(qiáng)大的圖表工具，曲線，柱狀，餅圖，應(yīng)該有盡有，更要命的是，調(diào)用方便~~2016-06-06
這篇文章主要介紹了jquery 鍵盤事件的使用方法詳解的相關(guān)資料,主要介紹keydown()、keyup()、keypress()等三種方法，需要的朋友可以參考下2017-09-09
原生js和jQuery寫的網(wǎng)頁(yè)選項(xiàng)卡特效對(duì)比
本文實(shí)例中主要是通過(guò)判斷點(diǎn)擊菜單在菜單列表中的索引位置來(lái)顯示或隱藏選項(xiàng)區(qū).原生js還有很多種實(shí)現(xiàn)方法(藍(lán)色理想中搜索),為了與jQ版思路保持一致,本文實(shí)例用的是循環(huán)判斷.有需要的小伙伴可以參考下2015-04-04
本文是對(duì)jquery的map與get方法進(jìn)行了詳細(xì)的總結(jié)介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2013-11-11
JQuery 表單中textarea字?jǐn)?shù)限制實(shí)現(xiàn)代碼
textarea中的字?jǐn)?shù)的限制是在1000個(gè)之內(nèi)，下面是具體的實(shí)現(xiàn)代碼，基本上會(huì)點(diǎn)jquery的能看懂，不懂的可以學(xué)習(xí)下jquery,當(dāng)期比較流行了，要不就落伍了。2009-12-12