大部分的网站导航栏都是在网页的顶端，这类导航栏看起来非常一般，而有些在左侧竖着显示的导航栏就比较好看一些了，但是今天为大家介绍的是左侧竖条导航栏实现点击出现的效果，也就是刚开始只显示导航，不显示分类栏，而点击导航就可以显示分类栏了，下面一起来看下源代码的实现吧。
<!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 class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="js/jquery.min.js"></script>
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="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">
导航
</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>
共同学习，写下你的评论
评论加载中...
作者其他优质文章
