jQuery+CSS3で円が画面全体に広がる系スマホメニュー

1
<header id="top-head">
2
  <div id="top-head-inner">
3
    <h1 id="head-logo">Mobile Circle Navigation</h1>
4
    <div id="nav-toggle">
5
      <div>
6
        <span></span>
7
        <span></span>
8
        <span></span>
9
      </div>
10
    </div>
11
    <nav id="global-nav">
12
      <ul>
13
        <li><a href="#">HOME</a></li>
14
        <li><a href="#">PRODUCT</a></li>
15
        <li><a href="#">WORKS</a></li>
16
        <li><a href="#">COMPANY</a></li>
17
        <li><a href="#">CONTACT</a></li>
18
      </ul>
19
    </nav>
20
    <div id="nav-bg"></div>
21
  </div>
22
</header>

1
(function($) {
2
  $(function() {
3
    $('#nav-toggle').click(function(){
4
      $('body').toggleClass('open');
5
    });
6
  });
7
})(jQuery);

1
#nav-bg {
2
  content: "";
3
  width: 2400px;
4
  height: 2400px;
5
  margin-right: -1200px;
6
  margin-top: -1200px;
7
  top: 40px;
8
  right: 40px;
9
  display: block;
10
  position: fixed;
11
  background: #17A669;
12
  -webkit-border-radius: 50%;
13
  border-radius: 50%;
14
  -webkit-transition: all .3s ease-out;
15
  transition: all .3s ease-out;
16
  -webkit-backface-visibility: hidden;
17
  backface-visibility: hidden;
18
  -webkit-transform: scale(.02);
19
  transform: scale(.02);
20
}
21
.open #nav-bg {
22
  -webkit-transform: scale(1);
23
  transform: scale(1);
24
  -webkit-transition: all .6s ease-out;
25
  transition: all .6s ease-out;
26
}
27

28
/* nav-list  */
29
#global-nav ul li {
30
  opacity: 0;
31
  -webkit-transform: scaleX(0) translateX(-260px);
32
  transform: scaleX(0) translateX(-260px);
33
  -webkit-transition: none;
34
  transition: none;
35
}
36
.open #global-nav ul li {
37
  opacity: 1;
38
  -webkit-transform: scaleX(1) translateX(0);
39
  transform: scaleX(1) translateX(0);
40
  -webkit-transition: all .3s ease-out;
41
  transition: all .3s ease-out;
42
  -webkit-transition-delay: .1s;
43
  transition-delay: .1s;
44
}