html+移动端左侧菜单,CSS3移动端侧边栏

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;

}