【jQuery】左メニューが開閉できるwebページの最も簡単な作り方

左メニューが開閉できるページを作ってみよう

下のようなページを試しに作ってみました。左上のバーを押すと、左のブロックが画面外に出ます。作り方のポイントを紹介します。

See the Pen frame(left nav bar)2 by バイオハックch (@synd1090) on CodePen.

左のブロックを作成する

左のブロックは<nav>なのですが、これをposition:fixed;で固定すると、右側の要素が上手く回り込みません。

そのため、<nav>の背後に、空の要素（<div class=”space”>)を１つ加えています。こちらは、float:leftにし、右側に要素が回り込めるようにしています。どちらもwidthは200pxに指定しています。

<nav></nav>
<div class="space"></div>

バーを押すと左側に移動する処理を行う

jQueryを利用して、バーをクリックした時の動作を指定しています。

$('.nav-bar').on('click', function() {
//.nav-barがクリックされた時の処理↓

      $('.space').toggleClass('hidden-space');
      $('nav').toggleClass('hidden-nav');
　　　//spaceとnavにそれぞれクラスを付けて、left:-200pxに移動させる。

      $('.nav-bar').toggleClass('nav-bar-white');
　　　//ナビゲーションバーの色を変更するクラスを付加する。

      $('header').toggleClass('header-onclick');
　　　//ヘッダーの幅を調整するクラスを付加する。
    });

【おまけ機能】スクロールするとヘッダーの幅が縮まるようにする

こちらの処理もjQueryを使用しています。scrollTop()で現在のスクロール位置を取得し、80を超えた時にヘッダー要素にクラスを付加してやります。

$(window).scroll(function(){
//スクロールが起こった時のアクション

  if($(window).scrollTop() > 80){
　//スクロールの位置が80以上の時に以下の要素にクラスを付加し、ヘッダーの幅とそこに含まれる要素を縮める。
  $('header').addClass('header-scroll');
  $('header h1').addClass('header-scroll-h1');
  $('header ul').addClass('header-scroll-ul');
  $('.nav-bar').addClass('header-scroll-nav');
  }else{

　//スクロールの位置が80以下の時の処理↓（元に戻す）。
    $('header').removeClass('header-scroll');
    $('header h1').removeClass('header-scroll-h1');
    $('header ul').removeClass('header-scroll-ul');
    $('.nav-bar').removeClass('header-scroll-nav');