倾斜的鼠标翻转导航制作上的烦恼

小毅 楼主

前天网上有个朋友发给我一个页面让我帮她看一下为什么鼠标翻转实现不了。我打开源文件看了一下，发现她根本没有掌握一个鼠标翻转的特性。并且对于倾斜导航的思考也不足。虽然我当时看出来了这些问题，但是由于手上一个项目正在收尾一时也没有时间向她一个讲解。正好昨天工作忙完了，现在又拿起那个文件看了一下，发现能过这个事件可以讲解好多个知识点，有一些地方比较容易让人不太注意，但是确实是非常关键的。下面我们通过制作一个倾斜的鼠标翻转导航为过程来针对不同的地方做出一些提示，希望可以帮助一些对于鼠标翻转导航制作上还存在疑问的朋友。

我们先看一下想要实现的效果，当然在没做之前这些只能是存在于我们的脑子或是草图上。我们首先要想到它是个什么样子，然后才能去分析我们想要实理的效果是应该如何去做，闲言少叙，先看图：



我们看到上图，可以会觉得好像并没什么，好像很容易做。好我们来细细的分析一下这个效果。我们用标准来实现就不能直接插入一张图片在HTML里。用标准来做就需要把图片作为背景的方式用CSS进行调用。那么我们来看一下这样的导航是否可以直接就那么直接调用，其中是不是还有什么问题出现？下面请看一下这个导航效果的放大图：




大家注意上图中的“危险区”很明显，如果我们把两个倾斜的正块放在一起就必然会有一段重复区，我们现在的CSS还不支持异形处理。要解决这个问题就必需要使得这两个方块进行重叠。重叠就需要把他们放在不同的层次上。这就要用到CSS中的定位：“position : static | absolute | fixed | relative ”。关于position的详细请查看苏昱的《CSS2中文手册》，关于如何定位请查看我的《解读absolute与relative》

做鼠标翻转我们通常会把所有的背景做成一个图，然后通过CSS来设置不同标签下的图片的不同位置。也许有人就会认为这个导航 的背景图应该是这样的：



如果你真的是这么想的那么问题就出来了：当在五个区块中的任一个区块中进行鼠标翻转时，上面的危险区的重复部位就会把左侧和是右侧的导航挡去一个角。所以正常的方式是：




只有这样在没有危险区的情况下才能作为最终的背景图片使用。当然还要注意的是背景并不是白色而是透明的，主要不是为了与网站的背景融合，关键是不要挡住在危险区的相邻的背景。我使用的是GIF图，GIF图有透明的时候边缘会有一点毛边。如果希望应对不同的色彩的网站背景，最好使用PNG或是把GIF图的边缘做成点像素。

对于这个背景图的思考完成之后我们就需要想想怎么制作这个导航了。先来分析一下这个鼠标翻转，原来做鼠标翻转是JS的事，现在可以通过CSS的：hover也可以实现这个翻转效果，代码少、结构清晰。所以这里这五个导航的翻转就是由A:hover来实现。关于a:hover的详细解解释可以查阅一下苏昱的《CSS2中文手册》。

首先我先写下了这个导航的HTML代码，由于是结构，要尽可能的简洁干净：

1.   <ul id="nav">
   
2.    <li id="a"><a href="" title="">HOME</a></li>
   
3.    <li id="b"><a href="" title="">ABOUT</a></li>
   
4.    <li id="c"><a href="" title="">PRODUCT</a></li>
   
5.    <li id="d"><a href="" title="">SEVICE</a></li>
   
6.    <li id="e"><a href="" title="">FEEDBACK</a></li>
   
7.   </ul>

复制代码

这里的#nav为什么要加一个position:relative; 呢？请查阅《解读absolute与relative》而 padding:0; margin:0; list-style:none;是为了去掉UL前的那个黑点，并且清除浏览器中UL的默认值。你也可以在CSS文件的开头用一句 *{padding:0; margin:0; list-style:none;}来清理一下标签在浏览器中的默认值。把他们放躺下之后我看了一下效果，不得了，所有的链接全都合到一起了。因为所有的LI都被定义成为绝对值大家都跑到原点对齐去了。我们需要把他们分开。所以接着写CSS把他们都分开：

1. #a {left:0px; top:0px; }
   
2. #b {left:79px; top:0px;}
   
3. #c {left:158px; top:0px;}
   
4. #d {left:237px; top:0px;}
   
5. #e {left:316px; top:0px;}

复制代码

我们发现他们的TOP值都是0，为了让代码少一点我们把CSS再做一次修改：

1. #nav {padding:0; margin:0; width:410px; height:25px; line-height:25px; overflow:hidden; list-style:none; position:relative;}
   
2. #nav li {width:82px; height:25px; position:absolute;  top:0px;}  
   
3. #a {left:0px;}  
   
4. #b {left:79px;}  
   
5. #c {left:158px;}  
   
6. #d {left:237px;}  
   
7. #e {left:316px;}

复制代码

都已经区分开，下面就是加背景图片了。这里要注意：图片要加在A标签上，如果不然可能就会出现错误。当然也可以放在UL背景或是li上，但是那样做法、图片就都不一样了，可能也不太好理解。这里只以放在A标签上。

1. #nav a {width:82px; height:25px; padding:30px 0 0 ; overflow:hidden; display:block; background:url(bg.gif) no-repeat;}

复制代码

这里我们把A标签也定义为宽为82高为25的方块，这里要注意一定要把A定义为块：display:block; 因为只有这样才可以完全显示背景图片。与overflow:hidden;相结合还可以把A标签中的文字挤出显示区，当然他的父级标签也要有overflow:hidden;不然在IE下还是会出现溢出显示的现象。加上一个背景图，这时浏览一下我们发现五个区块只出现图片的第一区，五个块都是一样的。我们需要把五个块应有的显示内容表现出来。就需要再加一些指令：

1. #b a {background-position: -82px 0px;}  
   
2. #c a {background-position: -164px 0px;}  
   
3. #d a {background-position: -246px 0px;}  
   
4. #e a {background-position: -328px 0px;}

复制代码

我们这里看到其中并没有 #a a 这是因为#a a的显示内容就是当前内容，所以这句可以省了，由于#nav  a中已经定义了背影图片了由于#nav a包括了#a a、#b a…，所以这里只要做好背景的位置就好了。再浏览一下，是正确了，但是还没有鼠标翻转的效果。下面再来把这个鼠标翻转的效果再补上：

1. 
   
2. #a a:hover {background-position: 0 -25px}  
   
3. #b a:hover {background-position: -82px -25px;}  
   
4. #c a:hover {background-position: -164px -25px;}  
   
5. #d a:hover {background-position: -246px -25px;}  
   
6. #e a:hover {background-position: -328px -25px;}

复制代码

大家也看到了，这里也有很多重复的，可不可以再省略呢？如果只是针对IE流览器是可以的，因为IE在背景两个私有属性叫：background-positionX，background-positionY。但是Firefox与Opera都不支持，所以这里就不能省。基本上是成功了不过还有一个小细节，细心的朋友一定发现了，LI的位置移动是以79PX为一个单位，而图片则都是82PX的，链接也是82PX的大小。所以我们开头的#nav 的长度是错的，正常的是398px，为什么是398px那就自己想想算算吧！下面给出全部的CSS代码：

1. #nav {padding:0; margin:0; width:398px; height:25px; line-height:25px; overflow:hidden; list-style:none; position:relative;}  
   
2. #nav li {width:82px; height:25px; position:absolute; top:0;}  
   
3. 
   
4. #b {left:79px;}  
   
5. #c {left:158px;}  
   
6. #d {left:237px;}  
   
7. #e {left:316px;}  
   
8. 
   
9. #nav a {width:82px; height:25px; padding:30px 0 0 ; overflow:hidden; display:block; background:url(bg.gif) no-repeat;}  
   
10. #b a {background-position: -82px 0px;}  
    
11. #c a {background-position: -164px 0px;}  
    
12. #d a {background-position: -246px 0px;}  
    
13. #e a {background-position: -328px 0px;}  
    
14. 
    
15. #a a:hover {background-position: 0 -25px}  
    
16. #b a:hover {background-position: -82px -25px;}  
    
17. #c a:hover {background-position: -164px -25px;}  
    
18. #d a:hover {background-position: -246px -25px;}  
    
19. #e a:hover {background-position: -328px -25px;}

复制代码

错误的效果

<!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="zh-CN" /> <title>倾斜的鼠标翻转导航制作上的烦恼</title> <style type="text/css"> <!-- #nav {padding:0; margin:0; width:398px; height:25px; line-height:25px; overflow:hidden; list-style:none; position:relative;} #nav li {width:82px; height:25px; position:absolute; top:0;} #b {left:79px;} #c {left:158px;} #d {left:237px;} #e {left:316px;} #nav a {width:82px; height:25px; padding:30px 0 0 ; overflow:hidden; display:block; background:url(http://bbs.blueidea.com/attachments/2007/2/1/bg2_HuTMK5qwYVri.gif) no-repeat;} #b a {background-position: -79px 0px;} #c a {background-position: -158px 0px;} #d a {background-position: -237px 0px;} #e a {background-position: -316px 0px;} #a a:hover {background-position: 0 -25px} #b a:hover {background-position: -79px -25px;} #c a:hover {background-position: -158px -25px;} #d a:hover {background-position: -237px -25px;} #e a:hover {background-position: -316px -25px;} --> </style> </head> <body id="" class=""> <ul id="nav"> <li id="a"><a href="" title="">HOME</a></li> <li id="b"><a href="" title="">ABOUT</a></li> <li id="c"><a href="" title="">PRODUCT</a></li> <li id="d"><a href="" title="">SEVICE</a></li> <li id="e"><a href="" title="">FEEDBACK</a></li> </ul> </body> </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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="zh-CN" /> <title>倾斜的鼠标翻转导航制作上的烦恼</title> <style type="text/css"> <!-- #nav {padding:0; margin:0; width:398px; height:25px; line-height:25px; overflow:hidden; list-style:none; position:relative;} #nav li {width:82px; height:25px; position:absolute; top:0;} #b {left:79px;} #c {left:158px;} #d {left:237px;} #e {left:316px;} #nav a {width:82px; height:25px; padding:30px 0 0 ; overflow:hidden; display:block; background:url(http://bbs.blueidea.com/attachments/2007/2/1/bg_VgGX71kLlctJ.gif) no-repeat;} #b a {background-position: -82px 0px;} #c a {background-position: -164px 0px;} #d a {background-position: -246px 0px;} #e a {background-position: -328px 0px;} #a a:hover {background-position: 0 -25px} #b a:hover {background-position: -82px -25px;} #c a:hover {background-position: -164px -25px;} #d a:hover {background-position: -246px -25px;} #e a:hover {background-position: -328px -25px;} --> </style> </head> <body id="" class=""> <ul id="nav"> <li id="a"><a href="" title="">HOME</a></li> <li id="b"><a href="" title="">ABOUT</a></li> <li id="c"><a href="" title="">PRODUCT</a></li> <li id="d"><a href="" title="">SEVICE</a></li> <li id="e"><a href="" title="">FEEDBACK</a></li> </ul> </body> </html>

运行代码 复制代码 另存代码  提示：您可以先修改部分代码再运行

原始阅读处：
http://andymao.com/andy/post/65.html

[ 本帖最后由 小毅 于 2007-2-2 13:13 编辑 ]

blank

例子为有危险区的演示！ 这样或许更有利于大家理解为什么是79和82

snwebsite

  前些天也捣鼓过...

<!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="zh" lang="zh"> <head profile="http://www.w3.org/2000/08/w3c-synd/#"> <meta http-equiv="content-Language" content="zh-cn" /> <meta http-equiv="content-Type" content="text/html;charset=gb2312" /> <title></title> <style type="text/css"> /*<![CDATA[*/ a { float:left; margin-right:-3px; width:82px; height:25px; text-indent:-100cm; background:url("http://bbs.blueidea.com/attachments/2007/2/1/bg_VgGX71kLlctJ.gif") no-repeat } a:hover { background-position:0 bottom } a+a { background-position:-82px 0 } a+a:hover { background-position:-82px bottom } a+a+a { background-position:-164px 0 } a+a+a:hover { background-position:-164px bottom } a+a+a+a { background-position:-246px 0 } a+a+a+a:hover { background-position:-246px bottom } a+a+a+a+a { background-position:-328px 0 } a+a+a+a+a:hover { background-position:-328px bottom } /*]]>*/ </style> </head> <body> <a href="">HOME</a> <a href="">ABOUT</a> <a href="">PRODUCT</a> <a href="">SEVICE</a> <a href="">FEEDBACK</a> </body> </html>

运行代码 复制代码 另存代码  提示：您可以先修改部分代码再运行

[ 本帖最后由 snwebsite 于 2007-2-1 19:07 编辑 ]

blank

相连选择器，IE6下不支持吧！

小毅 楼主

原帖由 snwebsite 于 2007-1-27 16:45 发表
  前些天也捣鼓过...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w ...

手法很不错，但如怿飞所言，在IE7之前的IE浏览器不支持这样的写法！
随着浏览器的不断的升级换代，相信会有更多的手法可以被应用！这种写法也可作为是一种范例！

bxlee

好好学习！

小毅 楼主

由于原来的网站出了点问题所以图全都没了，现在补上图片！

comfill

嗯,不错,之前也有个同事问我这个怎么做,想不出来-_#

PS : 小毅的空间挂了,最近都打不开

小毅 楼主

空间已经恢复欢迎大家访问！

jxdawei

上午我也去过了一次,无法访问.哈哈.

ahjxzw

提醒:最后回贴距现在 1585 天，请不要无意义回复

AlexLin95

确实厉害呀

cexoxass

这个用负边距实现的.晕