css と簡単なjqueryでメニューを開閉する #CSS

久々に時間が取れたので、頭の整理も兼ねて書いてみることにしました。
フロントをメインに仕事をしていますが、cssをうまく利用すると簡単な動きなら表現できることを知ったので、その一例を書いてみます。
今回はヘッダーとかによくあるメニューを作ってみましょう。

目的

ボタンとリストを作成し、ボタンをクリックするとリストが開閉するようにcssとjqueryで調整する。

html

htmlはボタンとリストだけのシンプルなもの、reset.cssの適用をお忘れなく。

index.html

<html lang="jp">
    <head>
        <meta charset="utf-8"/>
        <link href="css/reset.css" type="text/css" rel="stylesheet" />
        <link href="css/open1.css" type="text/css" rel="stylesheet" />
        <script src="js/jquery-3.2.1.min.js" type="text/javascript"></script>
        <script src="js/open1.js" type="text/javascript"></script>
    </head>
    <body>
        <div class="btn"></div>
        <ul>
            <li>リスト１</li>
            <li>リスト２</li>
            <li>リスト３</li>
        </ul>
    </body>
</html>

css(scss)

scssでかくとこんな感じです。ポイントは2つあります。
一つ目はulです。height:0;overflow:hidden;をつけることで中身のliが見えなくなります。また、transitionでheightが変更された時に時間をかけて変化してくれます。
もう一つのポイントは&.on(body.on)です。
ここにボタンを押した時の変化を記述します。

open1.scss

body{
    width:100%;
    height:100%;
    background-color: rgb(220,220,220);
    .btn{
        width:100px;
        height:100px;
        background-color: blue;
    }
    ul{
        width:200px;
        height:0;
        overflow: hidden;
        transition: height 1s;
        li{
            width:100%;
            height:60px;
            border: 1px solid #000;
        }
    }
    &.on{
        background-color: rgb(150,150,150);
        .btn{
            background-color: red;
        }
        ul{
            height:186px;
        }
    }
}

jquery

かなりシンプルに書いています。ボタンを押した時に、bodyタグにクラスを足すor消すだけ。

open1.scss

$(function(){
    $(document).on("click", ".btn", function(){
        if(!$('body').hasClass('on')){
            $('body').addClass('on');
        }else{
            $('body').removeClass('on');
        }
    });
});

動作説明

ボタンを押すとjqueryが発火し、bodyにonのクラスを足します。
すると、cssのbody.onが適用され、下記の変化が起こります。

1.bodyの背景色が変更される
２.ボタンの背景色が変更される
3.ulの高さが変わったため、一秒間のアニメーションをへて変化

もう一度ボタンを押すと元に戻ります。
ね、簡単でしょ？

このように、ボタンのオンオフくらいのアニメーションならcssをメインにするとコード量が減り、jqueryの負担も軽くなります。複数の言語を組み合わせると面白いことが結構あるので、色々試してみるといいでしょう。
次はphpとjqueryを組み合したものを紹介できたらなと思います。