jQuery+CSS3で丸タイプのドロワーメニュー

1
<div id="nav-toggle">
2
<div>
3
  <span></span>
4
  <span></span>
5
  <span></span>
6
</div>
7
</div>
8

9
<div id="nav-circle-bg"></div>
10
<nav id="nav">
11
<ul>
12
  <li><a href="#">HOME</a></li>
13
  <li><a href="#">ABOUT</a></li>
14
  <li><a href="#">WORKS</a></li>
15
  <li><a href="#">CONTACT</a></li>
16
</ul>
17
</nav>

1
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
2
<script type="text/javascript">
3
(function($) {
4
  $(function() {
5
    $('#nav-toggle').on('click', function() {
6
      $('body').toggleClass('open');
7
    });
8
  });
9
})(jQuery);
10
</script>

1
/* ========================
2
* Navigation Circle BG
3
* ======================== */
4
#nav-circle-bg {
5
  position: fixed;
6
  background: #fff;
7
  width: 600px;
8
  height: 600px;
9
  top: 50%;
10
  right: -600px;
11
  margin-top: -300px;
12
  border-radius: 50%;
13
  transition: transform .5s ease;
14
  transition-delay: .6s;
15
}
16
.open #nav-circle-bg {
17
  transform: matrix(2.7, 0, 0, 2.7, 0, 0);
18
  transition-delay: 0s;
19
}
20

21
/* ========================
22
* Navigation
23
* ======================== */
24
#nav {
25
  position: fixed;
26
  font-size: 32px;
27
  height: 100%;
28
  width: 500px;
29
  right: -500px;
30
  display: flex;
31
  align-items: center;
32
}
33

34
#nav ul {
35
  width: 100%;
36
  list-style: none;
37
}
38

39
/* ========================
40
* Navigation Animation
41
* ======================== */
42
#nav li {
43
  transition: transform .5s ease;
44
  transition-delay: 0;
45
}
46
#nav li:nth-child(1) {
47
  transition-delay: 0;
48
}
49
#nav li:nth-child(2) {
50
  transition-delay: .1s;
51
}
52
#nav li:nth-child(3) {
53
  transition-delay: .2s;
54
}
55
#nav li:nth-child(4) {
56
  transition-delay: .3s;
57
}
58

59
.open #nav li {
60
  transform: translateX(-400px);
61
}
62
.open #nav li:nth-child(1) {
63
  transition-delay: .3s;
64
}
65
.open #nav li:nth-child(2) {
66
  transition-delay: .4s;
67
}
68
.open #nav li:nth-child(3) {
69
  transition-delay: .5s;
70
}
71
.open #nav li:nth-child(4) {
72
  transition-delay: .6s;
73
}
74

75
/* ========================
76
* Navigation Button
77
* ======================== */
78
#nav a {
79
  width: 100%;
80
  display: block;
81
  color: #333;
82
  text-decoration: none;
83
  padding: 10px 0;
84
}
85
#nav a:after {
86
  content: "";
87
  display: block;
88
  background: #D32222;
89
  width: 0;
90
  height: 1px;
91
  transition: width 1s ease;
92
}
93
#nav a:hover {
94
  color: #D32222;
95
}
96
#nav a:hover:after {
97
  width: 100%;
98
}
99

100
/* ========================
101
* nav-toggle
102
* ======================== */
103
#nav-toggle {
104
  position: fixed;
105
  top: 15px;
106
  right: 15px;
107
  width: 56px;
108
  height: 56px;
109
  padding: 19px 17px 0;
110
  background: #000;
111
  border-radius: 50%;
112
  cursor: pointer;
113
  z-index: 100;
114
}
115
#nav-toggle > div {
116
  position: relative;
117
}
118
#nav-toggle span {
119
  width: 100%;
120
  height: 2px;
121
  left: 0;
122
  display: block;
123
  background: #fff;
124
  position: absolute;
125
  transition: .35s ease-in-out;
126
}
127

128
#nav-toggle span:nth-child(1) {
129
  top: 0;
130
}
131
#nav-toggle span:nth-child(2) {
132
  top: 7px;
133
}
134
#nav-toggle span:nth-child(3) {
135
  top: 14px;
136
}
137

138
.open #nav-toggle span:nth-child(1) {
139
  top: 7px;
140
  transform: rotate(45deg);
141
}
142
.open #nav-toggle span:nth-child(2) {
143
  width: 0;
144
  left: 50%;
145
}
146
.open #nav-toggle span:nth-child(3) {
147
  top: 7px;
148
  transform: rotate(-45deg);
149
}