首页产品库评测行情新闻|手机数码笔记本台式机DIY硬件数字家庭数码相机办公外设|软件下载游戏开发|社区

更多

数码相机
MP4
LCD
机箱
音箱

软件资讯：设计 工具 系统 开发 安全 办公 陶吧 IT教育 Windows 7 | 下载中心：天极下载中心诚征下载通路合作伙伴
天极网 > 软件频道 > 设计在线 > 网页UI设计>解决倾斜鼠标翻转导航制作麻烦问题

解决倾斜鼠标翻转导航制作麻烦问题

2007-02-26 10:14作者：小毅出处：蓝色理想责任编辑：Shiny

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

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

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

#a {left:0px; top:0px; }
#b {left:79px; top:0px;}
#c {left:158px; top:0px;}
#d {left:237px; top:0px;}
#e {left:316px; top:0px;}

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

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

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

#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下还是会出现溢出显示的现象。加上一个背景图，这时浏览一下我们发现五个区块只出现图片的第一区，五个块都是一样的。我们需要把五个块应有的显示内容表现出来。就需要再加一些指令：

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

#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;}

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

　　错误的效果：

　　运行代码框

[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]





　　正确的效果：


　　运行代码框

 [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]



　　如对于本文有任何疑问、意见以及建议，请在文章底部的留言板上留言。或者去天极设计在线主题社区讨论。

　　更多精彩，尽在天极设计在线design.yesky.com!










电脑美术设计热门专区




设计软件视频教程大全 




设计软件经典教程 




设计人生——数码设计人访谈实录集 



·软件论坛重装上线
·精彩网页素材 		
·照片处理专区
·设计软件经典教程集粹 

  阅读关于 网页 导航 菜单 互动 的全部文章
 
热卖推荐： 
手机　诺基亚　MP5　电脑包　双卡双待　手机链　U盘　笔记本电脑 










      
 
	  
关注此文的读者还看过：

        
    

        




返回网页UI设计首页







共2页。 上一页12





    







 

	
	











 

   










  
 
    




软件频道最新更新

    
 
      




热点推荐

    
 
      





















IT嘉年华




编辑推荐

      
    

        

软件下载


        

      
热门
 

推荐

      
 
	  
        


    
网友关注

     
软件
 

资料


游戏

	  

      
 
        

        





装机推荐










文章排行
本周
本月
最新更新






  

    
  















天极服务|关于我们|About us|网站律师|RSS订阅|友情合作|加入我们|天极动态|网站地图|意见反馈|MSN/QQ上看天极

Copyright (C) 1999-2012 Yesky.com, All Rights Reserved 版权所有 天极网络