首页 > 代码库 > 8.3 应用滑动门技术的玻璃效果菜单

8.3 应用滑动门技术的玻璃效果菜单

本例中要实现一个玻璃材质效果的水平菜单。为了表现出立体的视觉效果,以及玻璃的质感.必须借助图像才可以实现,完成后的效果如图1所示。

该实例文件位于网页学习网CSS教程资源的“第8章\03\glass-navi.htm”。

图1 玻璃效果的菜单
图1 玻璃效果的菜单
 

本例中用到了两个图像,分别作为整个菜单的背景色平铺使用的,和当鼠标指针经过某个菜单项的时候显示出来的。

从效果图中可以看出,玻璃材质图是一个固定的图像文件,而菜单中的各个菜单项宽窄不一,却都可以完整地显示出来,这是如何实现的呢?这里使用的就是“滑动门”技术,它被广泛应用于各种CSS效果中,因此希望读者能够真正理解这个案例的本质原理。

一、基本思路

首先讲解滑动门技术的核心原理。图2中的箭头表示了两个圆角矩形图像的滑动方向。较深颜色区域表示二者重叠的部分,当需要容纳较多文字时,重叠就少一些,而需要较少文字时,重叠就多一些。两个图像可以滑动,重叠部分的宽度会根据内容自动调整,就像两扇推拉门一样,因此这种技术就被称为“滑动门”。

图2 滑动门技术的原理示意图
图2 滑动门技术的原理示意图

本例与前面的例子相比,要更复杂一些。除了菜单项需要设置图像背景外,整个菜单也需要设置图像背景,因此这里的HTML结构将使用无序列表来组织,而不是仅仅使用a标记。这样做的好处是可以更方便地进行控制。

相应的HTML代码如下。

折叠XML/HTML 代码复制内容到剪贴板
  1. <body>  
  2.     <div id="menu">  
  3.     <ul>  
  4.        <li><a href="#"><b> Home </b></a> </li>  
  5.        <li><a href="#"><b> Contact Us </b></a></li>  
  6.        <li><a href="#"><b> Web Dev </b></a></li>  
  7.        <li><a href="#"><b> Map </b></a></li>  
  8.     </ul>  
  9.     </div>  
  10. </body>

可以看到,每个文字链接都是作为一个列表项目<li>出现的。此外,还对文字设置了加粗显示的效果,这不但可以使字体变粗,而且还可以作为设置玻璃材质背景的“钩子”使用。结合前面的滑动门的原理,可以知道,为了实现滑动门需要两个背景图片,因此就需要两个“钩子”来分别设置背景图片,这里的<a>标记和<b>标记就分别承担了左右门的钩子的任务。

二、设置菜单整体效果

下面设置菜单的整体效果。

① 设置文字的字体和字号,井设置菜单的总体宽度,这个宽度值可以先设一个比较大的值,等最终效果做好以后,再调整到合适的值,代码如下。

折叠CSS 代码复制内容到剪贴板
  1. #menu {   
  2.   font-family:Arial;   
  3.   font-size:14px;   
  4.   width:400px;   
  5. }

② 设置ul的样式,代码如下。

折叠CSS 代码复制内容到剪贴板
  1. #menu ul {   
  2.   display:block;       
  3.   width:500px;   
  4.   padding:0 0 0 8px;    
  5.   margin:0;    
  6.   list-style:none;    
  7.   height:35px;    
  8. }

这里首先设置了padding和margin,然后将list-style属性设置为none,这样可以取消每个列表项目前面的圆点。然后设置高度为35像素,这正是背景图像的高度,最后将背景设置为图像所在的地址。

③ 设置#menu容器中的li的属性。li原本就是块级元素,这里将其设置为向左浮动,这样将使得各列表横向排列,而不是默认的竖直排列,代码如下。

折叠CSS 代码复制内容到剪贴板
  1. #menu ul li {   
  2.   float:left;   
  3. }

④ 将a元素设置为块级元素,这样整个矩形范围内都会响应鼠标事件,代码如下。

折叠CSS 代码复制内容到剪贴板
  1. #menu ul li a{   
  2.   display:block;   
  3.   float:left;    
  4.   line-height:35px;    
  5.   color:#ddd;   
  6.   text-decoration:none;   
  7.   padding:0 0 0 14px;   
  8. }

上面这段代码中,将a标记设置为块级元素以后,设置了行高line-height属性。设置行高可以使文字竖直方向居中排列。然后将文字设置为浅灰色,并取消链接的下划线。最后,设置padding属性,在每个菜单项的左侧设置了14像素的内边距。

这时的效果就已经完成了基本设置。接下来就是最关键的任务了——设置菜单项的背景。

三、使用“滑动门”技术设置玻璃材质背景

 

① 首先设置a元素的鼠标经过效果,代码如下。

折叠CSS 代码复制内容到剪贴板
  1. #menu ul li a:hover{   
  2.   color:#fff;    
  3.   backgroundurl(hover.gif);   
  4. }

这里将文字设置为白色,然后将玻璃质感的图像文件地址作为背景属性的值,此时在浏览器中查看的话就已经有变化效果了。

注意:可以看到,鼠标指针经过时,玻璃材质的背景已经出现了,但是它的右边被齐刷刷地切断了,而没有出现背景图像的右端。这个问题如何解决呢?

在CSS中是不能使图像的宽度缩放的。解决方案之一是为每一个菜单项创建各自宽度的背景图像,但是显然适应性要差很多,而且会需要多个图像文件,增加下载的流量,因此不是一个好办法。

另外一个可行的解决方案是使用前面在HTML中设置的文字加粗标记<b>。基本思想就是把<b>标记作为“钩子”来设置CSS样式,因此可以再为它的背景设置一个背景圈像。这个背景图像仍然使用惟一的玻璃材质图像文件,不同的是这次从右向左展开,这样就可以出现右边的端点了。具体的方法如下。

② 对b标记的属性进行设髓,这里仅需将其设置为块级元素就可以了,代码如下。

折叠CSS 代码复制内容到剪贴板
  1. #menu ul li a b{   
  2.   display:block;  
  3. }

③ 设置在鼠标指针经过时的b标记样式。这是很关键的一个步骤,代码如下。

折叠CSS 代码复制内容到剪贴板
  1. #menu ul li a:hover b{   
  2.   color:#fff;    
  3.   backgroundurl(hover.gif) no-repeat rightright top;   
  4. }

上面的代码中首先设置文字颜色为白色,这样鼠标指针经过时效果会更加醒目。然后设置背景图片。这个图片将会覆盖在前面定义的“#menu ul li a:hover”中没置的图片的上面。这两个图片实际上是同一个图片,后面的“no-repeat right top”设定了这个背景图的铺设方式,只显示一次,并从右上角开始铺设。

④ 这样基本上已经成功了,只是背景图像还不对称,右边还应该增加一些空白,这只需要在“#menu ul Ii a b”的样式中增加一条内边距的样式,在最右侧对称地增加14像索内边距即可,代码如下。

折叠CSS 代码复制内容到剪贴板
  1. #menu ul li a b{   
  2.   display:block;   
  3.   padding:0 14px 0 0;   
  4. }

此时在浏览器中的效果如图1所示,这正是我们需要的效果。

四、进一步解决的问题

1.修饰菜单项的文字

这里需要提示一点。为了能够增加玻璃材质的背景图像,我们使用了b标记作为“钩子”,来挂接CSS样式,这样菜单项的文字就以租体显求了,如果不想使用粗体,那么也很简单,只需要在“#menu uI li a b”和“#menu ul li a:hoverb”两个选择器中分别增加一条样式,使文字的粗细为正常(normal)即可。

2.菜单的背景随浏览器窗口扩展

此外,由于设置了#menu容器的width属性(500px),因此这个导航菜单的宽度就是固定的了,而有时可能希望菜单的背景随浏览器窗口的扩展而扩展。

为了实现自动扩展,可以进行如下尝试。对#menu的设置有如下代码:

折叠CSS 代码复制内容到剪贴板
  1. #menu {   
  2.   font-family:Arial;   
  3.   font-size:14px;   
  4.   width:400px;   
  5. }

将其修改为:

折叠CSS 代码复制内容到剪贴板
  1. #menu {   
  2.   font-family:Arial;   
  3.   font-size:14px;   
  4.   margin:0 auto 0 0;   
  5.   background:url(under.gif);   
  6. }

这样简单的修改确实实现了可以随浏览器窗口扩展。

3.设置滚动条

这时又出现了新的问题,当浏览器变窄以后,菜单项会自动折行。在大多数情况下,并不希望出现这种效果,而是希望窗口变窄到一定程度时自动出现滚动条。

这是如何实现的呢?原来蓝色的背景图像是设置在ul的下面的,为了实现菜单项不自动折行,就要给ul设置width属性.这样就会导致背景图像也无法扩展。解决方法是将背景图像从ul移动到#menu容器中,这样背景图像会随着#menu容器的扩展而扩展,同时ul设置宽度后,又限制了菜单项的自动折行。修改后的代码如下。至此本案例全部完成。

折叠CSS 代码复制内容到剪贴板
  1. #menu {   
  2.   font-family:Arial;   
  3.   font-size:14px;   
  4.   margin:0 auto 0 0;   
  5.   background:url(under.gif);   
  6. }   
  7.     
  8. #menu ul {   
  9.   display:block;       
  10.   width:500px;   
  11.   padding:0 0 0 8px;    
  12.   margin:0;    
  13.   list-style:none;    
  14.   height:35px;    
  15. }

4.E和Firefox兼容性

最后,再来看一下这个菜单的浏览器兼容性。在Firefox中,显示效果没有任何问题,而在IE中,会发现一个小问题,响应鼠标的范例错误。

在IE中只有当鼠标指针移动到文字上面的时候,才会触发鼠标经过效果。在IE中,鼠标指针的尖端虽然离文字只有很小的距离,仍然没有触发鼠标效果。而我们希望的是进入菜单项的矩形范围内,就可以像在Firefox中显示的那样触发鼠标经过效果。

这是IE浏览器存在的一个问题,解决方法是在“#menu ul li a”的样式中增加一条CSS规则,如下:

折叠CSS 代码复制内容到剪贴板
  1. #menu ul li {   
  2.   float:left;   
  3. }

这里并没有什么原理需要解释,只是一种可行的解决方法。如图1所示。已经显示正确的效果了。

点击下载第8~17章CSS教程资源 返回《CSS教程布局之道》教程列表

编辑:网页学习网
本文地址:http://www.lodidance.com/css/jc/724.html