首页 > 代码库 > 8.5 不使用图像的圆角菜单

8.5 不使用图像的圆角菜单

在本案例中,要实现如图1所示的圆角菜单效果。如果通过背景图片来使用前面介绍的滑动门技术,也是可以实现的。但在本案例中,我们采用另外一种方法来制作,其特点是不使用任何图像文件,仅通过CSS本身来实现这样的效果。

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

图1 不使用图像的圆角菜单
图1 不使用图像的圆角菜单
 

如果读者不看下面的讲解,自己是否可以想出解决方法呢?其实这个方法前面的案例已经使用过了,它类似于制作带箭头的菜单,只不过这次要多挂几个“钩子”。

一、实现圆角效果

在制作整体圆角菜单之前,先来实现如图2所示的一个圆角菜单项。这圆角的文件位于网页学习网CSS教程资源的“第8章\05\prepare.htm”。

图2 圆角的构成
图2 圆角的构成

在前面我们曾经制作过不使用图像文件的斜角菜单,是使用CSS的边框来实现的,那么这里怎么做呢?

① 首先观察如下的HTML代码。

折叠XML/HTML 代码复制内容到剪贴板
  1. <body>  
  2.     <div class="item">  
  3.       <div class="row1"></div>  
  4.       <div class="row2"></div>  
  5.       <div class="row3"></div>  
  6.       <div class="row4"></div>  
  7.       <p>Home</p>  
  8.     </div>  
  9. </body>

这正是上面效果所使用的HTML结构,可以看到每一行标记是如何与最终效果中的像素对应的。

② 那么CSS又如何设置呢?对.item容器进行设置,代码如下,这里都是一些常规的设置。

折叠CSS 代码复制内容到剪贴板
  1. .item{   
  2.     width:100px;   
  3.     margin:0 auto;   
  4.     padding 0;   
  5.     font14px Arial;   
  6.     font-weight:bold;   
  7. }

③ 对p段落的样式进行设置,代码如下。

折叠CSS 代码复制内容到剪贴板
  1. .item p{   
  2.     padding:0 0 2px 0;   
  3.     margin:0px;   
  4.     text-align:center;   
  5.     background:#cc6;   
  6.     border:solid 1px  #000;    
  7.     border-top-width:0;   
  8. }

注意这里对边框的设置。首先设置4条边为1个像素宽,然后把上边框设置为0,这时的效果可以看到左边,右边和下边有边框,上边则没有边框。

④ 下面就要对构成圆角的4个div进行设置了。先对它们的公共属性进行设置,代码如下。

折叠CSS 代码复制内容到剪贴板
  1. .item div{   
  2.     height:1px;   
  3.     overflow:hidden;   
  4.     background:#cc6;   
  5.     border-left:solid 1px  #000;    
  6.     border-right:solid 1px  #000;   
  7. }

⑤ 设置最上面一行的row1的样式,它需要覆盖共性的背景色。因为它是作为水平的上边框出现的,所以把它的背景色设置为边框颜色即可。同时通过设置左右margin,使它左右各短5个像素,代码如下。

折叠CSS 代码复制内容到剪贴板
  1. .item .row1{   
  2.     margin:0 5px;   
  3.     background:#000;   
  4.     height:1px;   
  5. }

⑥ 设置第2行row2的样式。这一行覆盖了border属性,使它变为两个像素,从而更接近一个圆角。

折叠CSS 代码复制内容到剪贴板
  1. .item  .row2{   
  2.     margin:0 3px;   
  3.     border:0 2px;   
  4. }

此时在浏览器中的效果如可以看到已经出现圆角的雏形了。

⑦ 使用和上面相同的方法设置接下来的两行,代码如下。

折叠CSS 代码复制内容到剪贴板
  1. .item .row3{   
  2.     margin:0 2px;   
  3. }   
  4. .item .row4{   
  5.     margin:0 1px;   
  6.     height:2px;   
  7. }

这样就获得了圆角菜单项的效果了,如果读者对这些数据的计算还有不清楚的地方,可以参考前面的结构部分和图1的对比。

请读者务必先把圆角的制作方法分析清楚,然后再往下学习。

二、用列表进行改造

上面只是做出了一个菜单项。为了能够实现完整的菜单,还需要改造为利用列表来实现的HTML结构,也就是使用ul代替div,便于以后增加菜单项时能更方便地组织内容。同时增加a标记,使菜单项可以响应鼠标的操作。

① 首先改造HTML代码。找到代码中的如下部分。

折叠XML/HTML 代码复制内容到剪贴板
  1. <body>  
  2.     <div class="item">  
  3.       <div class="row1"></div>  
  4.       <div class="row2"></div>  
  5.       <div class="row3"></div>  
  6.       <div class="row4"></div>  
  7.       <p>Home</p>  
  8.     </div>  
  9. </body>

改造为:

折叠XML/HTML 代码复制内容到剪贴板
  1. <body>  
  2.   <ul>  
  3.      <li class="item">  
  4.       <a href="#">  
  5.       <div class="row1"></div>  
  6.       <div class="row2"></div>  
  7.       <div class="row3"></div>  
  8.       <div class="row4"></div>  
  9.       <p>Home</p>  
  10.       </a>  
  11.      </li>  
  12.   </ul>  
  13. </body>

这样显示的效果和原来是相同的。

② 增加其余几个菜单项,只需要复制后修改p段落中的文字就可以了,这里不再抄录代码。

③ 对CSS样式进行改造。

● 增加对ul的CSS设置,代码如下。

折叠CSS 代码复制内容到剪贴板
  1. ul{   
  2.   height:26px;   
  3.   margin: O ;   
  4.   padding:1Opx;   
  5.   list-tyle-type:none;   
  6.   background#ddd;   
  7. }

● 对item类增加向左浮动设置,以及对margin设置修改,代码如下。

折叠CSS 代码复制内容到剪贴板
  1. .item{   
  2.     float:left;   
  3.     width:100px;   
  4.     margin:0 -1px 0 0;   
  5.     padding 0;   
  6.     font14px Arial;   
  7.     font-weight:bold;   
  8. }

分析:这里之所以把右margin的值设置为-1px,是因为希望各菜单项之间有1像素的重叠,这样,在最终的效果中,相邻菜单项之间的竖线就会显示为1像素。

其余代码都不用修改,此时在浏览器中的外观效果如图1所示。

三、设置鼠标响应效果

接下来的任务就是设置鼠标的响应效果了。

① 首先增加链接文字在普通状态时的颜色设置,并取消下划线,代码如下。

折叠CSS 代码复制内容到剪贴板
  1. .item a , .item a:visted{   
  2.     color:#000;   
  3.     text-decoration:none;   
  4. }

② 对鼠标指针经过时的p标记进行设置。这样做的目的是使鼠标指针经过时.文字颜色和背景色发生变化,代码如下。

折叠CSS 代码复制内容到剪贴板
  1. .item a:hover p{   
  2.     background:#884;   
  3.     color:#fff;   
  4. }

分析:这时在IE浏览器中查看效果,会发现并没有实现所希望的效果,从上面这两段代码本身来说,并没有错误,那么问题出在哪里呢?先来看解决这个问题的方法,增加如下一段代码。

折叠CSS 代码复制内容到剪贴板
  1. .item a:hover{   
  2.     background:transparent;   

它的作用是将a标记的鼠标指针经过样式的背景色设置为透明。事变上对于各种元素,默认的背景色就是透明的。但是当某一个元素的上级元素设置了某种背景色之后,它的后代的背景色就继承了这种颜色。因此这里就需要把它恢复为透明色,才可以正确地显示鼠标经过效果。

③ 下面就很简单了。对矩形上面的4个构成圆角的div在鼠标指针经过时的效果进行设置,只要设置背景色就可以了,代码如下。

折叠CSS 代码复制内容到剪贴板
  1. .item a:hover .row2,   
  2. .item a:hover .row3 ,   
  3. .item a:hover .row4{   
  4.     background:#884;   
  5. }

这时在浏览器中的效果如图1所示。

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

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