シェアする

  • このエントリーをはてなブックマークに追加

CSSで横並びリストメニュー(Tips)

シェアする

  • このエントリーをはてなブックマークに追加

メニューを横に並べたいんだけど、tableは使いたくないとか
CMSの吐き出すリストを横並びで表示させたい時とかに使えるんじゃなかろうか。

わかりやすくて使いやすいソースを見つけたので備忘録。

HTML

<ul id="globalNavi">
 <li><a href="./">List1</a></li>
 <li><a href="./">List2</a></li>
 <li><a href="./">List3</a></li>
 <li><a href="./">List4</a></li>
</ul>

CSS

ul#globalNavi {
	margin: 0;
	padding: 0;
	width: 500px; /* 必ずwidthの設定をしてください */
}

ul#globalNavi:after {
	height: 0;
	visibility: hidden;
	content: ".";
	display: block;
	clear: both;
}

ul#globalNavi li {
	margin: 0;
	padding: 0;
	float: left;
	width: 120px; /* ボタンの幅 */
	line-height: 1;
	list-style-type: none;
}

ul#globalNavi li a {
	padding: 0.6em 10px; /* ボタンの厚みはここで調整 */
	display: block;
	position: relative;/* IE6でマウス反応領域がおかしいのをFix */
	font-size: 12px;
	color: #333;
	text-align: center;
	text-decoration: none;
	background-color: #eee;
}

ul#globalNavi li a:hover {
	color: #000;
	background-color: #ddd;
}

汎用性も高くて使いやすい。
元ネタはこちら。

スポンサーリンク
スポンサードリンク
スポンサードリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク
スポンサードリンク