logo星之书笔记

WienDesign | 左手代码,右手诗词

avatar

网名:Oliver Wien | 奥利弗·韦恩

职业:Web前端设计师、网页设计

现居地:陕西省-西安市-雁塔区

Phone:+86 182 2052 3738

Email:oliverwien@126.com

原生JS+CSS动画侧边导航显示/隐藏

设计思路:

点击按钮,CSS动画,显示侧边导航栏,再次点击,隐藏。

1、编写HTML结构与CSS动画

2、JS获取点击按钮元素和侧边栏元素。

3、给按钮元素添加onclick事件。

4、获取侧边导航栏的right的值,使用parsoInt()转换为整数。

5、if判断当前侧边栏状态,添加显示或者隐藏类名。

效果图:

navdh.png

HTML代码:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,user-scalable=no">
    <title>My web</title>
</head>
<body>
    <div class="warp">
        <a id="navber_btn"> Go </a>
        <ul id="navber_nav" style="right:-200px;" ></ul>
    </div>
</body>
</html>

CSS代码:

*{padding:0;margin:0;}
#navber_btn{display:block;width:40px;height:40px;line-height:40px;text-align:center;float:right;border:1px solid #dfdfdf;}
#navber_nav{position:fixed;width:200px;background:#4d5158;top:48px;height:100%;}
/*显示*/
.nav-show{
    -webkit-animation:nav-show 1s linear 0s alternate forwards;
    -moz-animation:nav-show 1s linear 0s alternate forwards;
    -ms-animation:nav-show 1s linear 0s alternate forwards;
    -o-animation:nav-show 1s linear 0s alternate forwards;
    animation:nav-show 1s linear 0s alternate forwards;
}
@keyframes nav-show{ 0%   {right:-300px;} 100%  {right:0px; } }
@-moz-keyframes nav-show{ 0%   {right:-300px;} 100%  {right:0px; } }
@-webkit-keyframes nav-show{ 0%   {right:-300px;} 100%  {right:0px; } }
@-o-keyframes nav-show{ 0%   {right:-300px;} 100%  {right:0px; } }
/*隐藏*/
.nav-hide{
    -webkit-animation:nav-hide 1s linear 0s alternate forwards;
    -moz-animation:nav-hide 1s linear 0s alternate forwards;
    -ms-animation:nav-hide 1s linear 0s alternate forwards;
    -o-animation:nav-hide 1s linear 0s alternate forwards;
    animation:nav-hide 1s linear 0s alternate forwards;
}
@keyframes nav-hide{ 0%   {right:0px; } 100%  {right:-300px;} }
@-moz-keyframes nav-hide{ 0%   {right:0px; } 100%  {right:-300px;} }
@-webkit-keyframes nav-hide{ 0%   {right:0px; } 100%  {right:-300px;} }
@-o-keyframes nav-hide{ 0%   {right:0px; } 100%  {right:-300px;} }

JS代码:

var navber_nav = document.getElementById('navber_nav');
var navber_btn = document.getElementById('navber_btn');
navber_btn.onclick=function(){
    var dirPos = parseInt(navber_nav.style.right, 10);
    if (dirPos == -200) {
        navber_nav.style.right="0";
        navber_nav.classList.add('nav-show');
        navber_nav.classList.remove('nav-hide');
    } else {
        navber_nav.style.right="-200px";
        navber_nav.classList.remove('nav-show');
        navber_nav.classList.add('nav-hide')
    }
}

注:通过navber_nav.style.right取值的元素,必须要设置position定位属性。并且这种方式只能获取到行内样式的属性值。

Comments 0