レスポンシブ対応のドロワーメニュー（サイドバー追従）を作ったよ〜

最近、きれいにjQueryを書こうと勉強中なのです。

もっとこうだよ、ああだよ、っていうのがあったら、ぜひご教授くださいm(_ _)m

 

と、いうわけで。レスポンシブ対応のドロワーメニュー（パソコン表示ではサイドバー追従）を作ったので見てやってください。

パソコン表示では、サイドバーがスクロールに応じて追従します。footerにかぶらないようになっています。

スマホ表示では、トグルボタンになって、クリックすると左から出てきます。

 

サンプルページ

 

HTML

<div id="toggle"></div>
<div id="sidebar">
  <nav>
    <ul id="g-nav">
      <li><a href="#">メニュー1</a></li>
      <li><a href="#">メニュー2</a></li>
      <li><a href="#">メニュー3</a></li>
      <li><a href="#">メニュー4</a></li>
      <li><a href="#">メニュー5</a></li>
      <li><a href="#">メニュー6</a></li>
      <li><a href="#">メニュー7</a></li>
      <li><a href="#">メニュー8</a></li>
      <li><a href="#">メニュー9</a></li>
    </ul>
  </nav>
</div>
<!--#sidebar-->

CSS

#sidebar {
  float: left;
  width: 215px;
  box-sizing: border-box;
  position: absolute;
  top: 35px;
  left: 35px;
}
#g-nav,
#g-nav li {
  margin: 0;
  padding: 0;
  list-style: none;
}
#g-nav li a {
  color: #313131;
  font-size: 1.3rem;
  font-weight: bold;
  letter-spacing: .2em;
  padding: 10px 0;
  display: block;
}
@media only screen and (max-width: 670px) {
  #toggle {
    background: transparent url(menu.png) no-repeat 0 0;
    background-size: contain;
    width: 60px;
    height: 60px;
    display: block;
    cursor: pointer;
    position: fixed;
    top: 40px;
    left: 0;
    z-index: 600;
    box-shadow: 0 0 5px rgba(0,0,0,.3);
  }
  #sidebar {
    width: 215px;
    float: none;
    display: none;
    padding: 100px 15px 15px 15px;
    z-index: 500;
    background-color: #ae5da1;
    position: fixed;
    left: 0;
    top: 0;
    overflow-y: scroll;
  }
  #g-nav {
    width: 180px;
  }
}

スクリプト

function sideMenu() {
  var w = $(window).innerWidth();
  var obj = $('#sidebar');
  
  if(w <= 670) {
    obj.hide();
    var h = $(window).height();
    obj.css('height', h);
    obj.css('margin-top', 0);
    obj.removeClass('pc');
    obj.addClass('sp');
    $('#toggle').unbind('click');
    $('#toggle').on('click', function() {
      $('.sp').stop().animate({ width: 'toggle' });
    });
  } else {
    obj.show();
    obj.removeClass('sp');
    obj.addClass('pc');
    var offset = obj.offset();
    var offsetFt = $('footer').offset();
    $(window).scroll(function() {
      
      if ($(window).scrollTop() > offset.top && $(window).scrollTop() < offsetFt.top - obj.height() + 35) {
        $('.pc').stop().animate({
          duration: 'fast',
          marginTop: $(window).scrollTop()
        });
      } else {
        $('.pc').stop().animate({ marginTop: 0 });
      }
      
    });
  }
  
}//sideMenu
  
$(function(){
  
  sideMenu();
  
  var timer = false;
  $(window).on('resize', function() {
    if(timer !== false){
      clearTimeout(timer);
    }
    timer = setTimeout(function() {
      sideMenu();
    }, 200);
  });
  
});

関数を作って、普通に呼び出し・resize時にタイマー付きで呼び出し（何回も発生するのを防ぐ）ています。

window幅が670px以下の場合、ドロワメニュー。spクラスを付与し、トグルをクリックで左から出てきます。animateで、widthをtoggleにしています。

window幅が670px以上の場合、pcクラスを付与し、スクロールに応じてニョキニョキ追従させています。footerにかぶらないように処理。

resize時にどっちかの挙動を引き継いでしまうので、spクラスとpcクラスで分けました。

最初unbindしていなかったので、クリックイベントが複数回発生してしまい、挙動がおかしかったです。unbind大事。