这是一款效果非常炫酷的jQuery和CSS3汉堡包导航菜单打开动画特效。该汉堡包动画中,用户点击汉堡包图标时,图标以弹性变形的方式水平展开。整个动画的特点是弹性十足!
使用方法
HTML结构
该汉堡包菜单展开动画的HTML结构非常简单:使用一个div.menu
作为包裹容器,在它里面div.container
是汉堡包图标的容器,div.toggle
是汉堡包图标,最后的一组<span>
元素是隐藏的菜单项。
<div class="menu"> <div class="container"> <div class="toggle"></div> </div> <span class="hidden item"><a href="#">首页 </a></span> <span class="hidden item"><a href="#">最新文章 </a></span> <span class="hidden item"><a href="#">关于我们 </a></span> <span class="hidden item"><a href="#">联系我们 </a></span> </div>
CSS样式
.menu
容器被设置了固定的宽度和高度,以及圆角和阴影效果。在菜单展开动画过程中,它的宽度会被修改,这里使用了自定义的贝兹曲线函数来设置它的动画过渡效果。这个贝兹曲线函数是一种带有弹性效果的过渡动画。
.menu { display: block; box-sizing: border-box; background: white; height: 87.75px; width: 87.75px; padding: 36px; border-radius: 6px; overflow: hidden; position: relative; margin: 30px auto; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.15); transition: 1.3s cubic-bezier(0.53, 0, 0.15, 1.3); } .menu.expanded { width: 420px; }
菜单项开始时是不可见的,并通过nth-of-type
为每一个菜单项设置不同的动画延迟时间。
span.hidden { width: 0; visibility: hidden; opacity: 0; transform: rotateY(90deg); } span.hidden:nth-of-type(1) { transition-delay: .3s; } span.hidden:nth-of-type(2) { transition-delay: .2s; } span.hidden:nth-of-type(3) { transition-delay: .1s; } span.hidden:nth-of-type(4) { transition-delay: 0s; }
当菜单展开时,各个菜单项上的.hidden
class被移除,此时菜单项变为可见状态,同样通过nth-of-type
来为各个菜单项设置动画延迟时间。
span.item { padding: 9px; white-space: nowrap; visibility: visible; opacity: 1; transition: .3s; transform: rotateY(0deg); } span.item:nth-of-type(1) { transition-delay: .4s; } span.item:nth-of-type(2) { transition-delay: .5s; } span.item:nth-of-type(3) { transition-delay: .6s; } span.item:nth-of-type(4) { transition-delay: .7s; }
.toggle
用于制作汉堡包图标的水平线条。
.container { position: absolute; top: 22.5px; right: calc(100% - 73.125px); height: 42.75px; width: 58.5px; transition: 1s; } .container.close { right: 0; } .toggle { position: relative; height: 42.75px; width: 58.5px; cursor: pointer; } .toggle:after, .toggle:before { content: ''; background: #1D90F5; width: 36px; height: 4.5px; margin: auto; position: absolute; top: 0; bottom: 0; right: 0; left: 0; transition: 1.3s cubic-bezier(0.53, 0, 0.15, 1.3); } .toggle:before { top: -30%; } .toggle:after { top: 30%; }
当汉堡包图标被点击之后,它会被添加一个.close
class,该class使汉堡包图标的两条线条分别旋转+225度和-225度,组成一个小叉。
.toggle.close:before { transform: rotate(-225deg); top: 0; } .toggle.close:after { transform: rotate(225deg); top: 0; }
JavaScript
该特效中使用jQuery来监听菜单按钮的点击事件,并为相应的元素添加和移除相应的class类。
$(function(){ $('.toggle').on('click', function() { $('.menu').toggleClass('expanded'); $('span.item').toggleClass('hidden'); $('.container , .toggle').toggleClass('close'); }); })
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!