さぁ!検索しよう!

JavaScriptの真偽値で、モバイルでの表示で使われるスライドメニューの開閉動作を行なう方法です。

DEMO

ハンバーガーアイコンを押すとメニューが開きます。

HTML

HTMLは開閉させるボタン#btnとスライドするメニュー#menuで構成されています。

<div class="container">
    <header id="header" class="header">
        <nav id="btn" class="btn">
            <i class="fa fa-bars" aria-hidden="true"></i>
        </nav>
    </header>
    <aside id="menu" class="menu">
        <ul id="list" class="menu-list">
            <li class="menu-item">Home</li>
            <li class="menu-item">About</li>
            <li class="menu-item">Contact</li>
            <li class="menu-item">Categories</li>
            <li class="menu-item">Tags</li>
        </ul>
    </aside>
</div>

CSS

body {
    background: #eee;
    margin: 0;
}

.header {
    background: #333;
    padding: 5px;
}

.menu {
    display: inline-block;
    -webkit-transition: all 0.2s ease;
    transition: all 0.5s ease;
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
}

.menu-list {
    background: #333;
    list-style: none;
    margin: 0;
    padding: 0;
}

.menu-item {
    border-bottom: 1px solid #555;
    color: #aaa;
    padding: 10px 15px;
}

.menu-item:last-child {
    border: none;
}

.btn {
    color: #777;
    cursor: pointer;
    height: 44px;
    line-height: 44px;
    text-align: center;
    width: 44px;
}

#menu.on {
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
}

CSSでは以下のことを行なっています。

メニューの初期状態

メニュー.menuは、初期状態では元の位置からtransform: translateX(-100%);で左端へ隠しています。

.menu {
    transform: translateX(-100%);
}

メニューオープン時のスタイル

#menu.onは、メニュー’#menu’に.onクラスが追加されたときのスタイルです。.onクラスが追加されると、左端へ隠していたメニューがtransform: translateX(0%);で元の位置に戻ります。

#menu.on {
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
}

JavaScript

$(function() {
    var $menu = $('#menu'),
        $btn = $('#btn');
    var flag = false; //メニューが閉じている状態
    $btn.click(function() { //ボタンを押したときに
        if (!flag) { //メニューが閉じていれば
            $menu.addClass('on'); //メニューが開く
            flag = true; //メニューが開いている状態
        } else { //メニューが開いていれば
            $menu.removeClass('on'); //メニューが閉じる
            flag = false; //メニューが閉じている状態
        }
    });
});

JavaScriptでは以下のことを行なっています。

メニューが開いているか閉じているかを示す変数

var flag = false;は、メニューが閉じている状態であればfalse、開いている状態であればtrueとなります。なので、初期状態ではfalseとしています。

メニューを開くべきか閉じるべきかを判定

ボタンがクリックされたときに、!flag、つまりflagfalseであればメニュー#menuonクラスが付与され、メニューが開きます。更に、メニューが開いたので、flagをメニューが開いた状態を示すflag = trueに切り替えます。

if (!flag) { //メニューが閉じていれば
        $menu.addClass('on'); //メニューが開く
        flag = true; //メニューが開いている状態
    }

逆に、メニューが開いた状態flag = trueで、再びボタンをクリックすると、if(!flag)の条件に一致しないことから、メニュー#menuに付与されていたonクラスが削除されます。更に、メニューが閉じたので、flagを閉じた状態を示すflag = false;に切り替えます。

else { //メニューが開いていれば
        $menu.removeClass('on'); //メニューが閉じる
        flag = false; //メニューが閉じている状態
    }

以上で、【JavaScript】真偽値でスライドメニューなどの開閉動作を行なう方法を終わります。