マウスホバーで背景色が変わるドロップダウンメニュー

MATEREATE INFORMATION

マウスホバー時に項目の背景の色が変化し、サブ項目が出現するドロップダウンメニューの無料Web素材です。サブ項目があるメニュー項目には「+」を表示してあります。サブ項目をホバー時にも、同様に背景が変化します。たくさんの項目がある中で、選ぼうとしている項目が分かりやすいナビゲーション素材となっております。

素材の詳細

ドロップダウンメニューのPC画面でのデザイン
パソコン画面でのデザイン

メニュー項目にマウスを置くとホバーエフェクトにより背景の色が変化します。通常はサブ項目が見えないデザインとなってますが、「+」のついたメニュー項目をマウスホバーするとサブ項目が表示されます。

ドロップダウンメニューのスマホ画面でのデザイン
スマホ画面でのデザイン

レスポンシブ対応でスマホ画面では、リスト項目のようなデザインになります。こちらも通常はサブ項目が見えないデザインとなっておりますが、上記のように同様に動作いたします。