这是一款jQuery带动画特效的圆形导航菜单特效。该导航菜单在被点击时，会以动画的方式移动到屏幕中间，并展开为一个圆形菜单，效果非常炫酷。
使用方法
在页面中引入jquery和TweenMax.js的文件。
HTML结构
该圆形导航菜单的HTML结构如下。
Home
...
CSS样式
然后为该圆形导航菜单添加下面的CSS样式。
#menu-trigger {
width: 100px;
height: 100px;
top: -34px; left: 50%;
margin-left: -50px;
position: absolute;
cursor: pointer;
background: rgba(255, 255, 255, 1);
border-radius: 50%;
z-index: 1000;
#hamburger {
position: absolute;
height: 100%;
width: 100%;
span {
transition: .25s ease-in-out;
width: 48px;
height: 4px;
position: relative;
top: 24px;
left: 26px;
margin: 10px 0;
&:nth-child(1) {
transition-delay: .5s;
}
&:nth-child(2) {
transition-delay: .625s;
}
&:nth-child(3) {
transition-delay: .75s;
}
}
}
#close {
position: absolute;
height: 100%;
width: 100%;
transform: rotate(45deg);
span {
transition: .25s ease-in-out;
&:nth-child(1) {
height: 0%;
width: 4px;
position: absolute;
top: 25%;
left: 48px;
transition-delay: 0s;
}
&:nth-child(2) {
width: 0%;
height: 4px;
position: absolute;
left: 25%;
top: 48px;
transition-delay: .25s;
}
}
}
&.open {
box-shadow: 0 15px 31px rgba(0,0,0,0.08), 0 7px 15px rgba(0,0,0,0.04);
#hamburger {
span {
width: 0%;
&:nth-child(1) {
transition-delay: 0s;
}
&:nth-child(2) {
transition-delay: .125s;
}
&:nth-child(3) {
transition-delay: .25s;
}
}
}
#close {
span {
&:nth-child(1) {
height: 50%;
transition-delay: .625s;
}
}
span {
&:nth-child(2) {
width: 50%;
transition-delay: .375s;
}
}
}
}
}
