概要

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

コード

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