2017年4月18日

メニューを左からスライド・イン

メニューを画面の左からスライド・インさせる方法を紹介します。

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div id="menu">
  <span class="show-menu"></span>
  <div class="inner">
    <h1>MENU</h1>
    <ul>
      <li><span>TOP</span></li>
      <li><span>CONCEPT</span></li>
      <li><span>LUNCH</span></li>
      <li><span>DINNER</span></li>
      <li><span>DESSERT & DRINKS</span></li>
      <li><span>NEWS</span></li>
      <li><span>ACCESS</span></li>
    </ul>
  </div>  <!-- /.inner -->
</div>

補足

  • show-menu クラスを付けた span 要素をクリックすることで、メニューのスライドイン・アウトをおこないます。

jQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
$(function(){
 
  $('#menu .show-menu').on('click', function(){
    var s = $('#menu');
    if ( s.hasClass('SHOW') ) {
      /*メニューを閉じる */
      var w = s.width();
      s.animate({'left': -w + 'px'}, 500).removeClass('SHOW');
    } else {
      /*メニューを開く */
      s.animate({'left': '0'}, 500).addClass('SHOW');
    }
  });
 
  /* リサイズ時に、画面外に出しているメニューが表示されてしまうので、left 値を再設定 */
  $(window).on('resize', function(){
    var s = $('#menu');
    if ( ! s.hasClass('SHOW') ){
      var w = s.width();
      s.css('left', -w + 'px');
    }
  });
 
});

補足

  • show-menu クラスを付けた span 要素がクリックされたら、メニューの左位置を変更してスライド・イン、スライド・アウトさせています。
  • リサイズ（または回転）時に左位置を再設定しないと、画面外に出しておいたメニューが一部見えてしまうことがあるので、リサイズされたら左位置を設定し直しています。

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
#menu {
  position: fixed;
  z-index: 300;
  background-color: rgba(0, 0, 0, 0.9);
  color: #fff;
}
 
#menu {
  top: 0;
  left: -100vw; /* あらかじめ画面外へ移動しておく */
  width: 100vw;
  height: 100vh;
  text-align: center;
}
 
#menu .inner {
  max-width: none;
}
 
#menu h1 {
  padding: 22px 0 0;
  font-size: 1em;
  font-weight: bold;
}
 
#menu ul {
  font-size: 0.8em;
  color: #F4BA14;
}
 
#menu ul li span {
  display: block;
  padding: 1em 0;
  cursor: pointer;
}
 
#menu .show-menu {
  position: fixed;
  z-index: 350;
  top: 10px;
  right: 10px;
  padding: 12px 0;
  border: 2px solid #fff;
  border-radius: 50%;
  line-height: 1;
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  width: 44px;
  background-color: rgba(0, 0, 0, 0.7);
  color: #fff;
  cursor: pointer;
}
 
#menu .show-menu:before {
  content: "≡";
}
 
#menu.SHOW .show-menu:before {
  content: "×";
}
 
#menu .inner {
  box-sizing: border-box;
  height: 100%;
  overflow: auto;
}

補足

  • メニューの左位置は、メニューの幅のマイナス値を指定して、あらかじめ画面外に出しています。
  • スマート・フォンの横持ちでメニューの下部が切れてしまうことがあるので、#menu .inner のスタイルを設定して、スクロールできるようにしています。

サンプル

「メニューを左からスライド・イン」のサンプル

ラベル: , , , ,