CSSとjQueryで奥に閉じるナビゲーション
CSSとjQueryで奥に閉じるナビゲーション
奥にパタンとなるグローバルナビを作ってみました
CSSのtransformを利用してアニメーションさせ、奥側にパタンとなるメニューを作ったのでメモ
まずはHTML
<header class="g_header">
<div class="header__inner">
<h1 class="header__logo"><a href="">ロゴ</a></h1>
<nav class="g__nav">
<ul class="g__nav--list">
<li><a href="">ナビ</a></li>
<li><a href="">ナビ</a></li>
<li><a href="">ナビ</a></li>
<li><a href="">ナビ</a></li>
</ul>
</nav>
</div>
</header>
一般的なheaderです。
横幅確保のためにheaderの中で、さらにdivでくくっている感じです。
必須ではないので、ここは適宜変更してください。
次にCSS
/* ヘッダー用css */
.g_header {
position: fixed;
top: 0;
width: 100%;
transform-origin: center top;
transition: all .3s;
box-shadow: 0 0 10px rgba(32, 14, 17, 0.15);
}
/* アニメーションさせるためのCSS */
.header__animate {
position: fixed;
background: #999;
transform: rotateX(-90deg);
transition: transform 0.3s cubic-bezier(0.55, 0.09, 0.68, 0.53), background 0.3s cubic-bezier(0.55, 0.085, 0.68, 0.53);
}
このようにしておきます。
最後にjQuery
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() >= 50) {
$('.g_haeder').addClass('header__animate');
} else {
$('.g_haeder').removeClass('header__animate');
}
});
});
これで下準備は完了です。
解説
CSSでまず注目するところは、CSSプロパティの
transform-origin: center top;
です。
これはtransformさせる要素の基点をどこにするかを指定するプロパティです。
center topと指定しておくことで変化の基点が中央、そして上となります。
.g_headerに対するCSSだけでは何も起こりません。
次に、.header__animateに対するCSSです。
このクラス名は何でもいいのですが、jQueryでtoggleClassで付与するためのクラス名と同じとします。
ここで注目するのは、
transform: rotateX(-90deg);
rotateで回転させます。
rotateXはX軸のみ回転させます。-90degとすることで真逆となります。
変化する対象の基点は中央かつ上ですので、そこから−90°回転させることで奥に行くように見えます。
奥行きがあるようにみせるために、backgroundをつけます。
今回は元の背景が白なので、グレーをbackgroundにつけました。
最後にjQueryを使用します。
windowをスクロールさせた時に実行させます。
条件は以下の通り
if ($(this).scrollTop() >= 50 )
今回はブラウザの一番上から50pxスクロールしたらクラスを付与するとしました。
トップから50px以下になった場合元に戻るようにしてます。
ここはjQueryの数値を変更することで任意の数値に変更することが可能です。
最後に注意点として、headerが終わって次の要素（コンテンツ部分）にはheaderと同じ高さ分のmargin-topをとってください。
そうしておかないとheaderがfixedとなっているので、コンテンツ部分が後ろに隠れてしまいます。
完成形デモ(CSSはSCSSなので注意)
参考サイト：
https://developer.mozilla.org/ja/docs/Web/CSS/transform-origin