なるの備忘録

エンジニアリングそして営業ができるエンジニアに向けて、日々学んだことをアウトプットしていきます。

ボタンを押したら画面外からスライドして表示されるメニューの作り方と注意点

ボタンを押したら画面外からスライドして表示されるメニューの作り方

ボタンを押すと表示されるメニューを簡単に作っていきます。
動作イメージは以下。

画面に表示されるボタンを押すと…
f:id:narunaru7638:20190504001751p:plain

上からにゅ～っとメニューが現れます。
再びボタンを押すと閉じます。
f:id:narunaru7638:20190504001803p:plain

論よりコード

HTML

<!DOCTYPE html>
<html lang="ja">
    <head>
        <link rel="stylesheet" href="style.css">        
    </head>
    <body>
        <div class="cover js-cover">
            <div class="list">test1</div>
            <div class="list">test2</div>
            <div class="list">test3</div>
            <div class="list">test4</div>
            <div class="list">test5</div>            
        </div>
        <div class="btn js-toggle-cover">ボタン</div>    
    </body>
    <script
            src="https://code.jquery.com/jquery-3.3.1.min.js"
            integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
            crossorigin="anonymous"></script>
    <script src="app.js"></script>
</html>

CSS

.cover{
    width: 100vw;
    height: 100vh;
    background-color: black;
    opacity: 0.5;
    position: fixed;
    top:0;
    z-index: 2;
    /* ボタンを押す前は見えないようにメニューは画面外にずらす */
    transform: translateY(-100%);
    transition: .5s;
}

.list{
    font-size: 100px;
    color: red;
    text-align: center;
}

/*ボタンをクリックするとactiveクラスが付与される*/
.active{
    /* Y方向に要素を移動させる */
    transform: translateY(0%);
    transition: .5s;
}

.btn{
    cursor: pointer;
    font-size: 100px;
    border: 1px solid black;
    background-color: white;
    position: fixed;
    z-index: 3;
    top: 50%;
}

JavaScript

$('.js-toggle-cover').on('click', function () {
    $('.js-cover').toggleClass('active');
});

まとめ

・メニューの画面を作っておき、transform: translate() ;を使い、画面外に表示しておく。
・ボタンがクリックされたら、JSでクラスを付与し、画面に表示されるようにCSSを適用する。

注意点

下記のように、画面サイズの縦方向が小さくなってしまうと画面上部から、メニューの要素がはみ出してきてしまいます。
画面サイズと同じだけメニューの要素はずらして画面外に表示していますが、画面が小さくなると十分な量ずらすことができず、その分メニューの要素がはみ出して表示されてしまいます。
f:id:narunaru7638:20190504001845p:plain

なのでメニューを移動させる方向はヨコ方向（X方向）がオススメです。
特にスマートフォンのソフトキーボード(文字入力しようとしたときに表示されるキーボード)によって、表示画面が小さくなったときに上記の減少が起こりやすいです。
（ソフトキーボード利用時の挙動はブラウザの開発ツールでは確認できないので気が付かないことも多いと思います。）

追伸

Twitterでコメントを頂いたのですが、slideToggleを使うのが良さそう。（特に縦方向のアニメーションで表示させたい場合）
以下、コード(HTMLは特に変更なし)

CSS

.cover{
    width: 100vw;
    height: 100vh;
    background-color: black;
    opacity: 0.5;
    position: fixed;
    top:0;
    z-index: 2;
}

.list{
    font-size: 100px;
    color: red;
    text-align: center;
}

.btn{
    cursor: pointer;
    font-size: 100px;
    border: 1px solid black;
    background-color: white;
    position: fixed;
    z-index: 3;
    top: 50%;
}

JavaScript

$('.js-toggle-cover').on('click', function () {
    $('.js-cover').slideToggle('slow');
});

多少アニメーションの差異はありますが、特に気にするほどでなければ、こちらの実装のほうが良さそうですね。(特に縦方向のアニメーションの場合)