Wikipedia Mobile のようなスライドメニューを簡単に作る

Wikipedia を iPhone で見ると、左上にメニューボタンがあって、それをタップすると左からメニューが表示される、まぁよくあるタイプですが、簡単に実装しましょう。

開閉の制御は jQuery、アニメーションはヒマなんで CSS3 でやりましょう。

HTML

<nav>
    <a href="#">link</a>
    <a href="#">link</a>
    <a href="#">link</a>
</nav>
<div id="content">
    <button id="btn_menu">menu</button>
</div>

Sass

nav {
    width: 200px;
    min-height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    background: rgb(180, 180, 180);

    a {display: block;}
}
#content {
    width: 100%;
    min-height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    background: rgb(220, 220, 220);
}
#content.menu_open, #content.menu_close {
    @include experimental('animation-duration', 0.5s, webkit);
    $animation-support: webkit;
    @include experimental('animation-iteration-count', 1);
}
#content.menu_open {
    @include experimental('animation-name', menu_on, webkit);
    left: 200px;
}
#content.menu_close {
    @include experimental('animation-name', menu_off, webkit);
    left: 0;
}
@-webkit-keyframes menu_on {0% {left: 0;} 100% {left: 200px;}}
@-webkit-keyframes menu_off {0% {left: 200px;} 100% {left: 0;}}

JavaScript

$(function() {
    $(document)
        .on('touchend', '#btn_menu', function() {
            var $content = $('#content');
            $content.attr('class', $content.hasClass('menu_open') ? 'menu_close' : 'menu_open');
        })
        .on('touchend', '.menu_open', function() {
            $('#content').attr('class', 'menu_close');
        })
    ;
});

結果

普段の状態

コンテンツ部分をタップすると元に戻る