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

ちゃんなる Web制作

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

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

 

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

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

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

 

サンプルページ

 

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<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

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
#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;
  }
}

スクリプト

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
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大事。

「レスポンシブ対応のドロワーメニュー（サイドバー追従）を作ったよ〜」への4件のフィードバック

  1. ガロねえ様
    前から作ってみたいと思っていたレスポンシブのメニュー
    自分もやってみたら、、できました！
    メニューは追いかけるし、レスポンシブもばっちり！
    サイドメニューの固定でも、左寄せの固定じゃないし、
    どれもが思っていた通りの理想に近くて、感激しました！

    が、しかし、しかしなんです。
    メニュー項目を9個じゃなく20個ほどに増やしてみたら、
    PCだと後半が見えなかったり、スクロールしても上に消えたり、
    メニュー項目を増やした部分が使えないんです。
    レスポンシブのスマホの場合だとスクロールが出るんで、
    問題ないんですけどね。

    メニュー項目を増やしても使えるようになる方法はありませんか？
    ガロねえ様どうかご教授くださいますよう、お願いいたします！

    返信

    1. うれしいコメントありがとうございます！
      お役に立てて光栄です。

      今、スマホ幅の時にだけスクロールが出るようになっているので、それをPCでも出るようにすればOKだと思います。
      CSSの、#sidebarのところに「overflow-y: scroll;」を追加してみてください。

      返信

      1. ガロねえ様
        こんな早くに返答をもらえて、さらに感激しました！
        ご教授どおりにやってみたら、、さすがです！できました！
        なぜ気づかなかったんだと自分の馬鹿さ加減にうんざりします。

        が、でも、でもなんです。
        スクロールの縦幅を483pxから600pxとかに長くすると、
        メニューが追いかけてこなくなっちゃったんです。
        やっぱりこのぐらいの縦幅じゃないと、無理なんでしょうね。

        もし画期的な改善方法等々があれば？
        何度も質問してご迷惑なだけだと思いますが、、すみません
        ガロねえ様どうかご教授くださいますよう、お願いいたします！

  2. コメントに気づかず、失礼しました。
    スクロールの縦幅を長くする、というのがよく分からないので申し訳ございません。
    sidebarの縦幅ですかね・・・？
    縦幅よりも画面の高さの方が小さくなってしまっているのかもしれませんね。

    返信

narugaro へ返信する コメントをキャンセル

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

CAPTCHA