メニューバーのメニューのカスタマイズについて、
メニューに背景画像をつけたり、hover した時、画像を入れ替える方法について説明します。
この例では、メニューページのCSS classに testというクラスを設定しています。（アイキャッチ画像を参照してください）
style.cssの最後に、以下のスタイルルールを追加します。
#access .test a{
color:#000;
background:url(http://dummyimage.com/200X60/ccc/ccc);
background-size:cover;
}
#access .test a:hover{
color:#fff;
background:url(http://dummyimage.com/200X60/999/999);
background-size:cover;
}
以上で、配色が変更できます。
親メニューにクラスを指定すると、チャイルドメニューにも反映します。
予告
Raindrops 1.272からメニューバーのクラスで gradient-1,gradient-2,gradient-3,gradient-4,gradient1,gradient2,gradient3,gradient4,をサポートする予定です。
このクラスを使用した場合、以下のように表示する事もできます。
