初めてでもできる！横から出てくるハンバーガーメニューの作り方

前回に続き、ハンバーガーメニューの作り方を解説していきます。

出来上がりイメージはこちら

今回は前回の動くハンバーガーメニューのボタンをクリックした時に、横から出現するメニューを作って行きたいと思います。

ハンバーガーメニューのボタンの仕組みがわからないという方は難しくないので、前回のこちらの記事を先に見ておいてくださいね。きっと理解も深まると思います。

３分でわかる！動くハンバーガーメニューボタンの作り方

ハンバーガーメニューのボタンの作り方と構造をとてもシンプルにでもしっかりと理解できる様に解説しました。これからコーディングを始めたい人やステップアップしたい人向けに丁寧に書いています。

では、早速いってみましょ〜。

HTMLに出現させたいメニューを作ろう！
JavaScriptでクラスの付け外しをしよう！
CSSでメニューの仕上げをしよう！

HTMLに出現させたいメニューを作ろう！

前回作成したHTMLに表示させたいメニューの部分を書いていきます。

この時、メニューが多いケースや増えていくことを想定して、画面からはみ出してしまった部分を指でスクロールして表示できるようにレイヤーを工夫しておく必要があります。

コードで書くとこんな感じになります。

    <!-- メニュー -->
    <nav id="gnav">
      <div id="gnav_list"><!--中にgnav_listレイヤーを作ると、長くてもスライドして表示出る -->
        <ul>
          <li><a href="#">HOME</a></li>
          <li><a href="#">ブロク記事</a></li>
          <li><a href="#">会社概要</a></li>
          <li><a href="#">サービス１</a></li>
          <li><a href="#">サービス２</a></li>
          <li><a href="#">サービス３</a></li>
          <li><a href="#">会社案内ダウンロード</a></li>
          <li><a href="#">採用情報</a></li>
          <li><a href="#">お問い合わせ</a></li>
        </ul>
      </div>
    </nav>

「gnav」というレイヤーの中に「gnav_list」というレイヤーをもう一つ作って置くと、メニューが増えたり、画面からしたにはみ出してしまってもスマホなら指でスライドして表示することができます。

後はこれにCSSで好きな感じにデザインして、JavaScriptで表示させるためのクラスを付け外しすればOK！というわけです。

JavaScriptでクラスの付け外しをしよう！

ハンバーガーメニューのボタンを作った時に書いたJavaScriptのコードに次のようにコードを追加します。

JavaScriptの読み込み方がわからない方はこちらをご覧ください。

３分でわかる！動くハンバーガーメニューボタンの作り方

やっていることはボタンを変化させるときと同じで、「gnav」や「gnav_list」にクラスを付けたり外したりしているだけで、アニメーションはCSS側に任せています。

ここでは「list_activ」というクラスの付け外しをJavaScriptで行う用に命令を書いています。

$(".openbtn").click(function () {
  //ボタンがクリックされたら
  $(this).toggleClass("active"); //.openbtnに.activeを付与
  $("#gnav").toggleClass("list_active"); //#gnaveに.list_activeを付与
});

$("#gnav a").click(function () {
  //リンクがクリックされたらクラスを削除する
  $(".openbtn").removeClass("active"); //.openbtnから.activeを削除
  $("#gnav").removeClass("list_active"); //#gnavから.list_activeも削除
});

更に今回は、メニューの中のリンクがクリックされたときにも付与されたクラスが削除される命令も一緒に書いています。

これは、メニューの中のリンクをクリックして他のページに飛ぶ場合には、メニューは自然に閉じて、ハンバーガーメニューも三本線に戻ってくれますが、同じページの中の指定の場所に飛ぶ、ページ内リンクの場合、メニューの中のリンクをクリックして移動した後もメニューが開いたままになって、非常にかっこ悪い状態になってしまうためです。

後はCSSでメニューをデザインして、クラスが付与される前と付与された後の状態を書いていくだけです。

メニューをどのように出現させたいかによって、クラスを付与する前と後の状態を工夫することで、いろんなパターンでメニューを出現させることができるようになるので、是非色々試して見てください！

ちなみにJavaScriptをサクッと勉強したいと思っている方におすすめなのがこちらの書籍です。

手元に一冊おいておくととっても便利ですね〜

リンク

CSSでメニューの仕上げをしよう！

レイアウトは皆さんで工夫していただくとして、今回はメニューを開いた時に縦横中央にメニューが表示されるようにレイアウトしています。

レイアウト用のCSSコードはこんな感じです。

メニューが増えて、画面からはみ出してしまった際には「#gnav ul」の中にある「top: 50%;」の数字を触って調整見てくださいね。

/* メニューのレイアウト */
nav ul {
  text-align: center;
  width: 100%;
}
nav ul li a {
  color: #333;
  padding: 10px;
  display: block;
  letter-spacing: 0.1em;
  font-weight: bold;
  font-size: 18px;
}
#gnav ul {
  position: absolute;
  z-index: 999;
  top: 50%; /* メニューが増えて画面からはみ出したらここを調整してみよう！ */
  left: 50%;
  transform: translate(-50%, -50%);
}

次にハンバーガーメニューがクリックされる前、つまりクラスが付与される前のCSSこ記述する

こんな感じ。

/* クラスが付与される前のレイアウト */
#gnav {
  position: fixed;
  z-index: 999;
  top: 0;
  right: -120%; /* 画面の右側に隠すためのコード */
  width: 100%;
  height: 100vh;
  background-color: #999;
  transition: all 0.6s;
}

今回は右側からスッと表示させたいので、メニューを画面の右側に隠しておきます。

「right:-120%」の部分が今回はそれにあたる。

この隠し方は１つの例として覚えておいて欲しいのですが、どんな隠し方をするかはあなた次第で、工夫するポイントになります。

最後にハンバーガーメニューがクリックされた後のCSSを書いたら完成になります。

/* クラスが付与された後のレイアウト */
#gnav.list_active #gnav_list {
  position: fixed;
  z-index: 999;
  width: 100%;
  height: 100vh;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
#gnav.list_active {
  right: 0;
}

時間があるときにでもパラメーターを色々触って、コードの特徴や役割に理解を深め、オリジナルのハンバーガーメニューを作って見ましょう！

リンク