至顶网›软件频道 ›应用软件›从最简单和朴素的水平导航菜单栏到复杂的图片导航菜单栏的实现

从最简单和朴素的水平导航菜单栏到复杂的图片导航菜单栏的实现

扫一扫
分享文章到微信
扫一扫
关注官方公众号
至顶头条

作者：张孝祥来源：CSDN 2008年1月9日

菜单列表信息采用ul/li标签进行标记，当前页面所对应的菜单项用id＝“current”进行标识，鼠标移动到的菜单项通过伪元素a:hover进行选择。首先让每个li元素水平排列，并去掉前面的列表符；然后设置＃current对象的字体颜色和背景色；最后设置a:hover对象的字体颜色和背景色。就这么简单，一切ok!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>www.itcast.cn</title>
<style type="text/css">
* {
font-size:12px;
text-align:center;
}
body {
background:#f0f0f0;
}
#nav {
width:700px;
margin:20px auto;
background:#f3c3f3;
padding:8px 12px;
list-style-type: none;
}
#nav li {
display: inline;
margin-right:8px;
}
#nav li a{

text-decoration: none;
color:#000;

}
#nav li a:hover {
color:#fff;
background-color:#c3f3c3;
}
#nav li a#current {
color:#c00;
background-color:#ccc;
}
</style>
</head>
<body>
<ul id="nav">
    <li><a href="http://www.itcast.cn" id="current">java培训</a></li>
    <li><a href="http://www.itcast.cn/">.net培训</a></li>
    <li><a href="http://www.itcast.cn/">oracle培训</a></li>
    <li><a href="http://www.itcast.cn/">ejb培训</a></li>
    <li><a href="http://www.itcast.cn/">工作流培训</a></li>
</ul>
</body>
</html>

如何要把上面的导航菜单栏改为类似csdn的blog后台的导航栏图片形式，可以采用一种简单方式，即设计3个用作标签页的图片，将它们作为菜单的3种状态的背景图片，由于我自己没有图片，下面只能示意一下了：

#nav li a:hover {
color:#fff;
background-image:url(/img/hover.gif);
}
#nav li a#current {
color:#c00;
background-image:url(/img/active.gif);
}

最后，我们可以把hover.gif,active.gif,normal.gif等表示3种状态的图片合并为一个图片，每种状态通过定位图片的坐标来分别显示不同的图片区域，csdn的blog后台的导航栏图片采用的就是这种方式,如下所示：

采用这种将多个图片合并为一个图片的代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

}
#nav li a{
background-image:url(http://writeblog.csdn.net/resources/images/tabrightF.gif);
text-decoration: none;
color:#000;
float:left;
padding:6px 15px 5px 10px;
margin-right:3px;
}
#nav li a:hover {
color:#fff;
background-position:right -42px;
}
#nav li a#current {
color:#c00;

}
</style>
</head>
<body>
<ul id="nav">
    <li><a href="http://www.itcast.cn" id="current">java培训</a></li>
    <li><a href="http://www.itcast.cn/">.net培训</a></li>
    <li><a href="http://www.itcast.cn/">oracle培训</a></li>
    <li><a href="http://www.itcast.cn/">ejb培训</a></li>
    <li><a href="http://www.itcast.cn/">工作流培训</a></li>
</ul>
</body>
</html>

查看本文来源

复制Excel自定义菜单栏

从最简单和朴素的水平导航菜单栏到复杂的图片导航菜单栏的实现

业界热点: