メニュー項目の上下部分にラインが現れるメニュー

MATEREATE INFORMATION

メニュー項目をホバーで、項目の上下部分に左右からラインが出現するナビゲーションの無料Web素材です。レスポンシブ対応なので、タブレット、スマホでもご使用可能となっております。シンプルながらもちょっとしたアクセントが欲しい…。そんなナビゲーションのWeb素材となっております。

素材の詳細

パソコン画面でのナビのデザイン
パソコン画面でのデザイン

パソコン画面での表示イメージとなります。メニュー項目を中央に寄せたシンプルなデザインとなっております。

パソコン画面でナビをマウスホバーした時のデザイン
項目をホバーした時のデザイン

メニュー項目にマウスを置くと、メニュー項目の上下部分に、左右からラインが出現するアニメーションを行います。

スマホ画面でのナビのデザイン
スマホ画面でのデザイン

スマホ画面では、リスト項目のように1つずつ並びます。メニュー項目は中央に寄せたデザインとなっております。

スマホ画面でのホバーした時のナビのイメージ
スマホ画面で項目をホバーした時

スマホ画面でもメニュー項目をホバーすると、パソコン画面と同じように上下部分にラインが出現いたします。