Horizontal List Menu sample01

17年前

水平方向のリストメニューサンプル。

商用サイトのフッターメニューとしてよく使われる、リンクとリンクの間に直線が入るスタイル。

Fat Erik 5s Simple Pipe List

Listamatic: Fat Erik 5s Simple Pipe List (2008-03-06)

<div id="menu">
<ul>
<li><a href="#">Menu1</a></li>
<li><a href="#">Menu2</a></li>
<li><a href="#">Menu3</a></li>
<li><a href="#">Menu4</a></li>
<li><a href="#">Menu5</a></li>
</ul>
</div>

div#menu {
	margin:2em auto;
	width:80%;
	text-align:center;
}
div#menu li {
	display: inline;
	padding: 0;
	margin: 0;
}
div#menu li a {
	padding:0 0.6em;
}
div#menu li:before { content: "| "; }
div#menu li:first-child:before { content: ""; }

/*for Win IE */
* html div#menu li {
	border-left: 1px solid #ccc;
	padding: 0 0.4em 0 0.4em;
	margin: 0 0.4em 0 -0.4em;
}

/*hide from Mac IE\*/
* html div#menu { height:1%;margin-left:30%;}

* html div#menu li {
	display: block;
	float: left;
}
/**/
/*for Mac IE5*/
* html div#menu li:first-child { border-left: 0;}

ＩＥ用ハックが入っているものの、IE6以下ではFloat使用しているため中央に並ばない。
センター配置にしたい場合はmargin-leftなどで位置調整する必要がある。
また、xml宣言が入るとIEで若干表示が変わる。

シェア