メインメニューのカスタマイズ

Raindropsのnav_menu(メインメニュー)は、左寄せで、たくさんのメニューを表示できるような汎用的な設定になっています。

WEBサイトの多くは、メインメニューの項目数は少なく、均等揃えしたいという要望もあります。

このページでは、そのような場合のヒントになりそうな、サンプルを提供します。

custom-nav-menu

上記の画像の場合は、メインメニューが6個だけなので、スタイルを使って通常の表示を変更しています。

方法は、fonts.cssファイルの最終行に以下を追加します。

div.menu ul,
#access li{
	display:inline-block;/* 1 */
	width:16%; /* 2 */		
	text-align:center;
}
#access a {
	font-size:123.1%;
}
#access .menu> ul> ul {
	top: 3.693em;
}

解説

1.リンクのそれぞれの幅が、親ブロックの中で均等になるようにinline-blockを指定します。
2.項目数が6なので、100%を6で割って、それぞれのサイズを指定します。
3.フォントサイズを123.1%に指定して(16px相当)大きめに設定します。
4.フォントサイズを変更した事で、サイズが大きくなりますので、hoverしたときに表示される子リンクの位置を下に下げます。100%の場合3emが指定されているので、3em*123.1%で、3.693emを指定します。

以上で、均等割りのメインナビゲーションが、ざっくりと出来上がります。


コメントは受け付けていません。