Web下からメニューを出すコード

概要

初心者による覚え書きです。
下からにゅるっとメニューが出てくるアニメーションの記述方法。
前回作成したボタンを使用して作成します。

コード

htmlに以下のようなnavigationを記述。

.html

<nav class="navigation">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Works</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</nav>

cssに書きを追記。普段、メニューは画面下へ隠しておく。

.css

.navigation {
    position:fixed;
    top: 100%;
    left: 0;
    z-index: 10;
    width:100%;
    height: 100%;
    padding: 120px 0 150px;
    background-color: rgba(0,0,0,0.70);
    transition: all 0.5s;
}
.navigation.fix {
    top:0;
}

JavaScriptに以下を追記。ボタンを押すとfixクラスを追加/削除する。

.js

$(".btn-trigger").on("click", function(){
    $(this).toggleClass("active");
    $(".navigation").toggleClass("fix");//追記
});

結果、transitionによってアニメーションで表現できますっと。