用 UL 制作菜单现在非常流行,那我们也凑凑热闹,第一讲就说说用 UL 制作导航菜单的方法,这一讲是入门版,只是实现基本功能,欢迎各位发布自己的实现方式。
我们先定一下 HTML 代码:
<ul id="menu">
<li><a href="http://www.codebit.cn">CodeBit.cn</a></li>
<li><a href="http://www.yitu.org">YITU.org</a></li>
<li><a href="http://www.yahoo.com">Yahoo.com</a></li>
<li><a href="http://www.google.com">Google.com</a></li>
</ul>
用 UL 做导航菜单之所以被广泛采用,优点很明显,代码清晰,布局方便。
下面我们就开始写 CSS ,让原本纵向显示的内容,横着排:
设置一些公共样式:
代码:
<style type="text/css">
#menu {
font:12px verdana, arial, sans-serif; /* 设置文字大小和字体样式 */
}
#menu, #menu li {
list-style:none; /* 将默认的列表符号去掉 */
padding:0; /* 将默认的内边距去掉 */
margin:0; /* 将默认的外边距去掉 */
}
</style>
因为我们现在这个是独立讲解,所以需要设置一些公共样式,如果您在 body 或其他地方已经重设了默认效果,这段可以去掉。
让文字横着排:
代码:
<style type="text/css">
#menu li {
float:left; /* 往左浮动 */
}
</style>
设置链接样式:
代码:<style type="text/css">
#menu li a {
display:block; /* 将链接设为块级元素 */
padding:8px 50px; /* 设置内边距 */
background:#3A4953; /* 设置背景色 */
color:#fff; /* 设置文字颜色 */
text-decoration:none; /* 去掉下划线 */
border-right:1px solid #000; /* 在左侧加上分隔线 */
}
</style>
我们用内边距的方式,让每个菜单变得宽一些,如果你的菜单是中英文混排的,建议设置单个菜单的高宽,这样可以避免中英文字符行高不一致导致的高度误差。设置固定高度的方式:
代码:<style type="text/css">
#menu li a {
display:block; /* 将链接设为块级元素 */
width:150px; /* 设置宽度 */
height:30px; /* 设置高度 */
line-height:30px; /* 设置行高,将行高和高度设置同一个值,可以让单行文本垂直居中 */
text-align:center; /* 居中对齐文字 */
background:#3A4953; /* 设置背景色 */
color:#fff; /* 设置文字颜色 */
text-decoration:none; /* 去掉下划线 */
border-right:1px solid #000; /* 在左侧加上分隔线 */
}
</style>
现在的导航已经出来效果了,还有一步就是要加上悬停效果:
代码:
<style type="text/css">
#menu li a:hover {
background:#146C9C; /* 变换背景色 */
color:#fff; /* 变换文字颜色 */
}
</style>
还有一个缺陷,最右边会多出来一个边框,由于 :first-child 伪类不被某些垃圾浏览器支持,我们只能单独写一个样式,将最后一个边框去掉,同时要给 HTML 代码增加一个额外选择符。
代码:
<ul id="menu">
<li><a href="http://www.codebit.cn">CodeBit.cn</a></li>
<li><a href="http://www.yitu.org">YITU.org</a></li>
<li><a href="http://www.yahoo.com">Yahoo.com</a></li>
<li><a href="http://www.google.com" class="last">Google.com</a></li>
</ul>
<style type="text/css">
#menu li a.last {
border-right:0; /* 去掉左侧边框 */
}
</style>
好了,到这里一个简单的横向导航菜单就制作完成了,是不是很简单?
下面给出完整代码:
<style type="text/css">
#menu {
font:12px verdana, arial, sans-serif;
}
#menu, #menu li {
list-style:none;
padding:0;
margin:0;
}
#menu li {
float:left;
}
#menu li a {
display:block;
/* 如果是中英文混排的文字,建议用固定宽度
width:150px;
height:30px;
line-height:30px;
text-align:center;
*/
padding:8px 50px;
background:#3A4953;
color:#fff;
text-decoration:none;
border-right:1px solid #000;
}
#menu li a:hover {
background:#146C9C;
color:#fff;
text-decoration:none;
border-right:1px solid #000;
}
#menu li a.last {
border-right:0; /* 去掉左侧边框 */
}
</style>
<ul id="menu">
<li><a href="http://www.codebit.cn">CodeBit.cn</a></li>
<li><a href="http://www.yitu.org">YITU.org</a></li>
<li><a href="http://www.yahoo.com">Yahoo.com</a></li>
<li><a href="http://www.google.com" class="last">Google.com</a></li>
</ul>