CSS3だけでエフェクト制御するメニュー。
スタッフ紹介などに使うと面白いかもしれません。
メニューにマウスを乗せると画像が左から右へスライドして出現します。
IE8では動きません。IE9ではスライドエフェクトが表現できないようです。
画像はz-indexでメニューより下に置いて、opacityで非表示、表示を調整。
メニューや画像のエフェクトはtransitionで制御しています。
htmlは必要な分のメニューをliで並べます。
[crayon]
[/crayon]
メニューのcssは
li a を display block 、背景色をお好みのカラーにして、
ホバー（li:hover a）時の背景色を以下のように変化を付けています。 下の例は薄い青色。
[crayon]
.mh-menu li:hover a{
background: rgba(225,239,240, 0.4);
}[/crayon]
ホバー時のテキストカラーを個別に変えることができます。
[crayon]
.mh-menu li a span:nth-child(2){
/*…*/
transition: color 0.2s linear;
}
.mh-menu li:nth-child(1):hover span:nth-child(2){
color: #528710;
}
.mh-menu li:nth-child(2):hover span:nth-child(2){
color: #ff47b8;
}
.mh-menu li:nth-child(3):hover span:nth-child(2){
color: #3590ff;
}
.mh-menu li:nth-child(4):hover span:nth-child(2){
color: #9d6512;
}[/crayon]
画像のcssは以下のようにします。
[crayon]
.mh-menu li img{
position: absolute;
z-index: 1;
left: 0px;
top: 0px;
opacity: 0;
transition: left 0.4s ease-in-out, opacity 0.6s ease-in-out;
}
.mh-menu li:hover img{
left: 300px; /* メニューの幅より少し大きく設定 */
opacity: 1;
}[/crayon]
DEMO