TEORICO

CSSとjQueryで奥に閉じるナビゲーション

CSSとjQueryで奥に閉じるナビゲーション

CSSとjQueryで奥に閉じるナビゲーション

奥にパタンとなるグローバルナビを作ってみました

CSSのtransformを利用してアニメーションさせ、奥側にパタンとなるメニューを作ったのでメモ

まずはHTML

一般的なheaderです。

横幅確保のためにheaderの中で、さらにdivでくくっている感じです。

必須ではないので、ここは適宜変更してください。

次にCSS

このようにしておきます。

最後にjQuery

これで下準備は完了です。

解説

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