SHIDEN DESIGN BLOG

Follow Me

Follow Me

thumnail_20170608

ハンバーガーアイコンをクリックしてメニューが開く際のアニメーション色々

2017.06.8

SponsorLink

目次

  1. HTMLとCSSの雛形
  2. スライドダウン
  3. 横からスライド
  4. フェードイン
  5. スライド応用 + メニューを真ん中から
  6. スライド応用２ + メニューをキラッと
  7. フェード + メニューをスライドアップ

 
 
 
ハンバーガーアイコン自体のアニメーションは、検索すればいくらでも出てくるのに、表示されるメニューのアニメーションってあまり紹介されてないですよね。
ってことで、オーソドックスなモノと、そこに少しアレンジを加えたモノを作ってまとめてみました。
 

サンプル

 
 
 

HTMLとCSSの雛形

 
 
ナビゲーション全体のHTMLとCSSは基本的には全て同じですが、アニメーションの参考という部分にフォーカスしていますので、細かいレイアウトは好みで変更してください。
それでもアニメーションは機能するようにしていますし、メニューの数を増やしたり減らしたりしても大丈夫です。たぶん
 

html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div class="hamburger">
  <span></span>
  <span></span>
  <span></span>
</div>
 
<div id="navigation">
  <div class="navigation_inner">
    <ul class="navigation_menu">
      <li class="navigation_item"><a href="#">MENU 01</a></li>
      <li class="navigation_item"><a href="demo02.html">MENU 02</a></li>
      <li class="navigation_item"><a href="demo03.html">MENU 03</a></li>
      <li class="navigation_item"><a href="demo04.html">MENU 04</a></li>
      <li class="navigation_item"><a href="demo05.html">MENU 05</a></li>
      <li class="navigation_item"><a href="demo06.html">MENU 06</a></li>
    </ul>
  </div>
</div>

 

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
html{
  font-size: 62.5%;
}
/*----------ハンバーガーアイコン----------*/
.hamburger {
  position: absolute;
  display: block;
  width: 32px;
  height: 20px;
  z-index: 99999;
  box-sizing: border-box;
}
.hamburger  span {
  display: inline-block;
  transition: all .4s;
  box-sizing: border-box;
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #333;
  margin: 0 auto;
}
.hamburger  span:nth-of-type(1) {
  top: 0;
}
.hamburger  span:nth-of-type(2) {
  top: 9px;
}
.hamburger  span:nth-of-type(3) {
  bottom: 0;
}
 
/*----------ナビゲーション----------*/
#navigation{
  position: fixed;
  display: none;
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
  background-color: #fff;
  z-index: 99998;
}
#navigation .navigation_inner{
  display: table;
  width: 100%;
  height: 100%;
}
#navigation .navigation_inner .navigation_menu{
  display: table-cell;
  vertical-align: middle;
}
#navigation .navigation_inner .navigation_menu .navigation_item{
  width: 300px;
  height: 40px;
  margin: 16px auto 0 auto;
}
#navigation .navigation_inner .navigation_menu .navigation_item:first-child{
  margin-top: 0;
}
#navigation .navigation_inner .navigation_menu .navigation_item a{
  display: block;
  position: relative;
  text-decoration: none;
  font-size: 2.4rem;
  color: #333;
  line-height: 40px;
  text-align: center;
}

 

js
1
2
3
jQuery('.hamburger').on('click', function(){
  
});

 
 
 

スライドダウン

 
 
オーソドックスなやつ。
 

js
1
2
3
jQuery('.hamburger').on('click', function(){
  jQuery('#navigation').slideToggle(400);
});

 

サンプル０１

 
 
 

横からスライド

 
 
オーソドックスなやつ第二弾。
 

js
1
2
3
jQuery('.hamburger').on('click', function(){
  jQuery('#navigation').animate({width: 'toggle'}, 600);
});

 

サンプル０２

 
 
 

フェードイン

 
 
オーソドックスなやつ第三弾。
 

js
1
2
3
jQuery('.hamburger').on('click', function(){
  jQuery('#navigation').fadeToggle(600);
});

 

サンプル０３

 
 
 

スライド応用 + メニューを真ん中から

 
 
一旦、別のレイヤーを表示した後、斜め下からスライドしてくるような挙動をみせる感じです。
メニューの中身は、クルッと遅れて表示されます。
 
雛形のHTMLにspanタグを追加し、CSSで必要な要素にtransform、clip-pathを追加していきます。
 

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
31
32
33
34
35
36
<div id="navigation">
  <div class="navigation_inner">
    <ul class="navigation_menu">
      <li class="navigation_item">
        <a href="demo01.html">
          <span class="navigation_text">MENU 01</span>
        </a>
      </li>
      <li class="navigation_item">
        <a href="demo02.html">
          <span class="navigation_text">MENU 02</span>
        </a>
      </li>
      <li class="navigation_item">
        <a href="demo03.html">
          <span class="navigation_text">MENU 03</span>
        </a>
      </li>
      <li class="navigation_item">
        <a href="#">
          <span class="navigation_text">MENU 04</span>
        </a>
      </li>
      <li class="navigation_item">
        <a href="demo05.html">
          <span class="navigation_text">MENU 05</span>
        </a>
      </li>
      <li class="navigation_item">
        <a href="demo06.html">
          <span class="navigation_text">MENU 06</span>
        </a>
      </li>
    </ul>
  </div>
</div>

 

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
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
#navigation{
  position: fixed;
  display: none;
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
  background-color: #fff;
  z-index: 99998;
  overflow: hidden;
}
/*----------追加１----------*/
#navigation::before{
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  background-color: #333;
  -webkit-animation: upper-right 0.4s 0.4s forwards;
  animation: upper-right 0.4s 0.4s forwards;
}
@-webkit-keyframes upper-right{
  0% {
    -webkit-clip-path: polygon(100% 100%, 100% 0, -35% 0, 0 100%);
    clip-path: polygon(100% 100%, 100% 0, -35% 0, 0 100%);
  }
  100% {
    -webkit-clip-path: polygon(100% 100%, 100% 0, 100% 0, 135% 100%);
    clip-path: polygon(100% 100%, 100% 0, 100% 0, 135% 100%);
  }
}
@keyframes upper-right{
  0% {
    -webkit-clip-path: polygon(100% 100%, 100% 0, -35% 0, 0 100%);
    clip-path: polygon(100% 100%, 100% 0, -35% 0, 0 100%);
  }
  100% {
    -webkit-clip-path: polygon(100% 100%, 100% 0, 100% 0, 135% 100%);
    clip-path: polygon(100% 100%, 100% 0, 100% 0, 135% 100%);
  }
}
/*----------追加１ここまで----------*/
 
#navigation .navigation_inner{
  display: table;
  width: 100%;
  height: 100%;
}
#navigation .navigation_inner .navigation_menu{
  display: table-cell;
  vertical-align: middle;
}
#navigation .navigation_inner .navigation_menu .navigation_item{
  width: 300px;
  height: 40px;
  margin: 16px auto 0 auto;
}
#navigation .navigation_inner .navigation_menu .navigation_item:first-child{
  margin-top: 0;
}
#navigation .navigation_inner .navigation_menu .navigation_item a{
  display: block;
  position: relative;
  text-decoration: none;
  width: 100%;
  height: 40px;
  font-size: 2.4rem;
  color: #333;
  line-height: 40px;
  text-align: center;
}
 
/*----------追加２----------*/
#navigation .navigation_inner .navigation_menu .navigation_item a .navigation_text{
  display: block;
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 40px;
  font-size: 2.4rem;
  line-height: 40px;
  -webkit-transform: rotateY(90deg);
  transform: rotateY(90deg);
  -webkit-animation: rota 1.2s 0.6s forwards;
  animation: rota 0.4s 0.7s forwards;
}
@-webkit-keyframes rota{
  0% {
   -webkit-transform: rotateY(90deg);
  transform: rotateY(90deg);
  }
  100% {
    -webkit-transform: rotateY(0);
  transform: rotateY(0);
  }
}
@keyframes rota{
  0% {
   -webkit-transform: rotateY(90deg);
  transform: rotateY(90deg);
  }
  100% {
   -webkit-transform: rotateY(0);
  transform: rotateY(0);
  }
}
/*----------追加２ここまで----------*/

 

js
1
2
3
jQuery('.hamburger').on('click', function(){
  jQuery('#navigation').animate({width: 'toggle'}, 400);
});

 

サンプル０４

 
 
 

スライド応用２ + メニューをキラッと

 
 
端が斜めになったレイヤーがスライドしてきた後、メニューの中身が遅れてキラッて感じで表示されます。
 
雛形のHTMLにdate属性を使用して、CSSにも変更を加えていきます。
 

HTML
1
2
3
4
5
6
7
8
9
10
11
12
<div id="navigation">
  <div class="navigation_inner">
    <ul class="navigation_menu">
      <li class="navigation_item"><a href="demo01.html" data-txt="MENU 01">MENU 01</a></li>
      <li class="navigation_item"><a href="demo02.html" data-txt="MENU 02">MENU 02</a></li>
      <li class="navigation_item"><a href="demo03.html" data-txt="MENU 03">MENU 03</a></li>
      <li class="navigation_item"><a href="demo04.html" data-txt="MENU 04">MENU 04</a></li>
      <li class="navigation_item"><a href="#" data-txt="MENU 05">MENU 05</a></li>
      <li class="navigation_item"><a href="demo06.html" data-txt="MENU 06">MENU 06</a></li>
    </ul>
  </div>
</div>

 

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
91
92
93
94
95
96
97
98
99
100
101
102
#navigation{
  position: fixed;
  display: none;
  width: 100%;
  height: 100vh;
  top: 0;
  left: -40%;/*----------変更１ 一行----------*/
  background-color: #fff;
  z-index: 99998;
/*----------追加１----------*/
  -webkit-transform: skewX(-20deg);
  transform: skewX(-20deg);
  -webkit-animation: skew 0.6s 0.5s forwards;
  animation: skew 0.6s 0.5s forwards;
}
@-webkit-keyframes skew{
  0% {
  -webkit-transform: skewX(-20deg);
  transform: skewX(-20deg);
  }
  100% {
    left: 0;
  -webkit-transform: skewX(0);
  transform: skewX(0);
  }
}
@keyframes skew{
  0% {
  -webkit-transform: skewX(-20deg);
  transform: skewX(-20deg);
  }
  100% {
    left: 0;
  -webkit-transform: skewX(0);
  transform: skewX(0);
  }
}
/*----------追加１ここまで----------*/
 
#navigation .navigation_inner{
  display: table;
  width: 100%;
  height: 100%;
}
#navigation .navigation_inner .navigation_menu{
  display: table-cell;
  vertical-align: middle;
}
#navigation .navigation_inner .navigation_menu .navigation_item{
  width: 300px;
  height: 40px;
  margin: 16px auto 0 auto;
}
#navigation .navigation_inner .navigation_menu .navigation_item:first-child{
  margin-top: 0;
}
#navigation .navigation_inner .navigation_menu .navigation_item a{
  display: block;
  position: relative;
  text-decoration: none;
  font-size: 2.4rem;
  color: transparent;/*----------変更２ 一行----------*/
  line-height: 40px;
  text-align: center;
}
/*----------追加２----------*/
#navigation .navigation_inner .navigation_menu .navigation_item a::after{
  content: attr(data-txt);
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  font-size: 2.4rem;
  color: #333;
  line-height: 40px;
  text-align: center;
  -webkit-clip-path: polygon(0 0, 0% 0, -80% 100%, 0 100%);
  clip-path: polygon(0 0, 0% 0, -80% 100%, 0 100%);
  -webkit-animation: txtshow 0.8s 0.8s forwards;
  animation: txtshow 0.8s 0.8s forwards;
}
@-webkit-keyframes txtshow {
  0% {
  -webkit-clip-path: polygon(0 0, 0% 0, -80% 100%, 0 100%);
  clip-path: polygon(0 0, 0% 0, -80% 100%, 0 100%);
  }
  100% {
   -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
}
@keyframes txtshow {
  0% {
  -webkit-clip-path: polygon(0 0, 0% 0, -80% 100%, 0 100%);
  clip-path: polygon(0 0, 0% 0, -80% 100%, 0 100%);
  }
  100% {
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
}
/*----------追加２ここまで----------*/

 

js
1
2
3
jQuery('.hamburger').on('click', function(){
  jQuery('#navigation').animate({width: 'toggle'}, 600);
});

 

サンプル０５

 
 
 

フェード + メニューをスライドアップ

 
 
メニューの中身が遅れて、フェードインしながらスライドアップしてきます。
HTMLとCSSは雛形のままでjsだけを少し変更しています。
 

js
1
2
3
4
5
6
jQuery('.hamburger').on('click', function(){
  jQuery('#navigation').fadeToggle(600);
  jQuery('.navigation_item').css({top : '20px', opacity:0}).each(function(i){
    jQuery(this).delay(300 * i).animate({top : '0', opacity:1}, 1500);
  })
});

 

サンプル０６

 
 
 

最後に

 
 
 
クルッとかキラッとか擬音が多くてごめんなさい。自分の説明力の低さを痛感しました。
 
個人的にテンプレート化しようと思って作り始めたので、シンプルなモノばかりになっていますが、需要があれば使ってください。
 
 
 

SponsorLink

Related Articles