CSS0023： CSS 侧边栏开启关闭特效

1，html代码

    <!-- 导航目录 -->
    <nav>
        <div class="nav-links">
            <a href="./index.html" class="link"><span></span>首&nbsp;&nbsp;页</a>
            <a href="javascript:void(0);" onclick="pageOpen('L1')" class="link"><span></span>品鉴之道</a>
            <a href="javascript:void(0);" onclick="pageOpen('L2')" class="link"><span></span>茅台王子酒</a>
            <a href="javascript:void(0);" onclick="pageOpen('L3')" class="link"><span></span>茅台迎宾酒</a>
            <a href="javascript:void(0);" onclick="pageOpen('L4')" class="link"><span></span>赖&nbsp;&nbsp;茅</a>
            <a href="javascript:void(0);" onclick="pageOpen('L5')" class="link"><span></span>仁&nbsp;&nbsp;酒</a>
            <a href="javascript:void(0);" onclick="pageOpen('L6')" class="link"><span></span>汉&nbsp;&nbsp;酱</a>
            <a href="javascript:void(0);" onclick="pageOpen('L7')" class="link"><span></span>贵州大曲</a>
            <a href="javascript:void(0);" onclick="pageOpen('L8')" class="link"><span></span>生肖系列</a>
            <a href="javascript:void(0);" onclick="pageOpen('L9')" class="link"><span></span>茅台介绍</a>
        </div>
    </nav>
    <div class="menuClose"></div>

 

2，CSS 代码：

nav {
    overflow: hidden;
    z-index: 10;
    position: relative;
    right: 0;
    transform: translateX(200px);
    height: 100%;
    position: fixed;
    top: 0;
    width: 330px;
    transition: all 800ms cubic-bezier(.8, 0, .33, 1);
    border-radius: 80% 0% 0% 80%;
    
}

nav.nav-open {
    transform: translateX(0px);
    border-radius: 0% 0% 0% 0%;
    background: url(maisui.png) no-repeat center bottom rgba(218,198,92, 0.2);
}




nav .nav-links {
    position: absolute;
    right: 0;
    top: 10%;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 垂直居中 */
    /* justify-content: center; */
    transform: translateX(-100px);
    opacity: 0;
    display: none;
    transition: all 900ms cubic-bezier(.9, 0, .33, 1);
}

nav .nav-links.fade-in {
    opacity: 1;
    transform: translateX(0px);
    display: flex;
}

nav .nav-links .link {
    padding: 18px 0;
    text-decoration: none;
    display: block;
    color: #fff;
    width: 100%;
    height: 66px;
    text-align: center;
    text-transform: uppercase;
    font-size: 20px;
    position: relative;
    transition: all 0ms cubic-bezier(.9, 0, .33, 1);
    background: url(line.png) no-repeat center 65px;
}

nav .nav-links .link:nth-child(1) span {
    background: url(home1.png) no-repeat;
    float: left;
    position: absolute;
    left: 70px;
    width: 32px;
    height: 30px;
    display: inline-block;
}

nav .nav-links .link:nth-child(2) span {
    background: url(js1.png) no-repeat;
    float: left;
    position: absolute;
    left: 70px;
    width: 32px;
    height: 30px;
    display: inline-block;
}

nav .nav-links .link:nth-child(3) span {
    background: url(wh1.png) no-repeat;
    float: left;
    position: absolute;
    left: 70px;
    width: 32px;
    height: 30px;
    display: inline-block;
}

nav .nav-links .link:nth-child(4) span {
    background: url(ry1.png) no-repeat;
    float: left;
    position: absolute;
    left: 70px;
    width: 32px;
    height: 30px;
    display: inline-block;
}

nav .nav-links .link:nth-child(5) span {
    background: url(gy1.png) no-repeat;
    float: left;
    position: absolute;
    left: 70px;
    width: 32px;
    height: 30px;
    display: inline-block;
}

nav .nav-links .link:nth-child(6) span {
    background: url(wz1.png) no-repeat;
    float: left;
    position: absolute;
    left: 70px;
    width: 32px;
    height: 30px;
    display: inline-block;
}

nav .nav-links .link:nth-child(7) span {
    background: url(yb1.png) no-repeat;
    float: left;
    position: absolute;
    left: 70px;
    width: 32px;
    height: 30px;
    display: inline-block;
}

nav .nav-links .link:nth-child(8) span {
    background: url(lm1.png) no-repeat;
    float: left;
    position: absolute;
    left: 70px;
    width: 32px;
    height: 30px;
    display: inline-block;
}

nav .nav-links .link:nth-child(9) span {
    background: url(rj1.png) no-repeat;
    float: left;
    position: absolute;
    left: 70px;
    width: 32px;
    height: 30px;
    display: inline-block;
}

nav .nav-links .link:nth-child(10) span {
    background: url(hj1.png) no-repeat;
    float: left;
    position: absolute;
    left: 70px;
    width: 32px;
    height: 30px;
    display: inline-block;
}

nav .nav-links .link:nth-child(11) span {
    background: url(dq1.png) no-repeat;
    float: left;
    position: absolute;
    left: 70px;
    width: 32px;
    height: 30px;
    display: inline-block;
}

nav .nav-links .link:nth-child(12) span {
    background: url(sx1.png) no-repeat;
    float: left;
    position: absolute;
    left: 70px;
    width: 32px;
    height: 30px;
    display: inline-block;
}

nav .nav-links .link:nth-child(1):hover span {
    background: url(home2.png) no-repeat;
}

nav .nav-links .link:nth-child(2):hover span {
    background: url(js2.png) no-repeat;
}

nav .nav-links .link:nth-child(3):hover span {
    background: url(wh2.png) no-repeat;
}

nav .nav-links .link:nth-child(4):hover span {
    background: url(ry2.png) no-repeat;
}

nav .nav-links .link:nth-child(5):hover span {
    background: url(gy2.png) no-repeat;
}

nav .nav-links .link:nth-child(6):hover span {
    background: url(wz2.png) no-repeat;
}

nav .nav-links .link:nth-child(7):hover span {
    background: url(yb2.png) no-repeat;
}

nav .nav-links .link:nth-child(8):hover span {
    background: url(lm2.png) no-repeat;
}

nav .nav-links .link:nth-child(9):hover span {
    background: url(rj2.png) no-repeat;
}

nav .nav-links .link:nth-child(10):hover span {
    background: url(hj2.png) no-repeat;
}

nav .nav-links .link:nth-child(11):hover span {
    background: url(dq2.png) no-repeat;
}

nav .nav-links .link:nth-child(12):hover span {
    background: url(sx2.png) no-repeat;
}

nav .nav-links a:hover {
    color: #fff;
    background: url(nbg.jpg);
}





.menuClose{
    width:10vh;
    height:10vh;
    top:50%;
    right:0%;
    transform: translate(0, -50%);
    z-index: 9999;
    position: absolute;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center right;
    background-image: url('btn_styleR.png');
}

 

JS代码：

var menuBtn = document.querySelector('.menuClose');
var nav = document.querySelector('nav');
var link = document.querySelector('nav .nav-links');
menuBtn.addEventListener('click', () => {
    nav.classList.toggle('nav-open');
    link.classList.toggle('fade-in');
});

 

 

 

 

 

 

效果图：