カスタムメニューウィジェットを使って、サイドバーにメニューを表示させるやり方と、そのデザインをCSSで変えていくことについて書いていますが、今日は「 実践編　その2」として、前回の「カスタムメニューウィジェットで自由度の高いメニューをつくる　 実践編　その1」で紹介した、デザインサンプル2の作り方についてお話していこうと思います。

デザイン2

デザイン2です。

メニューの左側に濃い色のボーダーが入り、全体の背景にテクスチャを使っています。

デザイン1と元は全く同じなのですが、だいぶ雰囲気が変わっているのではないかと思います。この辺もCSSの面白さではないかと思います。

CSSの設定

では、早速CSSで組んでいきましょう。手順はデザイン1のときと比較できるように、だいたい同じにしていきますね。

全体を囲むボーダーを設定する

このデザインでは全体をボーダーで囲っていますが、それぞれ少しずつ違っています。左は3pxの太い実線、右は1pxのドット、上下は1pxの実線になっています。

.widget_nav_menu{
   border-top: solid 1px #A1A399;
   border-right: dotted 1px #392600;
   border-bottom: solid 1px #A1A399;
   border-left: solid 3px #392600;
}

このように上下左右のボーダーに少し変化を付けるだけでも面白いものができますね。

メニュー部分の背景の設定

メニュー部分の背景に小さな背景画像を指定します。

参考までに、この画像はFireworksで、#CCCEA6の塗りにメッシュのテクスチャを37%の割合で指定したものです。ちょっと濃かったので、透明度を67%に。デフォルトの素材でもこのくらいの感じなら、ちゃっちゃっと作れちゃいます。

.widget_nav_menu{
   background: url(img/menu2-back.gif);
}

メニュータイトルの変更

メニュータイトルの設定は実はデザイン1と全く同じで、背景色の変わりに背景画像を使っているだけです。

この素材はメニュー部分の背景に使っているものとほとんど同じで、色を暗くしてあります。色を暗くするとテクスチャが強く感じたので、9%に減らしました。

.widget_nav_menu .widget-title{
   padding:20px;
   color: #FFF;
   background: url(img/menu2-title-back.gif);
}

リストマークを画像に

こちらも前回と全く同じく、まず、list-style: none　でもともとのリストマークを消し、background: url(img/menu2-list.gif) でリストマークを背景画像として表示させます。

背景の位置調整の数値が変わっていますが、実はこれ、「デザイン1」で使った子アイテムの小さい矢印の色違いなので、そちらの設定をそのままもらってきています。子アイテムも同じリストマークにしたので、手順も一つ減りました。

省エネ、エコなコーディングですね〜♪

.widget-area .widget_nav_menu li {
	list-style: none;
	background: url(img/menu2-list.gif) no-repeat;
	background-position: 0 11px;
	padding: 5px 0 5px 7px;	
}

アイテムごとに区切り線

こちらも前回と考え方は一緒です。ボーダーの種類と色が変わっています。

.widget-area .widget_nav_menu li {
	border-top: dotted 1px #392600;	
}
.widget-area .widget_nav_menu li li{
    border: none;
}

リスト一番上のボーダーを消し、タイトル下にボーダーを

タイトル下の濃いボーダーは、メニュータイトルに設定し、そこに重なって表示されてしまうリスト一番上のボーダーは消してしまいましょう。

#main .widget-area .widget_nav_menu ul{
	margin-left: 0;
	_zoom: 1;  
    overflow: hidden; /*リストの一番上ボーダーを消す*/
}
.widget-area .widget_nav_menu li {
	margin: -1px 5px 0 5px;		
}
#main .widget-area .widget_nav_menu .menu  {
	border-top: solid 1px #392600;
}

リンクの範囲を広げ、文字色を調節

これも前回と全く同じなので、コードは省略します。下のまとめのコードを見て下さいね。

CSSのまとめ

CSSのまとめです。

/* *****************************************************
 *	デザイン2
 * *****************************************************/


/*メニューに背景　ボーダーで囲む*/
.widget_nav_menu{
   background: url(img/menu2-back.gif);
   border-top: solid 1px #A1A399;
   border-right: dotted 1px #392600;
   border-bottom: solid 1px #A1A399;
   border-left: solid 3px #392600;

}
/*メニュータイトル*/
.widget_nav_menu .widget-title{
   padding:20px;
   color: #FFF;
   background: url(img/menu2-title-back.gif);
}
/*タイトル下　メニュー始まりにボーダー*/
#main .widget-area .widget_nav_menu .menu  {
	border-top: solid 1px #392600;
}

#main .widget-area .widget_nav_menu ul{
	margin-left: 0;
	_zoom: 1;  
    overflow: hidden; /*リストの一番上ボーダーを消す*/
}
/*リストボーダーとリストマーク*/
.widget-area .widget_nav_menu li {
	list-style: none;
	margin: -1px 5px 0 5px;	
	border-top: dotted 1px #392600;
	background: url(img/menu2-list.gif) no-repeat;
	background-position: 0 11px;
	padding: 5px 0 5px 7px;	
}
.widget-area .widget_nav_menu li li{
    border: none;
}
.widget_nav_menu a{
   color: #392600;
   display: block;
   width: 200px;
}
.widget_nav_menu a:hover{
   color: #940101;
}

はい、デザイン2はこれで出来上がりです。どうでしょうか。一つ作ってしまうと、ちょっとしたCSSの指定の書き換えでデザインが変わるので、とても楽ですね。

素材のおまけ

今回も、ちょっぴりですが、素材を。

メニューとタイトルで使っている背景素材とリストマーク。それにプラスして背景画像のもととして使っていただけるように背景画像をPNGのグレーでつけておきますね。

またまた続く

いかがでしたか？
全く同じhtmlのものでも、CSSだけで、がらっと変わる面白さを感じていただければうれしいです。

次回はデザイン3をちゃちゃっといこうかな、と思っています。