Posted at

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によってアニメーションで表現できますっと。