2017 01 31

お気楽スマホメニュー

スマホメニューの実装で、これが一番簡単で調整しやすいのでは？と思ったものがあったので、メモしておく。

まず、きっかけになったのは、cssの transform: translate; が、絶対値(px指定)で使うものだとなんとなく思い込んでいたけれど、普通に％指定やviewport size(vhやvw)なんかも指定できたこと。

実装サンプル

See the Pen smartphone menu sample by hiroaki tachibana (@eedamame) on CodePen.

メニューを全画面に表示

とりあえずメニューになるボックスを作っていく。

.menu {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10000;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,.8);
}

全画面を覆うボックス出現。

<body>
<div class="contents">
...
</div>
<nav class="menu">
<ul>
    <li><a href="#menu01">メニュー1</a></li>
    <li><a href="#menu02">メニュー2</a></li>
    <li><a href="#menu03">メニュー3</a></li>
    <li><a href="#menu04">メニュー4</a></li>
</ul>
</nav>
</body>

こんな感じでメニューを足していくとメニューが画面からはみ出していくけど、fixed / height 100% で指定してるのでスクロールできない。なので、下記の感じで縦スクロールできるようにする。

.menu {
... 以下を追加 ...
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

ここまでで、全画面に表示されて縦スクロールできる箱ができたので、ナビゲーションとして、最初は隠れていてボタンタップで表示されるように調整。
ここでは、左から出てくるメニューを想定。

.menu {
... 以下を追加 ...
    transform: translateX(-100%); // ベンダープレフィックスは適宜
}

これで左に隠れて…

$(function() {
    $('#btn-menu').on('click', function() {
        $('body').addClass('is-menu-open');
    });
});

.menu {
... 以下を追加 ...
    transition: transform .5s ease;
    will-change: transform;
}
.is-menu-open .menu {
    transform: translateX(0);
}

これでメニュー(#btn-menu) をクリックするとアニメーションして出て来る。

もろもろ調整のお手軽さ

上から下に出てくるメニューの場合

transform: translate の方向をYにしてあげればOK。

.menu {
...
    transform: translateY(-100%);
}
.is-menu-open .menu {
    transform: translateY(0);
}

固定ヘッダにメニュー出すボタンがあって、固定ヘッダ以下のエリアにメニュー表示したい

上にヘッダ分の余白をいれてあげるだけ。

.menu {
/* z-indexの調整はいい感じにやる */
    padding-top: (固定ヘッダの高さ);
    box-sizing: border-box;
}

コンテンツレイヤーがスクロールしないようにロック

.is-menu-open {
    overflow: hidden;
    width: 100%;
    height: 100%;
}