左側からバーが現れて背景色が変化するナビゲーション

MATEREATE INFORMATION

メニュー項目にマウスを置くと、左側からバーが出現し、背景色が変化するナビゲーションの無料Webデザイン素材です。CSSのみで表現していますので、Webパフォーマンスにも優しいデザイン素材となっております。シンプルながらもおしゃれなエフェクトによりサイト訪問者の目を引くことができると思います。

素材の詳細

背景色が変化するナビのパソコン画面でのデザイン
ナビゲーションのデザイン

項目を横一列に並べてあるよく使われているナビゲーションのデザインとなっております。項目にマウスを置くと、ホバーエフェクトがかかります。

背景色が変化するナビのホバーエフェクトイメージ
ホバーエフェクトイメージ

左側からバーが出現します。そのバーが広がり背景色が変化します。それと同時にテキストの色も変化します。

背景色が変化するナビのモバイル画面でのデザイン
スマホ画面でのデザイン

レスポンシブ対応となっており、スマホ画面ではリスト項目のように、一つずつ並んだデザインとなっております。

背景色が変化するナビのホバーエフェクトイメージ
スマホ画面でのエフェクトイメージ

パソコン画面と同様に、ホバーエフェクトがかかります。下記リンクのデモページから、エフェクトやデザインの確認をすることができます。