这是一款非常实用的谷歌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> <!--汉堡包图标--> <div class="openNav"> <div class="icon"></div> </div> <!--正文内容--> <div class="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: 100px 40px; }
在隐藏侧边栏处于打开状态时,正文div
被向右移动250像素,向下移动50像素。
.wrapper.open { transform: translateX(250px) translateY(50px); -webkit-transform: translateX(250px) translateY(50px); box-shadow: 0 0 50px rgba(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'); });
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!