CSS3 スライドエフェクトメニュー

Posted by admin in : Categories: WEBデザイン

      

CSS3だけでエフェクト制御するメニュー。
スタッフ紹介などに使うと面白いかもしれません。
メニューにマウスを乗せると画像が左から右へスライドして出現します。
IE8では動きません。IE9ではスライドエフェクトが表現できないようです。

画像はz-indexでメニューより下に置いて、opacityで非表示、表示を調整。
メニューや画像のエフェクトはtransitionで制御しています。

htmlは必要な分のメニューをliで並べます。

メニューのcssは
li a を display block 、背景色をお好みのカラーにして、
ホバー(li:hover a)時の背景色を以下のように変化を付けています。 下の例は薄い青色。

ホバー時のテキストカラーを個別に変えることができます。

画像のcssは以下のようにします。

DEMO

Address

〒515-2332 三重県松阪市嬉野津屋城町1355-4
Phone: 0598-30-5698
Mobile:080-6929-0023

Email: webmaster@aquacube.biz
Website: www.aquacube.biz
Facebook Twitter Rss

お問い合わせ

Translate »