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

原创 2007年10月09日 09:53:00

菜单列表信息采用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"

"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{
 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>

Bootstrap导航栏实例讲解

导航栏是一个很好的功能,是 Bootstrap 网站的一个突出特点。导航栏是响应式元组件就,作为应用程序或网站的导航标题。导航栏在移动设备的视图中是折叠的,随着可用视口宽度的增加,导航栏也会水平展开。...
  • u013064615
  • u013064615
  • 2015年11月04日 22:50
  • 3237

原生js和jquery分别实现伸缩菜单的制作-水平方向导航栏

原生javascript实现: 这一次要实现的是鼠标放上去以后,菜单栏被选中的那一栏水平拉伸,鼠标离开后水平收缩。并带有一定的时间性,使肉眼能够看出其拉伸收缩的动画效果。 开始用javascrip...
  • u013045370
  • u013045370
  • 2016年05月05日 14:04
  • 1972

html+ js+ jq+css导航条菜单的制作(水平,竖直,伸缩,带有动画效果等等。。。)

第一种导航菜单,最普通的:(竖直的) *{margin: 0;padding: 0;font-size: 14px;} ul{list-style: none;width:...
  • ITzhongzi
  • ITzhongzi
  • 2016年07月12日 15:28
  • 1695

实现图片滑动、滚动、菜单栏(导航)滑动、文字滚动等效果的网页插件superslide2

以下是我个人初步接触的感悟,借此宝地记录下来。这是j'qu'ery专门介绍superslide2的网址,很有用的一个网站:http://www.superslide2.com/demo.html 1...
  • wangyzsir
  • wangyzsir
  • 2017年06月15日 14:45
  • 150

Android两级导航菜单栏-FragmentTabHost和PagerSlidingTabStrip+ViewPager实现

  • 2015年03月29日 13:20
  • 873KB
  • 下载

首页-底部&顶部Tab导航(菜单栏)的实现:TabLayout+ViewPager+Fragment

前言Android开发中使用顶部 & 底部Tab导航栏的频次非常高,主要的实现手段有以下: TabWidget 隐藏TabWidget,使用RadioGroup和RadioButton Fragmen...
  • carson_ho
  • carson_ho
  • 2016年07月24日 11:27
  • 10892

首页-底部Tab导航(菜单栏)的实现:FragmentTabHost+ViewPager+Fragment

转载自:http://blog.csdn.net/carson_ho/article/details/51533543 目录(?)[+] 前言 A...
  • lv18092081172
  • lv18092081172
  • 2016年06月01日 14:39
  • 297

Android两级导航菜单栏的实现--FragmentTabHost嵌套FragmentTabHost

开发APP,有时候一层Tab导航菜单栏并不能满足业务需求,这时候就需要二级Tab导航菜单栏了。接下来的两篇博客实现的都是这种效果,只是采用的方式不同而已。         本篇实现的类似Insta...
  • yalinfendou
  • yalinfendou
  • 2015年03月29日 13:37
  • 2247

首页-底部Tab导航(菜单栏)的实现:FragmentTabHost+ViewPager+Fragment

前言Android开发中使用底部菜单栏的频次非常高,这篇文章主要讲解的是用FragmentTabHost+ViewPager+Fragment实现首页底部Tab菜单栏...
  • carson_ho
  • carson_ho
  • 2016年05月30日 08:26
  • 11310

reactNative底部导航菜单栏实现

reactNative底部导航菜单栏实现
  • kerryqpw
  • kerryqpw
  • 2017年04月30日 19:49
  • 1700
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:从最简单和朴素的水平导航菜单栏到复杂的图片导航菜单栏的实现
举报原因:
原因补充:

(最多只允许输入30个字)