无序列表实现纵向和横向菜单
来源:互联网 发布:在淘宝上怎么看淘宝店 编辑:程序博客网 时间:2024/05/29 05:52
无序列表UL在网页中除显示树状结构外,最常用的用途就是作为导航栏的菜单使用,而它的样式通过CSS来设定,这种把样式与数据分离的做法既能有丰富多彩的效果,又易于变换,值得好好研究一下。
无序列表的默认效果
竖向导航栏的实现效果
上边是竖向导航栏的效果,这在许多网站上很常见
取消无序列表的列表效果
如前页,如果不加设置,无序列表的li子项前会出现圆点效果,这对导航栏来说是需要取消的。
取消列表效果使用对ul进行列表样式设置就可以了,代码如下:
无序列表菜单项的按钮效果实现
设置无序列表子项的背景,就能使无序列表子项出现方块效果。代码举例如下:
使无序列表子项出现按钮的效果,对边框设置进行特殊设置即可,具体如下:
无序列表菜单项的动态效果实现
实现动态效果,对ul中的链接状态进行设置即可,代码如右。
实现上述效果的全体代码
横向菜单的实现效果
使用无序列表制作横向菜单也很常见,例图如下:
将无序列表默认的纵向改为横向
无序列表子项默认是纵向的,需要将它改为横向,要实现这里只要让子项li浮动起来即可,如同设置一行内放置多个div一样。代码如下:
其它颜色,背景设置等不再赘述。
横向菜单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><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;
}
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;
}
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;
}
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;
}
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;
}
0 0
- 无序列表实现纵向和横向菜单
- jQuery实现横向纵向下拉菜单
- JQuery 横向纵向菜单
- JQuery 横向纵向菜单
- 横向,纵向下拉菜单
- jq横向纵向菜单
- 【JQuery】纵向横向菜单
- 横向无序列表
- 网页中常用的简单横向和纵向菜单
- JQuery实战:横向纵向菜单
- JQuery横向、纵向菜单显示
- 【JQuery实例】---横向纵向菜单
- 无序列表实现导航下拉菜单
- 无序列表制作横向导航
- JQuery-纵向菜单及横向菜单
- 实现有序列表和无序列表
- JQuery实战第三讲:横向纵向菜单
- JQuery学习日志三(横向纵向菜单)
- MySql中把一个表的数据插入到另一个表中的实现
- Hibernate Save()与Persist()区别
- leetcode -- Best Time to Buy and Sell Stock IV --难点要看
- spark大数据入门(三)--RDD的简单解析
- C# Slipt() 分隔符用法
- 无序列表实现纵向和横向菜单
- Gearmand和PECL extension for Gearman版本不兼容的问题
- Java NIO(二)
- 如何给Ubuntu 安装Vmware Tools(详细版)
- PL/SQL如何调试Oracle存储过程
- ios App icon 自动生成插件RTImageAssets
- Linux中源的更新
- request内置对象的练习
- Javascript表单验证