タグ: ウェブサイト作成

トップページ > 携帯端末関連 > スマホサイトで用いられるハンバーガーメニューの作成方法とサンプル

スマホサイトで用いられるハンバーガーメニューの作成方法とサンプル

[初回公開] 2010年11月06日

スマートフォンやタブレットなど小型の携帯端末向けのウェブサイトは画面を縦向きで利用されることが多いため、サイトのデザインと操作性も縦方向で利用されることを想定して横方向（水平方向）に画像を並べたり配置することを避けるが、縦にスクロールせずとも横方向に展開するハンバーガーメニューの作成方法とサンプルについて紹介する。

1. スマホ向けサイトで横から出るメニューを用いるメリット

スマホやタブレットなど携帯端末向けのウェブサイトで横からメニューを出すメリットととしては、縦にスクロールせずともリンクや関連する画像を表示できることである。
画面の横幅が狭いスマホ向けサイトでは文章や画像を縦に並べるデザインが多く、画面内に多くの情報を同時に表示させづらいのでどうしても伝えたい情報以外のリンクなどは画面下部に配置しがちである。
しかし、利用者は知りたい情報が得られるとページを閉じるなどして画面下までスクロールして全てを見るわけではないため、要所要所でタップすると横から出てくるメニュー欄等を用いるとスクロールせずとも情報を伝えることができる。

2. ハンバーガーメニューとは

ハンバーガーメニューとは、スマホやタブレット向けにデザインされたウェブサイトの画面上部に見かけることが多い、三本線のアイコンをタップして表示されるメニュー欄のことである。
横線が重なっている様子がハンバーガーに似ていることから名づけられており、三本線以外のデザインでも画面の横から出てくるメニューに対して呼ばれることが多い。

3. ハンバーガーメニューの作成方法

ハンバーガーメニューは主に次の 5 つの工程でを作成することができる。
今回は三本線のアイコンは画像ではなく CSS（スタイルシート）でデザインすることとし、アイコンをタップして横からメニューが出る動作は jQuery を利用する。
下図は今回用意したサンプルでハンバーガーメニューを表示する前の状態である。
三本線のアイコン以外は何も記載していないので真っ白だが、右上にアイコンがあるのがわかる。

次に、三本線のハンバーガーメニューのアイコンをタップした状態が下図である。
背景色がグレーのメニューが表示されるとともに、アイコンが×マークに代わっているのがわかる。

3-1. ページ本体とメニューの HTML を用意

最初にハンバーガーメニューの HTML をアイコンを設置したい箇所へ下記のように記載する。
menuIco がある div タグが三本線のハンバーガーメニューのアイコン部分になり、span しかないが後から CSS でデザインする。
また、mainMenu がある nav タグがアイコンをタップした際に横から表示されるメニュー欄となる。
今回はリストタグを利用しているが、a タグだけや画像など表示させたい内容を記載する。

<div class="menuIco">
    <span></span>
    <span></span>
    <span></span>
</div>
<nav class="mainMenu">
    <ul>
        <li><a href="#">1.menu</a></li>
        <li><a href="#">2.menu</a></li>
        <li><a href="#">3.menu</a></li>
    </ul>
</nav>

3-2. ページ本体側の CSS を用意

次にハンバーガーメニューのアイコンとなる menuIco の装飾と、メニュー欄となる mainMenu はページ表示時は非表示になるように CSS を記載する。

.menuIco {
    display : block;
    position: fixed;
    z-index : 3;
    right : 20px;
    top   : 20px;
    width : 42px;
    height: 42px;
    cursor: pointer;
    text-align: center;
}
.menuIco span {
    display : block;
    position: absolute;
    width   : 30px;
    height  : 2px ;
    left    : 6px;
    background : #BBBBBB;
    -webkit-transition: 0.3s ease-in-out;
    -moz-transition   : 0.3s ease-in-out;
    transition        : 0.3s ease-in-out;
}
.menuIco span:nth-child(1) { top: 10px; }
.menuIco span:nth-child(2) { top: 20px; }
.menuIco span:nth-child(3) { top: 30px; }

nav.mainMenu {
    position: fixed;
    z-index : 2;
    top  : 0;
    left : 0;
    color: #fff;
    background: #555;
    text-align: center;
    width: 100%;
    opacity: 0;
    display: none;
    transition: opacity .6s ease, visibility .6s ease;
}

3-3. メニュー側の CSS を用意

続いて、三本線のハンバーガーメニューをタップして表示されるメニュー欄の装飾を次の CSS で行う。
menuIco も指定しているが、これはメニューが表示している間は三本線ではなく×アイコンにするようにしている。

.menuIco.active span:nth-child(1) {
    top : 16px;
    left: 6px;
    background : #fff;
    -webkit-transform: rotate(-45deg);
    -moz-transform   : rotate(-45deg);
    transform        : rotate(-45deg);
}
.menuIco.active span:nth-child(2),
.menuIco.active span:nth-child(3) {
    top: 16px;
    background : #fff;
    -webkit-transform: rotate(45deg);
    -moz-transform   : rotate(45deg);
    transform        : rotate(45deg);
}

nav.mainMenu ul {
    margin: 0 auto;
    padding: 0;
    width: 100%;
}
nav.mainMenu ul li {
    list-style-type: none;
    padding: 0;
    width: 100%;
    transition: .4s all;
}
nav.mainMenu ul li:last-child {
    padding-bottom: 0;
}
nav.mainMenu ul li:hover{
    background : #222;
}
nav.mainMenu ul li a {
    display: block;
    color: #fff;
    padding: 1em 0;
    text-decoration :none;
}

nav.mainMenu.active {
    opacity: 100;
    display: block;
}

3-4. アイコンタップ時の JavaScript を用意

最後に、ハンバーガーメニューを記載した HTML にアイコンをタップしたときにメニューが動的に表示されるようにする JavaScript を次のように記載する。
別途 jQuery が必要になるため事前に入手して HTML ファイルと同じ階層に配置するか、http から始まる URL を指定してインターネット経由で jQuery を読み込むようにする。

<script src="jquery-3.4.1.min.js"></script>
<script>
$( function() {
    $('.menuIco').click(function() {
        $(this).toggleClass('active');
        if ($(this).hasClass('active')) {
            $('.mainMenu').addClass('active');
        } else {
            $('.mainMenu').removeClass('active');
        }
    });
});
</script>

関連記事