jQueryでスマホ向けドロップダウンメニューを作る #JavaScript

はじめに

スマホでよく見るようなドロップダウンメニューを作る。
jQueryを使えば簡単に実装することができる。

HTML

以下のコードを<head>に書いてjQueryを読み込む

head

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>

<header>は画面上部に表示されるメニューバー、<header>内部の<nav>がドロップダウンメニューの中身になる。
<ul>がメニューのリスト。<li>がそれぞれのメニューを示している。
#menu_buttonを押すと<ul>が開閉するように実装する。
<main>はメインコンテンツを示す。

body

<header>
    <div class="menu_button"><span>menu</span></div>
    <nav class="nav">
        <ul>
            <li>メニュー１</li>
            <li>メニュー２</li>
            <li>メニュー３</li>
        </ul>
    </nav>
</header>
<main>
    <div style="width: 50%; height:1000px; background-color: #aaa; margin: 0 auto;">
        メイン
    </div>
</main>

メニューの基本構造

<hearder>の高さを定めてその分だけ<nav>と<main>を下に配置する。
以下の例ではheightを40pxにしている。
<nav>と<main>のpositionをabsoluteに設定して、topをそれぞれ100%, 40pxとした。
<nav>は<header>の内部にあるので100%と設定すれば<header>の下に配置される。
また常にメニューバーを表示させるためにpositionをfixed、z-indexを大きな値である1000にしている。

基本構造

header {
    height: 40px;
    z-index: 1000;
    position: fixed;
}
header nav {
    position: absolute;
    top: 100%;
}
main {
    position: absolute;
    top: 40px;
}

デザイン

デザインは以下のとおり。
これでドロップダウンメニューが開かれた状態が表示される。

デザイン

header {
    background-color: #111;
    color: white;
    width: 100%;
}
header .menu_button {
    border-left: solid 1px white;
    float: right;
    width: 70px;
    height: 100%;
    text-align: center;
}
header .menu_button span {
    line-height: 40px;
}
header nav {
    background-color: #111;
    color: white;
    width: 100%;
}
header nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
header nav ul li:first-child {
    border-top: solid 1px white;
}
header nav ul li {
    border-bottom: dotted 1px white;
    text-align: center;
    padding: 1em;
}
main {
    width: 100%;
}

jQueryによるドロップダウンの実装

初期設定として.navのdisplayをnoneにしてメニューが閉じた状態にする。
.menu_buttonのクリック時に$(".nav").slideToggle()が実行されるようにして完成。

ドロップダウン

$(function() {
    $(".nav").css("display","none");
    $(".menu_button").on("click", function() {
        $(".nav").slideToggle();
    });
});