抽屉式少女风侧导航栏 可用于博客站
程序员文章站
2022-03-10 08:37:30
效果图 index.html index
效果图
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>index</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="wrapper" style="left:0;">
<div class="sidebar">
<div class="headsculpture">
<img src="images/headsculpture.jpg" alt="">
<p>昵称：cyy呀</p>
</div>
<div class="option">
<ul>
<li><img src="images/home.png" alt="">
<p>首页</p>
</li>
<li><img src="images/works.png" alt="">
<p>我的作品</p>
</li>
<li><img src="images/release.png" alt="">
<p>发布作品</p>
</li>
<li><img src="images/collection.png" alt="">
<p>我的收藏</p>
</li>
<li><img src="images/setup.png" alt="">
<p>设置</p>
</li>
</ul>
</div>
</div>
<button></button>
</div>
<script src='https://libs.baidu.com/jquery/1.7.1/jquery.min.js'></script>
<script src="js/script.js"></script>
</body>
</html>
style.css
* {
margin:0;
padding:0
}
body {
overflow:hidden
}
ul {
list-style:none
}
#wrapper {
width:100%;
height:100%;
position:fixed;
top:0;
bottom:0;
background-repeat:no-repeat;
background-size:cover;
transition:all .5s;
background-image:linear-gradient(90deg,#ffc0cb,#fb83b7)
}
#wrapper .sidebar {
width:220px;
height:100%;
position:absolute;
top:0;
left:-220px;
bottom:0;
background-color:#c8c8ee;
overflow:hidden
}
#wrapper button {
width:40px;
height:40px;
background-color:transparent;
background-image:url(../images/button.png);
background-repeat:no-repeat;
background-size:100%;
border:0;
outline:none;
position:absolute;
top:20px;
left:10px;
transition:all .5s;
cursor:pointer
}
.headsculpture {
width:100%;
margin-top:35px;
text-align:center
}
.headsculpture img {
width:100px;
height:100px;
border-radius:50px;
margin:0 auto;
transform:translate(0,-135px);
transition:all 1s
}
.headsculpture .img {
transform:translate(0,0)
}
.headsculpture p {
margin:0 auto;
margin-top:15px;
font-size:15px;
width:160px;
height:30px;
line-height:30px;
background-color:pink;
border-radius:15px;
color:#fff;
transform:translate(200px,0);
transition:all 1s
}
.headsculpture .opacity {
transform:translate(0,0)
}
.option,.option ul li {
width:100%
}
.option ul {
padding:15px 0
}
.option ul li {
display:flex;
align-items:center;
width:195px;
margin-top:15px;
padding-left:25px;
cursor:pointer;
color:#39393a;
transform:translatez(0);
position:relative;
transition-property:color;
transition-duration:.4s;
transition:all 1s
}
.option ul li:nth-child(1),.option ul li:nth-child(3),.option ul li:nth-child(5) {
transform:translate(-200px,0)
}
.option ul li:nth-child(2),.option ul li:nth-child(4) {
transform:translate(200px,0)
}
.sidebar .option ul li.li {
transform:translate(0,0)
}
.option ul li:before {
content:"";
position:absolute;
z-index:-1;
top:0;
left:0;
right:0;
bottom:0;
background:pink;
transform-origin:0 50%;
transform:scalex(0);
transition:transform .3s ease-out
}
.option ul li:hover,.option ul li:focus,.option ul li:active {
color:#fff
}
.option ul li:hover:before,.option ul li:focus:before,.option ul li:active:before {
transform:scalex(1)
}
.option ul li img {
width:25px;
height:25px
}
.option ul li p {
width:145px;
height:30px;
line-height:30px;
font-size:15px;
padding-left:15px;
margin-left:10px;
letter-spacing:1px
}
.banner {
width:100%;
text-align:center
}
.banner h2 {
margin-top:200px;
font-family:impact;
font-weight:700;
font-size:4rem;
color:#fff;
letter-spacing:4px
}
script.js
$(function() {
$('button').click(function() {
var left = $('#wrapper')[0].offsetleft;
if (left == 0) {
$('#wrapper').offset({
'left': 220
});
$(this).css('transform', 'rotate(450deg)');
$('.headsculpture img').addclass('img');
$('.headsculpture p').addclass('opacity');
settimeout(function() {
$('.option ul>li').addclass('li');
},
600)
} else {
$('#wrapper').offset({
'left': 0
});
$(this).css('transform', 'rotate(0deg)');
settimeout(function() {
$('.headsculpture img').removeclass('img');
$('.headsculpture p').removeclass('opacity');
$('.option ul>li').removeclass('li');
},
300)
}
});
var src = [{
src: 'images/home_1.png'
},
{
src: 'images/works_1.png'
},
{
src: 'images/release_1.png'
},
{
src: 'images/collection_1.png'
},
{
src: 'images/setup_1.png'
},
{
src: 'images/home.png'
},
{
src: 'images/works.png'
},
{
src: 'images/release.png'
},
{
src: 'images/collection.png'
},
{
src: 'images/setup.png'
},
];
$('.option ul>li').mouseenter(function() {
var index = $(this).index();
$(this).children('img').attr('src', src[index].src);
});
$('.option ul>li').mouseleave(function() {
var index = $(this).index();
$(this).children('img').attr('src', src[index + 5].src);
})
})
图片素材如下
上一篇： 互联网公司常用水平导航（二级导航）