Horizontal List Menu sample01

by

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

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

Fat Erik 5s Simple Pipe List

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

1
2
3
4
5
6
7
8
9
<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
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で若干表示が変わる。

コメントを残す

This site uses Akismet to reduce spam. Learn how your comment data is processed.