今天工作中要做一个移动端侧边栏，于是在项目中加入了一些最近学到的CSS3效果。
菜单依次显示的时间上可以缩短，之前这个代码有些BUG，后来改了时间就好了。
【HTML】
<div class="slide_mask"></div>
<ul class="nav_grid">
<li class="menu"></li>
<li class="nav_grid_first">
<ul class="sidenav">
<li class="sou">
<form action="" name="searchForm" method="post" target="_blank">
<input type="hidden" name="dateFlag" value="false" />
<input type="hidden" name="siteName" value="english" />
<input type="hidden" name="pageNum" value="1">
<input type="text" name="keyword" id="keyword" class="s1" value="" />
<input type="image" name="button" id="button" class="s2" value="search" src="删除
/uploads/user_upload/68618/ico7.png" />
</form>
</li>
<li class="nav_items"><a href="" target="_blank"><span>Home</span></a>
</li>
<li class="nav_items"><a href="" target="_blank"><span>China Politics</span></a>
</li>
<li class="nav_items"><a href="" target="_blank"><span>Foreign Affairs</span></a>
</li>
<li class="nav_items"><a href="" target="_blank"><span>Opinions</span></a>
</li>
<li class="nav_items"><a href="" target="_blank"><span>Business</span></a>
</li>
<li class="nav_items"><a href="" target="_blank"><span>Military</span></a>
</li>
<li class="nav_items"><a href="" target="_blank"><span>World</span></a>
</li>
<li class="nav_items"><a href="" target="_blank"><span>Society</span></a>
</li>
<li class="nav_items"><a href="" target="_blank"><span>Culture</span></a>
</li>
<li class="nav_items"><a href="" target="_blank"><span>Video</span></a>
</li>
<li class="nav_items"><a href="" target="_blank"><span>Travel</span></a>
</li>
<li class="nav_items"><a href="" target="_blank"><span>Science</span></a>
</li>
<li class="nav_items"><a href="" target="_blank"><span>Sports</span></a>
</li>
<li class="nav_items"><a href="" target="_blank"><span>Photo</span></a>
</li>
</ul>
</li>
</ul>
【CSS】
ol,ul,li {
list-style: none;
}
.nav_grid li.menu {
display: block;
background: url(/uploads/user_upload/68618/menu.png) no-repeat;
width: 28px;
height: 26px;
float: left;
margin-top: 6.5%;
margin-left: 5%;
background-size: 65% auto;
}
.slide_mask {
position: absolute;
z-index: 2;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: transparent;
display: none;
overflow: hidden;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.sidenav {
display: block;
position: absolute;
top: 0;
left: 0;
bottom: 0;
background: #f5f5f7;
width: 5.9rem;
padding-top: 1.6em;
transform: translateX(-5.9rem);
z-index: 99;
height: 100%;
}
.sidenav li.sou {
margin: 0 auto;
width: 5.493rem;
position: relative;
margin-bottom: 10px;
}
.sidenav li.sou input.s1 {
width: 4.493rem;
height: 0.773rem;
text-indent: 1.2em;
border: 1px solid #c1c1c2;
border-radius: 0.373rem;
padding-right: 1rem;
}
.sidenav li.sou input.s2 {
width: 10%;
height: auto;
top: 0.3em;
right: 0.2em;
position: absolute;
}
.sidenav li.nav_items {
height: 1rem;
line-height: 1rem;
font-size: 1.6em;
text-indent: 1.2em;
border-bottom: 1px solid #c9c9ca;
text-align: left;
}
.sidenav li:last-child {
border-bottom: none;
}
.sidenav li a {
text-decoration: none;
}
.sidenav.moved {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.sidenav.moved li.nav_items span {
transform: perspective(100px) rotateX(0) translateZ(24px) scale(1);
transition: all .4s;
opacity: 1;
}
.sidenav li.nav_items span {
transform: perspective(100px) rotateX(90deg) translateZ(24px) scale(1.5);
opacity: 0;
}
.sidenav li.nav_items:nth-child(1) span {
transition-delay: .08s;
}
.sidenav li.nav_items:nth-child(2) span {
transition-delay: .16s;
}
.sidenav li.nav_items:nth-child(3) span {
transition-delay: .24s;
}
.sidenav li.nav_items:nth-child(4) span {
transition-delay: .32s;
}
.sidenav li.nav_items:nth-child(5) span {
transition-delay: .40s;
}
.sidenav li.nav_items:nth-child(6) span {
transition-delay: .48s;
}
.sidenav li.nav_items:nth-child(7) span {
transition-delay: .56s;
}
.sidenav li.nav_items:nth-child(8) span {
transition-delay: .64s;
}
.sidenav li.nav_items:nth-child(9) span {
transition-delay: .72s;
}
.sidenav li.nav_items:nth-child(10) span {
transition-delay: .80s;
}
.sidenav li.nav_items:nth-child(11) span {
transition-delay: .88s;
}
.sidenav li.nav_items:nth-child(12) span {
transition-delay: .96s;
}
.sidenav li.nav_items:nth-child(13) span {
transition-delay: 1.04s;
}
.sidenav li.nav_items:nth-child(14) span {
transition-delay: 1.12s;
}
.sidenav li.nav_items:nth-child(15) span {
transition-delay: 1.20s;
}
【JS】
$(document).ready(function() {
$('.nav_grid li.menu').on('click', function() {
$('.slide_mask').show();
$('.sidenav').addClass('moved');
});
$('.slide_mask').on('click', function() {
$('.slide_mask').hide();
$('.sidenav').removeClass('moved');
});
});
网友评论