HTML5动态圆形导航,jQuery带动画特效的圆形导航菜单特效

这是一款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;

}

}

}

}

}