ゆたんぶろぐ

気が向いたら書いてます

Wikipedia Mobile のようなスライドメニューを簡単に作る

WikipediaiPhone で見ると、左上にメニューボタンがあって、それをタップすると左からメニューが表示される、まぁよくあるタイプですが、簡単に実装しましょう。

開閉の制御は jQuery、アニメーションはヒマなんで CSS3 でやりましょう。

HTML

<nav>
  <a href="#">link</a>
  <a href="#">link</a>
  <a href="#">link</a>
</nav>
<div id="content">
 <button id="btn_menu">menu</button>
</div>

Sass

nav {
  width: 200px;
  min-height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  background: rgb(180, 180, 180);

  a {display: block;}
}
#content {
  width: 100%;
  min-height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  background: rgb(220, 220, 220);
}
#content.menu_open, #content.menu_close {
  @include experimental('animation-duration', 0.5s, webkit);
  $animation-support: webkit;
  @include experimental('animation-iteration-count', 1);
}
#content.menu_open {
  @include experimental('animation-name', menu_on, webkit);
  left: 200px;
}
#content.menu_close {
  @include experimental('animation-name', menu_off, webkit);
  left: 0;
}
@-webkit-keyframes menu_on {0% {left: 0;} 100% {left: 200px;}}
@-webkit-keyframes menu_off {0% {left: 200px;} 100% {left: 0;}}

JavaScript

$(function() {
  $(document)
    .on('touchend', '#btn_menu', function() {
      var $content = $('#content');
      $content.attr('class', $content.hasClass('menu_open') ? 'menu_close' : 'menu_open');
    })
    .on('touchend', '.menu_open', function() {
      $('#content').attr('class', 'menu_close');
    })
  ;
});

結果

普段の状態

f:id:primedesignworks:20131205152215p:plain

コンテンツ部分をタップすると元に戻る

f:id:primedesignworks:20131205152216p:plain