Web制作

【おしゃれ】スクロールで色が変わるナビゲーションメニューの作り方

どうも、なかです。

今回は、スクロールで色が変わるナビゲーションメニューの作り方を紹介していきたいと思います。

以下の動画を参考に作成しました。

おしゃれなデザインのナビゲーションメニューが作れるのでおすすめです。

では、記事に入っていきます(/・ω・)/

スクロールで色が変わるナビゲーションメニューの作り方


というわけで、早速解説に入っていきます。

これから、紹介する方法はレスポンシブ対応のナビゲーションメニューではありません。

各々「ハンバーガーメニュー」や「ドロワーメニュー」を作っていただけたらなと。

ちなみに、CSSだけで簡単!ハンバーガーメニューの作り方(スマホ対応)を使うのがおすすめです。

では、本題に入っていきます。

HTML

HTMLでは、上記のように記述しましょう。

liタグは各々好きな数を使えばOKです。

スクリプト内で、スクロール時に色を付けるクラスを取り付けています。

これで、HTMLの記述は完了です。

レスポンシブ対応のデザインにしたい方は、メディアクエリのブレークポイントで

を「display: none;」で消していただけたらなと。

CSS

参考にした動画とは、文字の間隔をちょっと変えてみました。

こっちのデザインの方が見やすくて良いかなって感じです。

また、ちょこちょこ違うところがあります。

ここら辺は個人の好みなので、好きなようにカスタマイズしていただけたらなと(/・ω・)/

スクロールで色が変わるナビゲーションメニューはおしゃれなのが良いですね。

また、smoothscrollとかを使えば、ナビのリンクをクリックしたときに良い感じになるからおすすめです。

下記の記事が分かりやすいです(^^)/

jQueryでスムーススクロールを実装する方法【初心者向け】

というわけで、おわり。

RELATED POST