首页 > 代码库 > 7.4 箭头菜单

7.4 箭头菜单

2024-07-08 20:36:06   243人阅读

本例的目标是实现带有两侧箭头的菜单效果，如图1所示。这里的箭头效果没有使用任何背景图像文件，而是完全依靠CSS代码实现的。

图1 箭头菜单效果
图1 箭头菜单效果

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

一、基本思路

既然这里不允许使用背景图像来制作这个三角形的样式，那么如何产生这两个三角形，并放到适当的位置上呢？

读者可以回忆一下7.2节的案例双斜角横线菜单的制作方法。那个案例中通过相邻边框的颜色区分实现了斜角效果。在这里。就继续挖掘它的潜力。

1.三角形效果:

如果将一个CSS盒子的height和width设置为0，然后将它的边框设置得比较粗，并且使左或右边框的颜色不同于背景色，而其余3条边框的颜色和背景色相同，就可以产生所需的三角形效果了。

2.放置三角形

在获得了三角形以后，接下来的任务是如何将这个三角形放到菜单项的两端。首先读者可能会想到，是否可以增加一个盒子，并使这个盒子的大小和菜单项大小匹配。当鼠标指针经过某个菜单项的时候，使这个盒子显示出左右两个三角形（本质上是左右两条边框）；当鼠标指针没有经过的时候，4条边框均设置为背景色。这样是否可行呢？这样做会带来一个问题，即这个盒子会很宽，从而遮盖住菜单项。因此只能把这个思路变为：增加两个小盒子，分别放置在菜单项的两端，各用于显示一个三角形。

3．制作准备

分析到这里，已经可以开始动手制作了。仍然使用前面例子的HTML代码，但是必须对它进行一定的改造，也就是为每个菜单项增加两个盒子来放置三角形。具体代码如下：

折叠XML/HTML 代码复制内容到剪贴板
  1. <body>  
  2.     <div id="menu">  
  3.        <a href="#">  
  4.            <span class="left"></span>    
  5.                Home    
  6.             <span class="right"></span>    </a>    
  7.        <a href="#">  
  8.             <span class="left"></span>  
  9.                Contact Us   
  10.             <span  class="right"></span>       </a>  
  11.        <a href="#">  
  12.             <span class="left"></span>  
  13.                 Web Dev   
  14.             <span class="right"></span>    </a>    
  15.        <a href="#">  
  16.             <span class="left"></span>  
  17.                 Web Design   
  18.             <span class="right"></span>    </a>    
  19.        <a href="#">  
  20.             <span class="left"></span>  
  21.                 Map   
  22.             <span class="right"></span>     </a>    </div>  
  23. </body>  

可以看到，在每个<a>和</a>标记之间，链接文字的前后各增加了一对<span>和</span>标记，同时分别设置了CSS类别，即left和right。注意它们内部本身是空白的，这样就可以通过CSS的样式把这些span显示为三角形了。

说明：(1) 有的参考资料上称这种方法为“钩子”，意思是它像钩子一样可以挂接CSS样式，很形象地说明了这种方法的本质。

(2) CSS的初衷是希望网页的内容和形式完全分离，面这种方法实际上在HTML中增加了没有内容含义的标记，因此并不是完全符合CSS的思想。但是制作网页毕竟最终是用于实际的，因此这里也没有必要过于追求理论上的纯粹性。但是读者应该知道，CSS的根本思想是尽可能使网页的结构与表示形式分离。

二、基本设置

下面首先设置#menu容器，代码如下。lodidance.com

折叠CSS 代码复制内容到剪贴板
  1. #menu {                     /*对menu层设置*/  
  2.    font-family:Arial;               /*字体*/  
  3.    font-size:16px;              /*字号*/  
  4.    width:140px;                 /*宽度*/  
  5.    margin:0 auto;               /*菜单项之间间隔0.5em，并水平居中*/  
  6.    border:solid 1px #ccc;           /*灰色细边框*/  
  7. }

接着设置菜单项普通状态的样式，代码如下。

折叠CSS 代码复制内容到剪贴板
  1. #menu a, #menu a:visited {   
  2.   text-decoration:none;             /*文字无下划线*/  
  3.   text-align:center;                /*文字水平居中对齐*/  
  4.   color:#c00;                   /*红色文字*/  
  5.   display:block;                /*设置为块级元素*/  
  6.   padding:4px;                  /*内边距*/  
  7.   background-color:#fff;            /*背景色*/  
  8.   border:solid 1px #fff;            /*与背景色相同边框，防止跳动*/  
  9.   position:relative;                /*使用相对定位*/    
  10. }

注意：这里需要注意两点。

(1) 倒数第2行样式的设置，为每一十菜单项设置了边框，而边框的颜色与背景色相同。这是由于将来在鼠标指针经过时会出现红色的边框，因此为了前后不产生跳动，  这里加上一个与红色边框相同粗细的边框。虽然看不刭它，但是可以防止鼠标指针经过时产生跳动。

(2) 最后一行样式的设置，将菜单项的CSS盒子设为了相对定位。这实际上并不是要改变菜单项本身的位置，而是要通过这个设置使菜单项的CSS盒子成为—个“包含块”，从而能够使它下属的CSS盒子以它为基准进行定位。在下面的讲解中就可以看到它的作用了。

三、设置箭头效果

首先，为了产生鼠标指针经过时的红色边框，进行如下设置。

折叠CSS 代码复制内容到剪贴板
  1. #menu a:hover {   
  2.   border-color:#c00;                /*边框颜色红色*/  
  3. }

接着，需要考虑承担“钩子”任务的span标记了。在鼠标指针没有经过的普通状态时，它就像不存在一样，因此也不用去设置它。而当鼠标指针经过时，就需要对它进行设置了。首先设置左右两个span共同存在的属性，代码如下。

折叠CSS 代码复制内容到剪贴板
  1. #menu a:hover span {   
  2.   display:block;                /*设置为块级元素*/  
  3.   position:absolute;                /*使用绝对定位*/  
  4.   height:0;                     /*高度为0*/  
  5.   width:0;                  /*宽度为0*/  
  6.   border:solid 8px #fff;            /*设置默认的边框样式*/  
  7.   top:4px;                  /*竖直方向的定位*/    
  8.   overflow:hidden;   
  9. }

这里依次进行了如下的设置工作。
① 首先需要注意选择器的使用。“#menu a:hover span”表示id为#menu的容器中的a标记在鼠标指针经过时，a标记内部的span元素．这正是需要选择的元索。

② 然后。将它设置为块级元素，因为span在默认情况下是行内元素。

③ 设置为绝对定位方式，这就用到了前面所做的准备工作，将菜单项的a元素设置为相对定位，成为这里的span元素的定位基准。

④ 再将高度和宽度都设置为0．这样才能产生三角形的箭头形状。

⑤ 确保溢出部分隐藏起来，这个最后再进行补充说明。lodidance.com

⑥ 设置边框粗细为8像素。这是因为最前面把菜单的文字大小设置为了l6像素，因此这里边框宽度设置为8像素，就会产生高度为16像素的三角形，正好和文字高度匹配。

⑦ 边框颜色与背景色相同，这样使得在默认情况下，上下左右边框都看不出边框的存在。

⑧ 进行竖直方向的定位，设置为距离上边界4像素，由于前面设置的菜单项的padding为4像素，因此这里也设置为4像素。

上面设置的是文字左右的两个span元素的共同属性，接下来需要设置各自不同的属性，代码如下。

折叠CSS 代码复制内容到剪贴板
  1. #menu a:hover span.left {   
  2.   border-left-color:#c00;   
  3.   left:8px;   
  4. }   
  5.   
  6. #menu a:hover span.rightright {   
  7.   border-right-color:#c00;   
  8.   rightright:8px;   
  9. }

经验：为了便于调试，可以先将上面棒式中的“:hover”去掉，由于把“:hover”暂时去掉了，因此每个span都显示出来了。如果发现形状或位置不正确，可以分析哪里错了，等调整正确之后，再把3处“:hover”添加回去即可。

上面这两段样式代码分别用于设置左边的箭头和右边的箭头。它们的各种属性都和“#menu a:hover span”中设置的相同，除了下面列出的两个。

(1)  "border-left-color:#c00;"和"border-right-color:#c00;"分别用于将左边框和右边框的颜色设置为红色。

(2) "left:8px;"的含义是距离左边界8像素，同理"right:8px;"的含义是距离右边界8像素。

此时的效果是Firefox显示的效果正如期望的那样，而在IE中的显示效果还有问题，左边的箭头位置不正确。这是IE对a元素的宽度解释不同造成的，它不是按照自动伸展来计算的，而是根据文字的位置计算，因此需要增加一行代码来解决这个问题。

方法是，在"#menu a:hover span {"这段样式中，增加一行：

折叠CSS 代码复制内容到剪贴板
  1. width:130px;

即明确地给出每个菜单项的宽度。这个130像素是如何计算出来的呢？外面的#menu容器宽度为140像素，这里希望它里面的a元素的宽度加上边框和padding的总宽度正好等于140像素。由于已经设定边框为1像素，padding为4像素，因此a元素的宽度应该设置为140-2×1-2×4=130像素。

最后，再来解释一下关于溢出样式的设定。前面已经看到，在对"#menu a:hover span"进行设置的时候，有如下代码。

折叠CSS 代码复制内容到剪贴板
  1. overflow:hidden; /*放置溢出*/

此时的效果是Firefox的显示效果依然正确，但是在IE中就不正确了．这是因为即使span中没有任何内容，IE也会认为有默认的行高。如果加入这一行CSS代码，就可以使IE也能正确实现期望的效果了。

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

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


联系
我们