无序列表实现纵向和横向菜单

无序列表UL在网页中除显示树状结构外，最常用的用途就是作为导航栏的菜单使用，而它的样式通过CSS来设定，这种把样式与数据分离的做法既能有丰富多彩的效果，又易于变换，值得好好研究一下。

无序列表的默认效果

无序列表的代码

< ul >
< li >< a  href ='#' > 菜单001 </ a ></ li >
< li >< a  href ='#' > 菜单002 </ a ></ li >
< li >< a  href ='#' > 菜单003 </ a ></ li >
< li >< a  href ='#' > 菜单004 </ a ></ li >
< li >< a  href ='#' > 菜单005 </ a ></ li >
< li >< a  href ='#' > 菜单006 </ a ></ li >
< li >< a  href ='#' > 菜单007 </ a ></ li >
< li >< a  href ='#' > 菜单008 </ a ></ li >
</ ul >

竖向导航栏的实现效果


上边是竖向导航栏的效果，这在许多网站上很常见

取消无序列表的列表效果

如前页，如果不加设置，无序列表的li子项前会出现圆点效果，这对导航栏来说是需要取消的。
取消列表效果使用对ul进行列表样式设置就可以了，代码如下：

list-style-type:none;

无序列表菜单项的按钮效果实现

设置无序列表子项的背景，就能使无序列表子项出现方块效果。代码举例如下：

background:#efb57c;

使无序列表子项出现按钮的效果，对边框设置进行特殊设置即可，具体如下：

border:2px outset #efb57c;

无序列表菜单项的动态效果实现

实现动态效果，对ul中的链接状态进行设置即可，代码如右。

ul a:link {
background : #efb57c ;
border : 2px outset #efb57c ;
}

ul a:visited {
background : #efb57c ;
border : 2px outset #efb57c ;
}

ul a:focus {
background : #daa670 ;
border : 2px outset #daa670 ;
color : black ;
}

ul a:hover {
background : #daa670 ;
border : 2px outset #daa670 ;
color : black ;
}

ul a:active {
background : #bb8e60 ;
border : 2px outset #bb8e60 ;
}

实现 上述效果的全体代码

ul {
    margin : 0 ;
    padding : 0 ;
    list-style-type : none ;
}
 
ul a {
    display : block ;
    padding : 2px ;
    text-align : center ;
    text-decoration : none ;
    width : 130px ;
    margin : 2px ;
    color : #8d4f10 ;
}

ul a:link {
    background : #efb57c ;
    border : 2px outset #efb57c ;
}

ul a:visited {
    background : #efb57c ;
    border : 2px outset #efb57c ;
}


ul a:focus {
    background : #daa670 ;
    border : 2px outset #daa670 ;
    color : black ;
}

ul a:hover {
    background : #daa670 ;
    border : 2px outset #daa670 ;
    color : black ;
}

ul a:active {
    background : #bb8e60 ;
    border : 2px outset #bb8e60 ;
}
 
li {    
    padding-left : 10px ;
}

横向菜单的实现效果

使用无序列表制作横向菜单也很常见，例图如下：


将无序列表默认的纵向改为横向

无序列表子项默认是纵向的，需要将它改为横向，要实现这里只要让子项li浮动起来即可，如同设置一行内放置多个div一样。代码如下：

#menubar li {
     float : left ;
}

其它颜色，背景设置等不再赘述。

横向菜单CSS设置代码

#menubar {
margin : 0px ;
width : 100% ;
text-align : right ;
}

#menubar ul {
margin : 0 ;
padding : 0 ;
list-style-type : none ;
}

#menubar li {
float : left ;
}

#menubar li a {
    color : #000000 ;
    text-decoration : none ;    
    padding-top : 4px ;
    display : block ;
    width : 70px ;
    height : 22px ;
    text-align : center ;
    background-color : #eefaec ;
    margin-left : 2px ;
}

#menubar li a:hover {    
    color : #b9ecae ;
}