导航菜单3d效果 侧边导航酷炫展开效果 鼠标移入侧边栏 二级菜单3D展开 鼠标hover背景变色

// css初始化
html, body, div, ul, li,  p { 
    margin: 0; 
    padding: 0; 
}
ul { zoom: 1; list-style: none;}
a{text-decoration: none;}
a:hover { cursor: pointer; }
:after, :before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

body{ 
    font-size: 14px; 
    font-family: "黑体-简","黑体","微软雅黑", Arial, Gotham, "Helvetica Neue", Helvetica, sans-serif; 
    width: 100%; 
    margin: 0 auto; 
    background-color: #845ec2; 
    overflow-x: hidden; 
}

// 中间区域文本处理
.wrap{width:100%;height:100vh;}
.wrap p{font-size: 48px;text-align: center;color: #fff;padding-top: 280px;line-height: 60px;}


/*一级导航*/
.nav-main{
    position: fixed;
    top: 0;
    z-index: 12;
    height: 100%;
    width: 100px;
    background: #ffc75f;
}
.nav-main a{color: #333;}
.nav-box{
    position: relative;
    perspective: 200px;
    -webkit-perspective: 200px;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    height: 100%;
    z-index: 99;
}
.nav-ul li a{
    display: block;
    width: 100px;
    height: 80px;
    overflow: hidden;
    text-align: center;
    position: relative;
    transition: all .5s;
    -moz-transition: all .5s;
    -webkit-transition: all .5s;
    -o-transition: all .5s;
}
.nav-ul li a:before{
    content: '';
    position: absolute;
    left: -240px;
    top: 0px;
    width: 200px;
    height: 100%;
    background: #ff5e78;
    z-index: 1;
    transform: skew(30deg, 0);
    -webkit-transform: skew(30deg, 0);
    -ms-transform: skew(30deg, 0);
    -moz-transform: skew(30deg, 0);
    -o-transform: skew(30deg, 0);
    transition: all .5s;
    -moz-transition: all .5s;
    -webkit-transition: all .5s;
    -o-transition: all .5s;
}
.nav-ul li a:hover{background: #ff5e78;}
.nav-ul li a:hover:before{left: -30px;}
.nav-ul li a:after{
    content: '';
    position: absolute;
    width: 100%;
    height: 30px;
    left: 0;
    top: 20px;
    z-index: 1;
}
.nav-ul li a span{
    display: block;
    line-height: 80px;
    position: relative;
    z-index: 1;
}

/* 展开层 */
.nav-slide{
    position: fixed;
    left: 100px;
    top: 0;
    width: 240px;
    height: 100%;
    background: #f9f871;
    transform: rotateY(120deg);
    -webkit-transform: rotateY(120deg);
    -moz-transform: rotateY(120deg);
    -o-transform: rotateY(120deg);
    -ms-transform: rotateY(120deg);
    z-index: 99;
    visibility: hidden;
    transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transition: all .5s;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -o-transition: all .5s;
    transition-timing-function: cubic-bezier(.08, .72, .71, .96);
    -webkit-transition-timing-function: cubic-bezier(.08, .72, .71, .96);
}
.nav-slide.hover{
    transform: rotateY(0deg);
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    z-index: 15;
    visibility: visible;
}

/*二级菜单*/
.nav-slide-o li a{
    line-height: 50px;
    display: block;
    padding: 0 20px;
    font-size: 14px;
    overflow: hidden;
    text-align: left;
    position: relative;
    transition: all .5s;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -o-transition: all .5s;
}
.nav-slide-o li a:before{
    content: '';
    position: absolute;
    left: -230%;
    top: 0px;
    width: 200%;
    height: 100%;
    background: #ff5e78;
    z-index: 1;
    transform: skew(30deg, 0);
    -webkit-transform: skew(30deg, 0);
    -moz-transform: skew(30deg, 0);
    -o-transform: skew(30deg, 0);
    -ms-transform: skew(30deg, 0);
    transition: all .5s;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -o-transition: all .5s;
}
.nav-slide-o li a:hover{background: #ff5e78;}
.nav-slide-o li a:hover:before{left: -60px;}
.nav-slide-o li a span{position: relative;z-index: 1;}
.nav-slide-o {display: none;}

$(function () {
 var thisTime; // 接收定时器返回值

 // 菜单每项鼠标离开需要执行的事件
 $('.nav-ul li').mouseleave(function (even) {
     thisTime = setTimeout(thisMouseOut, 1000);
 })

 // 菜单鼠标移入执行的事件
 $('.nav-ul li').mouseenter(function () {
     clearTimeout(thisTime);//清除定时器
     var thisUB = $('.nav-ul li').index($(this)); // index() 方法返回指定元素相对于其他指定元素的 index 位置
     // trim() 函数用于去除字符串两端的空白字符
     // eq() 方法返回带有被选元素的指定索引号的元素
     if ($.trim($('.nav-slide-o').eq(thisUB).html()) !== "") {
         $('.nav-slide').addClass('hover');
         $('.nav-slide-o').hide();
         $('.nav-slide-o').eq(thisUB).show();
     }
     else {
         $('.nav-slide').removeClass('hover');
     }
 })

 // 鼠标离开移除class hover
 function thisMouseOut() {
     $('.nav-slide').removeClass('hover');
 }

 // 展开层鼠标移入
 $('.nav-slide').mouseenter(function () {
     clearTimeout(thisTime);
     $('.nav-slide').addClass('hover');
 })

 // 展开层鼠标离开
 $('.nav-slide').mouseleave(function () {
     $('.nav-slide').removeClass('hover');
 })
})