ハンバーガーメニュー

html


  <body>
  <div id="layer"></div>
  <div id="wrap">
  <header>
    <h1 id="brand">Hamburger</h1>
    <p id="openMenu"><a href="#"><img src="images/hambtn.png" alt="ボタン" width="30" height="auto" /></a></p> // ハンバーガーボタン
    <nav id="global-menu">
      <span id="close-btn">X</span> // クローズボタン
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">News</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
  </header>
  <div id="content">
  ....
  </div>
  <footer></footer>
  </div>
  </body>

css


  body{
    position: relative; /* position: fixed;をつけた#layer・header・#global-menuのz-indexをコントロールするための起点 */
    overflow-x: hidden; /* メニューが誤って表示されないように */
  }

  #layer{
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.7);
    z-index: 1; /* ヘッダー・ボディーより手前に */
    display: none;
  }
  /* ========================== */
  /* ヘッダー              */
  /* ========================== */
  header{
    width: 100%;
    height: 80px;
    background-color: #FC3666;
    color: #fff;
    position: fixed;
    top: 0;
  }

  header h1, header p{
    margin: 0;
    padding: 0;
  }

  header h1#brand{
    position: absolute;
    top: 20px;
    left: 20px;
  }

  header #openMenu{
    position: absolute;
    top: 20px;
    right: 20px;
  }

  header nav#global-menu{
    position: fixed;
    top: 0;
    right: -200px; /* 幅の分だけ隠す */
    width: 200px;
    height: 100%; /* 画面縦全部 */
    background-color: #fff;
  }

  header nav#global-menu span#close-btn{
    display: block;
    width: 30px;
    height: 20px;
    color: #fff;
    padding: 10px;
    margin-bottom: 20px;
    text-align: center;
    background-color: #FC3666;
    cursor: pointer;
  }

  header nav#global-menu ul{
    list-style-type: none;
    margin: 0;
    padding: 0;
  }

  header nav#global-menu ul li{
    padding: 10px;
    border-bottom: 1px dotted #FC3666;
  }

  header nav#global-menu ul li a{
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
  }

  /* ========================== */
  /* コンテンツ              */
  /* ========================== */
  #content{
    padding: 80px 10px 10px;
  }

jQuery


  $(document).ready(function(){
    var toggleBtn = $('#openMenu'); // ハンバーガーボタン
    var header = $('header');
    var closeBtn = $('#close-btn'); // クローズボタン
    var gMenu = $('#global-menu'); // グローバルメニュー
    var body = $(document.body); // ボディ
    var menuWidth = gMenu.outerWidth(); // メニュー幅(ボーダー・パディング込みの幅)
    var layer = $('#layer'); // メニューを出したときのバックグラウンドレイヤー

    toggleBtn.children('a').on('click', function(e){
      e.preventDefault();
      body.toggleClass('open');

      if (body.hasClass('open')) {
        body.animate({'right': menuWidth}, 300); // メニューの幅の分だけ左のポジションへ
        header.animate({'right': menuWidth}, 300); // ヘッダーもfixedしているのでbodyと同様に
        gMenu.animate({'right': 0}, 300); // right:0;のポジションへ
        layer.show();
      }else{
        body.animate({'right': 0}, 300); // right:0;のポジションへ
        header.animate({'right': 0}, 300);
        gMenu.animate({'right': -menuWidth}, 300); // メニューの幅の分だけ右のポジションへ
        layer.hide();
      }
    });

    layer.on('click', function(){ // レイヤーをクリックしたら
      body.animate({'right': 0}, 300);
      header.animate({'right': 0}, 300);
      gMenu.animate({'right': -menuWidth}, 300);
      layer.hide();
      body.removeClass('open');
    });

    closeBtn.on('click', function(){ // クローズボタンを押したら
      body.animate({'right': 0}, 300);
      header.animate({'right': 0}, 300);
      gMenu.animate({'right': -menuWidth}, 300);
      layer.hide();
      body.removeClass('open');
    });
  });