导航--CSS控制矩阵导航图片平移实现的导航

最新推荐文章于 2023-03-29 23:02:11 发布

iteye_4537

最新推荐文章于 2023-03-29 23:02:11 发布

阅读量274

点赞数

文章标签： xhtml

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

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

图片的尺寸示意图：

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 http-equiv=content-type content="text/html; charset=gb2312">  <link rel="stylesheet" href="advanced-tabs.css" type="text/css" media="screen" /> </head> <body id="body_his">   <ul id="nav">  <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.csdn.net/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、效果图