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

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

这是一款jQuery带动画特效的圆形导航菜单特效。该导航菜单在被点击时,会以动画的方式移动到屏幕中间,并展开为一个圆形菜单,效果非常炫酷。

使用方法
在页面中引入jquery和TweenMax.js的文件。

1
2
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/TweenMax.min.js"></script>

HTML结构
该圆形导航菜单的HTML结构如下。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<header style="background: URL(path/to/image.jpg) no-repeat center center fixed;">
  <ul class="navigation">
     
    <!-- navigation START -->
    <li data-width="420" data-height="420">
      <a href="#">Home</a>
    </li>
    ...
    <!-- navigation END -->
     
    <!-- navigation:background-helper START -->
    <div class="header-transparent"></div>
    <!-- navigation:background-helper END -->
     
    <!-- navigation:trigger START -->
    <div id="menu-trigger">
      <div id="hamburger">
        <span></span>
        <span></span>
        <span></span>
      </div>
      <div id="close">
        <span></span>
        <span></span>
      </div>
    </div>
    <!-- navigation:trigger END -->
     
  </ul>
</header>

CSS样式
然后为该圆形导航菜单添加下面的CSS样式。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
#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;
      }
    }
  }
}
}
当前内容只有登录了才能查看,如果您已经注册,请登录
1

发表评论