成都web前端培训
成都达内金融街中心

18328393564

热门课程

炫酷汉堡包导航菜单代码

  • 时间:2016-06-29 10:13
  • 发布:达内杨老师
  • 来源:达内

成都达内分享——这是一款效果非常炫酷的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'); 

});

})          
上一篇:响应式CSS网格系统分享
下一篇:炫酷图片3D透视特效插件
选择城市和中心
贵州省

广西省

海南省