スマホでクリックすると表示されるトグルメニューを実装

スマホでクリックすると横から出てくるメニューを実装

このエントリーはほぼテスト用記事なので、説明が雑です。

このブログでは、スマホで左下のメニューボタンを押すと、メニューが出てきます。

まずはHTML。

<div id="left-side">
  <div class="left-side-inner">
    <ul>
      <li><a href="">JavaScript</a></li>
      <li><a href="">HTML</a></li>
      <li><a href="">CSS</a></li>
      <li><a href="">PHP</a></li>
    </ul>
  </div>
</div>
<div id="nav-toggle">
    <span></span>
    <span></span>
    <span></span>
</div>

基本的なCSSはこんな感じ。

/* Left Sidebar */
#left-side {
  position: fixed;
  top: 40px;
  left: 0;
  width: 22%;
  height: 100%;
  border-right: solid 1px #ddd;
  overflow: auto;
  z-index: 300;
  background-color: #3c3c3c;
  background-image: linear-gradient( to left, #333, #444);
  transition: all 0.3s;
}
#left-side ul {
  list-style: none;
}
#left-side ul,
#left-side ul li {
  position: relative;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
#left-side li a {
  display: block;
  width: 100%;
  height: 50px;
  text-decoration: none;
  text-align: center;
  text-shadow: 1px 1px #000;
  line-height: 50px;
  color: #fff;
  border-top: solid 1px #333;
}
#left-side ul li:last-child {
  border-bottom: solid 1px #333;
}

ボタン部分はこんな感じ。画像を使わずにCSSだけでボタンと動きを表現します。

#nav-toggle {
  display: none;
  position: fixed;
  bottom: 4px;
  left: 0;
  z-index: 500;
  width: 36px;
  height: 36px;
  background-color: #333;
  cursor: pointer;
  transition: all 0.3s;
}

#nav-toggle span {
  position: absolute;
  display: block;
  width: 24px;
  height: 3px;
  background-color: #fff;
  left: 6px;
  transition: all 0.3s;
}
#nav-toggle span:nth-child(1) {
  top: 8px;
}
#nav-toggle span:nth-child(2) {
  top: 16px;
}
#nav-toggle span:nth-child(3) {
  top: 24px;
}

で、クリックされた時にハンバーガーが「×」になるようにします。

#nav-toggle.open {
  transition: all 0.3s;
  left: 200px;
}
#nav-toggle.open span:nth-child(1) {
  top: 16px;
  transform: rotate(135deg);
}
#nav-toggle.open span:nth-child(2) {
  width: 0;
}
#nav-toggle.open span:nth-child(3) {
  top: 16px;
  transform: rotate(-315deg);
}

最後にウィンドウサイズが狭くなった時にボタンを表示して、一旦メニューを隠します。

親要素にoverflow:hiddenを指定するのを忘れずに。

@media (max-width: 767px) {
  #left-side {
    width: 200px;
    margin-left: -100%;
  }
  /* jsで「.open-menu」を付ける */
  #left-side.open-menu{
    margin-left: 0;
  }
  #nav-toggle {
    display: block;
  }
}

そして、JSです。jQueryを使えばめちゃくちゃ簡単にトグルメニューを実装できます。

$(function(){
  var $button = $('#nav-toggle');
  var $menu = $('#left-side');
  $button.on('click',function(){
    $button.toggleClass('open');
    $menu.toggleClass('open-menu');
  });
});