ハンバーガーメニューの実装

今回の作業

トップ・沿革・事業紹介などのメニューを、スマートフォンなどの幅が狭い端末では常時表示ではなくハンバーガーメニューをタップして開いたときのみ表示するように実装します。

配布データのダウンロード

配布データを以下からダウンロードしてください。
goo.gl/TuexY4

メニューを縦並びにする

ナビゲーションメニューをハンバーガーにするためには、メニューを縦並びにしてトグルボタンで表示をオン・オフできるようにしていきます。まずは、ブラウザ画面の横幅が小さいときにメニューを縦並びにします。
コード1 style.css 23~52行目 /* ナビゲーション */ ~ } をまるごと削除
コード2 style.css 277行目 @media (min-width: 768px) { の下に追加

.menu ul {
    margin: 0;
    padding: 0;
    list-style: none
}
.menu li a {
    display: block;
    padding: 10px 15px;
    color: #000000;
    font-size: 14px;
    text-decoration: none
}
.menu li a:hover {
    background-color: #eeeeee
}
.menu ul:after {
    content: "";
    display: block;
    clear: both
}
.menu li {
    float: left;
    width: auto
}

1. アレンジ前の確認

これまでのナビゲーションメニューでは、ブラウザ画面の横幅が768pxのブレイクポイントよりも小さいときにはサイト名の下に配置されます。
この時メニューを縦並びの形にすれば、そのままハンバーガーメニューとして使うことができます。

2. メニューを縦並びにする

768pxのブレイクポイントよりも小さな画面ではメニューを縦並びにします。そこで、 @media (メディアクエリ) の外に記述しているナビゲーションメニューの設定を、 @media (min-width: 768px) {~} の中に記述します。これで、767px以下の画面ではナビゲーションメニューにCSSが適用されていない状態になります。
縦並びになったメニュー

3. 縦並びのデザインを整える

縦並び用のメニューとしてデザインを整えます。
コード3 258~273行目 /* ########### 599px以下 ########### */ ~ } の後に追加

/* ########### 767px以下 ########### */
@media (max-width: 767px) {
    /* ナビゲーションメニュー(縦並び) */
    .menu ul {
        margin: 0;
        padding: 0;
        list-style: none
    }
    .menu li a {
        display: block;
        padding: 5px;
        color: #000000;
        font-size: 14px;
        text-decoration: none
    }
    .menu li a:hover {
        background-color: #eeeeee
    }
}

ハンバーガーボタンを作成する

ナビゲーションメニューの表示をオン・オフするハンバーガーメニューを作成します。

1. ボタンを用意する

ハンバーガーボタンとして機能させるボタンを用意します。そこで、次のように <button> の設定を追加します。
ボタンの中には MENU と表示するようにしています。
また、jQueryで機能を設定しやすいように、ボタンとナビゲーションメニューにはIDを指定しておきます。
ここでは、 <button>menubtn<nav>menu とIDを指定しています。
コード4 sample.html 23行目 <nav class="menu"> を置き換え

<button type="button" id="menubtn">
MENU
</button>
<nav class="menu" id="menu">

MEMO jQueryとは
jQuery (jquery.com)はJavaScriptの煩雑な設定をシンプルに記述できるようにするライブラリです。
トグルボタンの機能も簡単な記述で実現することができます。

2. ナビゲーションメニューを非表示にする

コード5 style.css 277行目 /* ナビゲーションメニュー(縦並び) */ の下に追加

#menu {
    display: none
}

768pxのブレイクポイントよりも小さい画面の場合、初期状態ではナビゲーションメニューを非表示にしておきます。
そこで、 <nav id="menu">displaynone と指定します。

3. ハンバーガーボタンとしてトグルを機能させる

jQueryでハンバーガーボタンの機能を設定するため、次のように <script> の設定を追加します。
ここでは <button id="menubtn"> をクリックしたときに、 <nav id="menu"> の表示・非表示をスライドアニメーションで切り替えるように指定します。
コード6 sample.html 10行目 <link rel="stylesheet" href="style.css"> の下に追加

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
$(function(){
    $("#menubtn").click(function(){
        $("#menu").slideToggle();
    });
});
</script>


ボタンをクリックすると、ナビゲーションメニューの表示・非表示が切り替わることが確認できます。

4. 大きい画面ではハンバーガーボタンを非表示にする

768pxのブレイクポイントよりも大きい画面ではハンバーガーボタンを非表示にします。そこで、次のように <button id="menubtn>displaynone と指定します。
また、ナビゲーションメニューが非表示となるのを防ぐため、 !important をつけた形で <nav>display
blockと指定しておきます。
コード5 style.css 303行目 @media (min-width: 768px) { の下に追加

/* トグルボタン */
#menubtn {
    display: none
}
/* ナビゲーション */
#menu {
    display: block !important
}

MEMO
ハンバーガーボタンでナビゲーションメニューを非表示にしてブラウザ画面を大きくすると、ナビゲーションメニューは非表示のままとなってしまいます。これを防ぎ、大きい画面で常に表示するには、 display: block !important の指定が必要です。

ハンバーガーボタンのデザインと表示位置を調整する

1. 3本線のアイコンを表示する

ハンバーガーボタンはコンパクトなデザインにするため、3本線のアイコンを表示した形にデザインしていきます。
アイコンはフォント「Font Awesome」で表示するため、次のように <i></i> を追加し、クラス名を fa fa-bars と指定します。
コード6 sample.html 32行目 MENU を置き換え

<i class="fa fa-bars"></i><span>MENU</span>
MENU

ハンバーガーボタン出現
また、 MENU という文字は非表示にするため、 <span> でマークアップしておきます。

2. 文字を隠す

MENU という文字を隠して非表示にします。そこで、 <span>displayinline-blocktext-indent-9999px と指定します。 text-indent は1行目の字下げを指定するもので、文字列を画面の外に追いやることで非表示にしています。
コード7 style.css 276行目 @media (max-width: 767px) { の下に追加

/* ハンバーガーボタン */
#menubtn span {
    display: inline-block;
    text-indent: -9999px
}

3. アイコンの色と大きさを調整する

アイコンの色と大きさを調整します。ここでは <i>color で 色をグレー (#888888)に、 font-size で大きさを18ピクセルに指定して、アイコンを大きくします。
コード8 style.css 278行目 /* ハンバーガーボタン */ の下に追加

#menubtn i {
    color: #888888;
    font-size: 18px
}

4. ボタンのデザインを指定する

標準のボタンのデザインを上書きし、シンプルなデザインにします。ここでは太さ1ピクセルのグレーの罫線で囲むため、 <button id="menubtn>bordersolid 1px #aaaaaa と指定し、 border-radius で角丸の半径を5ピクセルに指定します。
また、background-color で背景色を白色(#ffffff)に、 padding でボタン内の余白サイズを上下6ピクセル、左右12ピクセルに指定します。
コード9 style.css 278行目 /* ハンバーガーボタン */ の下に追加

#menubtn {
    padding: 6px 12px;
    border: solid 1px #aaaaaa;
    border-radius: 5px;
    background-color: #ffffff
}

5. ボタンの表示位置を指定する

ボタンの表示位置を指定します。ここではページの右上に表示するため、 positionabsolute と指定し、上( top )から20ピクセル、 右( right )から15ピクセルの位置に表示するように指定します。
コード10 style.css 280~285行目 #menubtn { ~ } を置き換え

#menubtn {
    padding: 6px 12px;
    border: solid 1px #aaaaaa;
    border-radius: 5px;
    background-color: #ffffff;
    position: absolute;
    top: 20px;
    right: 15px
}

念のため、新しい表示位置でもボタンが機能するかどうか確認しましょう。
この画像のとおりなら問題なし

6. カーソルの形状を指定する

ボタンにカーソルを重ねると、標準では矢印のアイコンとなります。ここでは指のアイコンに変更するため、 cursorpointer と指定します。
コード11 style.css 280~288行目 #menubtn { ~ } を置き換え

#menubtn {
    padding: 6px 12px;
    border: solid 1px #aaaaaa;
    border-radius: 5px;
    background-color: #ffffff;
    position: absolute;
    top: 20px;
    right: 15px;
    cursor: pointer
}

7. カーソルを重ねたときのボタンのデザインを指定する

カーソルを重ねたときのボタンのデザインを指定します。ここでは <button id="menubtn>:hoverbackground-color で背景色がグレー(#dddddd)になるようにしています。
コード12 style.css 280~289行目 #menubtn { ~ } の下に追加

#menubtn:hover {
    background-color: #dddddd
}

8. クリックしたときに表示される青色の枠線を削除する

Chromeではボタンをクリックすると青色の枠線が表示されます。これを削除するため、 <button id="menubtn">:focusoutlinenone と指定します。
コード13 style.css 291~293行目 #menubtn:hover { ~ } の下に追加

#menubtn:focus {
    outline: none
}

9. レスポンシブWebデザインの調整を行う

最後に、レスポンシブWebデザインの調整を行います。
実際のデバイスのブラウザ画面の横幅で表示を確認すると、iPhoneではサイト名にボタンが重なった表示になっています。
重なりを防ぐため、iPhoneではサイト名の画像を小さくします。
そこで、 <div class="site"> 内の <img> の横幅( width )を225ピクセルに、高さ( height )を自動調整 ( auto )するように指定します。なお、この指定はブラウザ画面の横幅が359ピクセルより小さいときに適用するため、 @media (max-width: 359px) {~} の中に記述します。
コード14 style.css 254~256行目 .box6-1, .box6-2, .box6-3 { ~ } の下に追加

/* ########### 359px以下 ########### */
@media (max-width: 359px) {
    /* サイト名 */
    .site img {
        width: 225px;
        height: auto
    }
}

小さくなってハンバーガーと重ならなくなる
これで完成です。

カテゴリー: WEB DESIGN 2018-2019 パーマリンク