[CSS]ウェブページのメニューにCSS3を使ってワンランクかっこよくするチュートリアル

メニューのすべてのアイテムに画像を割り当て、ホバー時にそれをアニメーションでスライドさせるCSS3のチュートリアルを紹介します。
チュートリアルでは既存のものにも応用できるテクニックが使用されています。

How to spice up your menu with CSS3

[ad#ad-2]

• Codropsのリニューアル
• デモ
• 実装

Codropsのリニューアル

と、まずはCodropsがリニューアルしていたので、その紹介から。

Codrops

リニューアル前は、下記のようなデザインでした。

リニューアル前

[ad#ad-2]

Responsive Web Designに対応しており、サイズを変更するとレイアウトが変更されます。

左から、980px, 800px, 480pxで表示

デモ

では、本題のメニューを紹介します。

デモページ

デモではアイテムごとに割り当てられた画像がホバー時にスライドで表示されます。
また、デモは三つあり、アイテムのデザイン（スタイルシート）が異なります。

Demo 1

半透明のブルーを背景に、テキストのカラーがアイテムごとに異なります。

Demo 2

背景のエフェクトはなく、ラベルのカラーが異なります。

Demo 3

背景のカラーがアイテムごとに異なります。

実装

HTML

メニューはリスト要素で実装されており、二つのspan要素を内包したa要素とimg要素がアイテムに含まれています。

<ul class="mh-menu">
    <li>
        <a href="#">
            <span>Art Director</span>
            <span>Henry James</span>
        </a>
        <img src="images/1.jpg" alt="image01"/>
    </li>
    <!-- ... -->
</ul>

CSS

Demo 1では、「.mh-menu li」には背景カラーとして「rgba(255,255,255, 0.8)」が割り当てられています。ホバー時にはこれが淡いブルー「rgba(225,239,240, 0.4)」になります。

.mh-menu li:hover a{
    background: rgba(225,239,240, 0.4);
}

Demo 2では、ホバー時にアイテムごとに異なるカラーをアニメーションで与えます。異なるアイテムをセレクタで指定するときには「nth-child」を使用します。
Demo 3は同様に異なるカラーを適用します。

.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: #ae3637;
}
.mh-menu li:nth-child(2):hover span:nth-child(2){
    color: #c3d243;
}
.mh-menu li:nth-child(3):hover span:nth-child(2){
    color: #d38439;
}
.mh-menu li:nth-child(4):hover span:nth-child(2){
    color: #8e7463;
}

画像のスライドは最初に「left: 0px」を設定します。アニメーションでは、右へのスライドと不透明度を変更します。

.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;
}