【JS】jQueryとCSSで作る「ハンバーガーメニュー」を少しリニューアルしてみました

2019/10/12 2019/12/26

以前作成した『jQueryとCSSで作る「ハンバーガーメニュー」』に少し手を入れて、よりスタイリッシュ（？）に使えるものにしてみましたので、ご紹介したいと思います。

ハンバーガーメニューの機能追加

主に以下のことに対して対応してみました。

画面左からメニューをスライドさせる
メニュー内容を増やしてスクロールさせる
メニューをスクロールしてもメインブロックは固定する

上からロールダウンしてくるのも良いですが、今回の版では画面左からメニューを出現させることとしました。
なお、スクリプト（CSS）の設定でメニューを右から出すことも可能です。
ただし右から出す場合はハンバーガー（メニュー）の位置を調整する必要があると思いますが、今回は触れませんのであしからず。

ひとまず、サンプルデモはこちら。

PCでの操作ですが、動画も作成してみました。

右肩にあるハンバーガーメニューをクリック（タップ）することで、画面左側から20個の内容があるメニューがせり出してきます。

上下のスクロールに対応し全てのコンテンツを表示させるのと、メニューの一番下までスクロールさせた状態でさらにスクロールさせた場合の前の版ですとメインコンテンツがスクロールされてしまいましたが、今回はメインコンテンツはスクロールしないようにしています。

なお、PCで見ている場合にブラウザの横幅によって背景色が変わるようになっていますが、これは単にブレイクポイントを調整していた時の設定を消し忘れているだけです（苦笑）

ハンバーガーメニューの各種スクリプト

では恒例のスクリプト紹介です。

jQuery読み込み

まず、ヘッダでjQueryを読み込んでおきます。
バージョンは任意のもので構いません。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

1	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

（メニュー用）HTML

左からせり出すメニュー本体のHTMLです。
スクロールさせるために、あえてメニュー項目を20個作ってみました。

今回はメニュー内にタイトル用にヘッダーを追加しています。

<nav class="globalMenuSp">
    <div class="menuHeader">
        メニュー内のヘッダ
    </div>
    <ul>
        <li><a href="#">Menu1</a></li>
        <li><a href="#">Menu2</a></li>
        <li><a href="#">Menu3</a></li>
        <li><a href="#">Menu4</a></li>
        <li><a href="#">Menu5</a></li>
        <li><a href="#">Menu6</a></li>
        <li><a href="#">Menu7</a></li>
        <li><a href="#">Menu8</a></li>
        <li><a href="#">Menu9</a></li>
        <li><a href="#">Menu10</a></li>
        <li><a href="#">Menu11</a></li>
        <li><a href="#">Menu12</a></li>
        <li><a href="#">Menu13</a></li>
        <li><a href="#">Menu14</a></li>
        <li><a href="#">Menu15</a></li>
        <li><a href="#">Menu16</a></li>
        <li><a href="#">Menu17</a></li>
        <li><a href="#">Menu18</a></li>
        <li><a href="#">Menu19</a></li>
        <li><a href="#">Menu20</a></li>
    </ul>
</nav>

メニュー内のヘッダ

</div>

<ul>

</ul>

</nav>

CSS

（グローバルナビ用）CSS

左からせり出してくるメニュー用のCSS。
装飾と、メニューそのものを見えない位置に配置する内容となっています。

/* グルーバルメニュー */
nav.globalMenuSp {
    position: fixed;
    z-index: 2;
    top: 0;
    left: 0;
    height: 100%;
    overflow: auto;
    background: #eee;
    color: #000;
    text-align: center;
    transform: translateX(-100%);
    transition: all 0.6s;
    width: 70%;
    -webkit-overflow-scrolling: touch;
}

nav.globalMenuSp ul {
    background: #ccc;
    margin: 0 auto;
    padding: 0;
    width: 100%;
}

nav.globalMenuSp ul li {
    font-size: 1.1em;
    list-style-type: none;
    padding: 0;
    width: 100%;
    border-bottom: 1px dotted #333;
}

/* 最後は点線のラインを描かない */
nav.globalMenuSp ul li:last-child {
    padding-bottom: 0;
    border-bottom: none;
}

nav.globalMenuSp ul li a {
    display: block;
    color: #000;
    padding: 1em 0;
}

/* このクラスを、jQueryで付与・削除する */
nav.globalMenuSp.active {
    transform: translateX(0%);
}

/* メニュー内ヘッダ */
nav.globalMenuSp .menuHeader {
    background: #ffdb99;
    padding: 1.5em 0;
}

/* メニューだけをスクロールさせる工夫 */
.overflowHidden {
    overflow: hidden;
}

/* グルーバルメニュー */

nav.globalMenuSp {

position: fixed;

z-index: 2;

top: 0;

left: 0;

height: 100%;

overflow: auto;

background: #eee;

color: #000;

text-align: center;

transform: translateX(-100%);

transition: all 0.6s;

width: 70%;

-webkit-overflow-scrolling: touch;

}

nav.globalMenuSp ul {

background: #ccc;

margin: 0 auto;

padding: 0;

width: 100%;

}

nav.globalMenuSp ul li {

font-size: 1.1em;

list-style-type: none;

padding: 0;

width: 100%;

border-bottom: 1px dotted #333;

}

/* 最後は点線のラインを描かない */

nav.globalMenuSp ul li:last-child {

padding-bottom: 0;

border-bottom: none;

}

nav.globalMenuSp ul li a {

display: block;

color: #000;

padding: 1em 0;

}

/* このクラスを、jQueryで付与・削除する */

nav.globalMenuSp.active {

transform: translateX(0%);

}

/* メニュー内ヘッダ */

nav.globalMenuSp .menuHeader {

background: #ffdb99;

padding: 1.5em 0;

}

/* メニューだけをスクロールさせる工夫 */

.overflowHidden {

overflow: hidden;

}

（ハンバーガー用）CSS

.navToggle {
    display: block;
    position: fixed;    /* bodyに対しての絶対位置指定 */
    right: 25px;
    top: 12px;
    width: 42px;
    height: 51px;
    cursor: pointer;
    z-index: 3;
    background: #666;
    border: 1px solid #fff;
    text-align: center;
}

.navToggle span {
    display: block;
    position: absolute;    /* .navToggleに対して */
    width: 30px;
    border-bottom: solid 3px #eee;
    -webkit-transition: .35s ease-in-out;
    -moz-transition: .35s ease-in-out;
    transition: .35s ease-in-out;
    left: 6px;
}

.navToggle span:nth-child(1) {
    top: 9px;
}

.navToggle span:nth-child(2) {
    top: 18px;
}

.navToggle span:nth-child(3) {
    top: 27px;
}

.navToggle span:nth-child(4) {
    border: none;
    color: #eee;
    font-size: 9px;
    font-weight: bold;
    top: 34px;
}

.navToggle {

display: block;

position: fixed; /* bodyに対しての絶対位置指定 */

right: 25px;

top: 12px;

width: 42px;

height: 51px;

cursor: pointer;

z-index: 3;

background: #666;

border: 1px solid #fff;

text-align: center;

}

.navToggle span {

display: block;

position: absolute; /* .navToggleに対して */

width: 30px;

border-bottom: solid 3px #eee;

-webkit-transition: .35s ease-in-out;

-moz-transition: .35s ease-in-out;

transition: .35s ease-in-out;

left: 6px;

}

.navToggle span:nth-child(1) {

top: 9px;

}

.navToggle span:nth-child(2) {

top: 18px;

}

.navToggle span:nth-child(3) {

top: 27px;

}

.navToggle span:nth-child(4) {

border: none;

color: #eee;

font-size: 9px;

font-weight: bold;

top: 34px;

}

（タップした後）CSS

タップした後の「X」の形とするためのCSSです。
transformプロパティを使用します。

/* 最初のspanをマイナス45度に */
.navToggle.active span:nth-child(1) {
    top: 18px;
    left: 6px;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

/* 2番目と3番目のspanを45度に */
.navToggle.active span:nth-child(2),
.navToggle.active span:nth-child(3) {
    top: 18px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
}

/* 最初のspanをマイナス45度に */

.navToggle.active span:nth-child(1) {

top: 18px;

left: 6px;

-webkit-transform: rotate(-45deg);

-moz-transform: rotate(-45deg);

transform: rotate(-45deg);

}

/* 2番目と3番目のspanを45度に */

.navToggle.active span:nth-child(2),

.navToggle.active span:nth-child(3) {

top: 18px;

-webkit-transform: rotate(45deg);

-moz-transform: rotate(45deg);

transform: rotate(45deg);

}

jQuery最高の教科書

created by Rinker

Javascript（jQuery）

ハンバーガーメニューをタップすることでactiveクラスを付与/削除する
メニューを表示させた時に、body に対して overflow:hidden を付与し、不要なスクロールをさせない

ということをするjQueryのスクリプトです。

$(function() {
    $('.navToggle').click(function() {
        $(this).toggleClass('active');

        if ($(this).hasClass('active')) {
            $('.globalMenuSp').addClass('active');
            $('body').addClass('overflowHidden');
        } else {
            $('.globalMenuSp').removeClass('active');
            $('body').removeClass('overflowHidden');
        }
    });
});

$(function() {

$('.navToggle').click(function() {

$(this).toggleClass('active');

if ($(this).hasClass('active')) {

$('.globalMenuSp').addClass('active');

$('body').addClass('overflowHidden');

} else {

$('.globalMenuSp').removeClass('active');

$('body').removeClass('overflowHidden');

}

});

以上で、jQueryとCSSで作るハンバーガーメニューの出来上がりです。

デモ

デモはこちら。

【JS】jQueryとCSSで作る「ハンバーガーメニュー」を少しリニューアルしてみました

ハンバーガーメニューの機能追加

ハンバーガーメニューの各種スクリプト

jQuery読み込み

（メニュー用）HTML

CSS

（グローバルナビ用）CSS

（ハンバーガー用）CSS

（タップした後）CSS

Javascript（jQuery）

デモ

関連する投稿

【DIY】2x4や1x4など、SPF材サイズ早見表 (565,365)

【知識】電話番号の+81の意味と固定電話・携帯電話番号の書き方 (279,933)

TPPやLCCなど、時事や普段使っている「アルファベット略語」を集めてみた (258,340)

【歴史】江戸幕府歴代将軍一覧 (143,650)

【知識】牛肉の部位「おっぱい」は本当に乳房なのかが気になったので調べてみた (133,717)

【Excel】ダブルクォーテーションでデータを囲んだCSVファイルの作成方法 (131,746)