导航--CSS控制矩阵导航图片平移实现的导航-优快云博客

本文链接：https://blog.youkuaiyun.com/cxwen78/article/details/6648381

这次的导航，使用导航矩阵技术来解决图片替换与多个状态所提出的挑战。导航矩阵使用一个单个图图片和一组样式组合，把一个未排序列表转换为一个图片替换的菜单。这项技术通过“背景—位置”属性把这个图片在各个列表项周围移动，确保将表示该列表项及其状态的那部分图片显示出来。

在导航中使用单个图片有一点额外的好处，就是提供了对鼠标悬停状态的快速反应，当浏览器在装载鼠标悬停状态下的图片时，看不出哦延迟。下面来看实现的实例，其中需要用到的图片如下：

图片的尺寸示意图：

1、HTML代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <title>Vertical Navigation</title>
		<!--meta标记定义的字符集是支持中文的gb2312-->
		<meta http-equiv=content-type content="text/html; charset=gb2312">
		<!--链接外部CSS样式 -->
		<link rel="stylesheet" href="advanced-tabs.css" type="text/css" media="screen" />
</head>
<body id="body_his">	 <!--为body设置一个id属性，和导航的id关联起来以指出用户目前在浏览网站的哪个页面或哪个区 -->
<!--直接将导航项目包含在一个列表中，为排序列表和div一样属于块级别元素，所以直接将id赋予列表自身 -->
  <ul id="nav">
  <!--为列表的每个项目都设置唯一的id -->
    <li id="nav_hom"><a href="/">Home</a></li>
    <li id="nav_map"><a href="/maps/">Maps</a></li>
    <li id="nav_jou"><a href="/journal/">Journal</a></li>
    <li id="nav_his"><a href="/history/">History</a></li>
    <li id="nav_ref"><a href="/references/">References</a></li>
    <li id="nav_con"><a href="/contact/">Contact</a></li>
  </ul>
</body>
</html>

2、CSS代码

/*CSS STYLE SHEET FOR [advanced-tabs.html] 
	Created by [Serein_Chan]
	Email: [Serein_Chan@foxmail.com]
	Author Blog:[http://blog.youkuaiyun.com/cxwen78]
*/

/*注释 */
#nav {
  width: 767px;		/*采用图片替换保证了菜单有固定的宽度和高度 */
  height: 30px;
  position: relative;		/*为排序列表是相对位置，为里面的链接的位置作参照基准 */
  background: url(images/menu.jpg);	 /*加入菜单图片 */
  margin: 0;    
  padding: 0;
}
#nav li {
  float: left;	 /*列表项左浮动，消除IE的双边距留下的空白BUG */
}
 /*为链接元素设置样式 */
#nav li a {
  position: absolute;
  top: 0;
  margin: 0;
  padding: 0;
  display: block;	 /*块级元素 */
  height: 30px;	/*设置高度 */
  background: url(images/menu.jpg) no-repeat;	  /*添加背景图片 */
  text-indent: -9999px;	 /*将文本移出页面 */
  overflow: hidden;	/*图片超出区域的部分隐藏 */
  font-size: 1%;
}
/*为具体的每个列表项的链接元素进行定位和图片的移动
 *包括指定宽度，用left属性，即左偏移，将其置于准确的位置
 *对背景图片进行移动。
 *对于每个列表项的确切位置以及图片的移动要进行事先的精确的计算
 */
li#nav_hom a {
  left: 0;
  width: 112px;
  background-position: 0 0;
}
li#nav_map a {
  left: 112px;
  width: 109px;
  background-position: -112px 0;
}
li#nav_jou a {
  left: 221px;
  width: 129px;
  background-position: -221px 0;
}
li#nav_his a {
  left: 350px;
  width: 131px;
  background-position: -350px 0;
}
li#nav_ref a {
  left: 481px;
  width: 153px;
  background-position: -481px 0;
}
li#nav_con  a {
  left: 634px;
  width: 133px;
  background-position: -634px 0;
}

/*设置鼠标悬停时标签的转变的状态，即把背景图片的位置左移并上调 */
li#nav_hom a:hover {
  background-position: 0 -30px;
}
li#nav_map a:hover {
  background-position: -112px -30px;
}
li#nav_jou a:hover {
  background-position: -221px -30px;
}
li#nav_his a:hover {
  background-position: -350px -30px;
}
li#nav_ref a:hover {
  background-position: -481px -30px;
}
li#nav_con a:hover {
  background-position: -634px -30px;
}

/*在body元素上利用id属性并把它与特定的列表项的id关联，实现导航上激活“当前位置”
 *继续把背景图片向上移动，就像处理鼠标悬停状态那样*/
#body_hom li#nav_hom  a {
  background-position: 0 -60px;
}
#body_map li#nav_map a {
  background-position: -112px -60px;
}
#body_jou li#nav_jou a {
  background-position: -221px -60px;
}
#body_his li#nav_his a {
  background-position: -350px -60px;
}
#body_ref li#nav_ref a {
  background-position: -481px -60px;
}
#body_con li#nav_con a {
  background-position: -634px -60px;
}

3、效果图