首頁
方案
資訊
知庫
185-3825-9583
185-3825-9583
導(dǎo)航欄
2018-05-08
3062
大部分的網(wǎng)站導(dǎo)航欄都是在網(wǎng)頁的頂端，這類導(dǎo)航欄看起來非常一般，而有些在左側(cè)豎著顯示的導(dǎo)航欄就比較好看一些了，但是今天為大家介紹的是左側(cè)豎條導(dǎo)航欄實(shí)現(xiàn)點(diǎn)擊出現(xiàn)的效果，也就是剛開始只顯示導(dǎo)航，不顯示分類欄，而點(diǎn)擊導(dǎo)航就可以顯示分類欄了，下面app開發(fā)報(bào)價(jià)燚軒科技就來跟大家分享一下源代碼的實(shí)現(xiàn)吧。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="js/jquery.min.js"></script>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<style>
html,
body {
padding: 0;
margin: 0;
}
main {
width: 100%;
}
.main {
width: 100%;
min-height: 100vh;
background-color: #ccc;
}
.x_left {
position: fixed;
left: 0;
top: 100px;
width: 100px;
/* border: 1px solid red; */
}
.x_left_title {
padding: 10px 0;
margin: 2px 0;
width: 50px;
background-color: white;
box-shadow: 0 0 5px 1px rgb(99, 99, 99);
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.x_left_main {
display: flex;
flex-flow: column;
/* border: 1px solid red; */
position: relative;
width: 0;
}
.x_left_main span {
padding: 10px 0;
margin: 3px 0;
width: 100px;
background-color: white;
box-shadow: 0 0 5px 1px rgb(122, 147, 160);
display: flex;
justify-content: center;
align-items: center;
position: relative;
left: -100px;
}
</style>
</head>
<body>
<main>
<div class="main">
<div class="x_left">
<div class="x_left_title">
導(dǎo)航
</div>
<div class="x_left_main">
<span>aaa11111111</span>
<span>aaa22222222</span>
<span>aaa33333333</span>
<span>aaa44444444</span>
<span>aaa55555555</span>
<span>aaa66666666</span>
<span>aaa77777777</span>
<span>aaa88888888</span>
<span>aaa99999999</span>
</div>
</div>
</div>
</main>
<script>
var show = "";
var hidden = ""
var hidden_top = "";
var hidden_top_num = "";
var hidden_bottom_num = "";
var length = $(".x_left_main span").length;
var num = 0;
var whether = 99;
var qsb = 99
$(".x_left_title").click(function(){
if(whether==99&&qsb==99){
qsb = 1
$(this).stop().animate({width:"100px"},1000)
var num = 0;
$(".x_left_main span").eq(num).stop().animate({
left:"0"
},150)
show = setInterval(function(){
if(num!=length){
num++
$(".x_left_main span").eq(num).stop().animate({
left:"0"
},150)
}else{
clearInterval(show)
whether = 1
qsb = 99
}
},150)
}else{
if(qsb==99&&whether==1){
qsb = 1
$(this).stop().animate({width:"50px"},1000)
var num = 0;
$(".x_left_main span").eq(num).stop().animate({
left:"-100px"
},150)
show = setInterval(function(){
if(num!=length){
num++
$(".x_left_main span").eq(num).stop().animate({
left:"-100px"
},150)
}else{
clearInterval(show)
whether = 99
qsb = 99
}
},150)
}
}
})
$(".x_left_main span").each(function(i){
$(this).click(function(){
$(".x_left_title").stop().animate({width:"50px"},1000)
hidden_top_num = i
hidden_bottom_num = i
$(this).stop().animate({
left:"-100px"
})
hidden_top = setInterval(function(){
if(hidden_top_num!=0){
hidden_top_num--
$(".x_left_main span").eq(hidden_top_num).stop().animate({
left:"-100px"
})
}else{
clearInterval(hidden_top)
whether = 99
qsb = 99
}
},150)
hidden_bottom = setInterval(function(){
if(hidden_bottom_num!=length){
hidden_bottom_num++
$(".x_left_main span").eq(hidden_bottom_num).stop().animate({
left:"-100px"
})
}else{
clearInterval(hidden_bottom)
whether = 99
qsb = 99
}
},150)
})
})
</script>
</body>
</html>
看到這里詳細(xì)大家已經(jīng)可以預(yù)測出實(shí)際效果了吧，這種效果是不是要比傳統(tǒng)的導(dǎo)航欄更加具有吸引力呢?那么大家也趕緊動手嘗試一下吧，如果還存在不理解的地方，可以留言咨詢哦。
s="MsoNormal"> ...
燚軒科技 ·
09月18日
· 域名備案
s="MsoNormal"> ...
燚軒科技 ·
09月18日
· 域名申請
亮度蒙版是影調(diào)調(diào)整的基石。它提供了一個(gè)簡便的方法來選取圖...
燚軒科技 ·
11月15日
· 質(zhì)感效果/PS通道
s="p"> <span...
燚軒科技 ·
11月16日
· Alt標(biāo)簽/網(wǎng)站優(yōu)化
目前大家經(jīng)常會遇到摳圖的問題，最多的就是摳人體、頭發(fā)，摳...
燚軒科技 ·
10月31日
· 摳圖/ps技巧
請掃二維碼聯(lián)系客服
854221200@qq.com
185-3825-9583
QQ客服
