当前位置:主页 > 网页特效 > 菜单导航 >

谷歌Material design风格隐藏侧边栏特效

发布时间:2018/08/03 来源:互联网 浏览: 关键词:菜单导航 侧边栏 material 
谷歌Material design风格隐藏侧边栏特效 谷歌Material design风格隐藏侧边栏特效
阿里云

简要教程

这是一款非常实用的谷歌Material design风格隐藏侧边栏特效。用户可以通过点击左上角的汉堡包图标来打开和隐藏侧边栏菜单。在侧边栏菜单打开时,整个页面就像是被向右下推动一些距离,效果非常不错。

制作方法

HTML结构

在这个隐藏侧边栏特效的HTML结构中,菜单使用<nav>元素来制作,汉堡包图标是一个<div>,正文内容包裹在一个div.wrapper元素中。

<!--导航菜单-->
<nav>
  <ul>
    <li>Home</li>
    <li>About me</li>
    <li>Blog</li>
    <li>Contact</li>
  </ul>
</nav>
<!--汉堡包图标-->
<divclass="openNav">
  <divclass="icon"></div>
</div>
<!--正文内容-->
<divclass="wrapper">
  ...
</div>

CSS样式

页面正文的包裹<div>设置100%的高度和宽度,定位方式为相对定位。同时设置动画过渡的延迟时间为0.5s,以及动画过渡的timing函数为swing。

.wrapper {
  transition-duration:0.5s;
  transition-timing-function: swing;
  background-color:white;
  width:100%;
  height:100%;
  position:relative;
  padding:100px40px;
}

在隐藏侧边栏处于打开状态时,正文div被向右移动250像素,向下移动50像素。

.wrapper.open {
  transform:translateX(250px)translateY(50px);
  -webkit-transform:translateX(250px)translateY(50px);
  box-shadow:0050pxrgba(0,0,0,0.2);
}   

汉堡包图标使用icon以及它的:before和:after伪元素来制作。

.openNav .icon{
  transition-duration:0.2s;
  position:absolute;
  width:30px;
  height:2px;
  background-color:white;
  top:24px;
  left:10px;
}
.openNav .icon:before,
.openNav .icon:after {
  transition-duration:0.5s;
  background-color:white;
  position:absolute;
  content:"";
  width:30px;
  height:2px;
  left:0px;
}
.openNav .icon:before {
  top:-7px;
}
.openNav .icon:after {
  top:7px;
}    
然后在汉堡包图标被点击时使用rotate()来分别对它们进行相应的旋转,制作图标变形动画。

.openNav.open {
  transform:translateX(250px)translateY(50px);
  -webkit-transform:translateX(250px)translateY(50px);
}
.openNav.open .icon{
  background-color:transparent;
}
.openNav.open .icon:before,
.openNav.open .icon:after {
  top:0;
}
.openNav.open .icon:before {
  transform:rotate(-45deg);
  -webkit-transform:rotate(-45deg);
}
.openNav.open .icon:after {
  transform:rotate(45deg);
  -webkit-transform:rotate(45deg);
}     

JAVASCRIPT

该隐藏侧边栏特效使用jQuery来在汉堡包图标被点击的时候为相应的元素添加和移除相应的class。

$('.openNav').click(function () {
    $('body').toggleClass('navOpen');
    $('nav').toggleClass('open');
    $('.wrapper').toggleClass('open');
    $(this).toggleClass('open');
});    

共有人阅读,期待你的评论!评论
骚年说点什么吧
  • 全部评论(0
    还没有评论,快来抢沙发吧!
Top