|
本例的目标是实现带有两侧箭头的菜单效果，如图1所示。这里的箭头效果没有使用任何背景图像文件，而是完全依靠CSS代码实现的。  图1 箭头菜单效果 该实例文件位于网页学习网CSS教程资源的“第7章\04\arrow-navi.htm”。 一、基本思路 既然这里不允许使用背景图像来制作这个三角形的样式，那么如何产生这两个三角形，并放到适当的位置上呢？ 读者可以回忆一下7.2节的案例双斜角横线菜单的制作方法。那个案例中通过相邻边框的颜色区分实现了斜角效果。在这里。就继续挖掘它的潜力。 1.三角形效果: 如果将一个CSS盒子的height和width设置为0，然后将它的边框设置得比较粗，并且使左或右边框的颜色不同于背景色，而其余3条边框的颜色和背景色相同，就可以产生所需的三角形效果了。 2.放置三角形 在获得了三角形以后，接下来的任务是如何将这个三角形放到菜单项的两端。首先读者可能会想到，是否可以增加一个盒子，并使这个盒子的大小和菜单项大小匹配。当鼠标指针经过某个菜单项的时候，使这个盒子显示出左右两个三角形（本质上是左右两条边框）；当鼠标指针没有经过的时候，4条边框均设置为背景色。这样是否可行呢？这样做会带来一个问题，即这个盒子会很宽，从而遮盖住菜单项。因此只能把这个思路变为：增加两个小盒子，分别放置在菜单项的两端，各用于显示一个三角形。 3．制作准备 分析到这里，已经可以开始动手制作了。仍然使用前面例子的HTML代码，但是必须对它进行一定的改造，也就是为每个菜单项增加两个盒子来放置三角形。具体代码如下： 折叠XML/HTML 代码复制内容到剪贴板
可以看到，在每个<a>和</a>标记之间，链接文字的前后各增加了一对<span>和</span>标记，同时分别设置了CSS类别，即left和right。注意它们内部本身是空白的，这样就可以通过CSS的样式把这些span显示为三角形了。 说明：(1) 有的参考资料上称这种方法为“钩子”，意思是它像钩子一样可以挂接CSS样式，很形象地说明了这种方法的本质。 (2) CSS的初衷是希望网页的内容和形式完全分离，面这种方法实际上在HTML中增加了没有内容含义的标记，因此并不是完全符合CSS的思想。但是制作网页毕竟最终是用于实际的，因此这里也没有必要过于追求理论上的纯粹性。但是读者应该知道，CSS的根本思想是尽可能使网页的结构与表示形式分离。 二、基本设置 下面首先设置#menu容器，代码如下。lodidance.com 折叠CSS 代码复制内容到剪贴板
接着设置菜单项普通状态的样式，代码如下。 折叠CSS 代码复制内容到剪贴板
注意：这里需要注意两点。 (1) 倒数第2行样式的设置，为每一十菜单项设置了边框，而边框的颜色与背景色相同。这是由于将来在鼠标指针经过时会出现红色的边框，因此为了前后不产生跳动， 这里加上一个与红色边框相同粗细的边框。虽然看不刭它，但是可以防止鼠标指针经过时产生跳动。 (2) 最后一行样式的设置，将菜单项的CSS盒子设为了相对定位。这实际上并不是要改变菜单项本身的位置，而是要通过这个设置使菜单项的CSS盒子成为—个“包含块”，从而能够使它下属的CSS盒子以它为基准进行定位。在下面的讲解中就可以看到它的作用了。 三、设置箭头效果 首先，为了产生鼠标指针经过时的红色边框，进行如下设置。 折叠CSS 代码复制内容到剪贴板
接着，需要考虑承担“钩子”任务的span标记了。在鼠标指针没有经过的普通状态时，它就像不存在一样，因此也不用去设置它。而当鼠标指针经过时，就需要对它进行设置了。首先设置左右两个span共同存在的属性，代码如下。 折叠CSS 代码复制内容到剪贴板
这里依次进行了如下的设置工作。 ② 然后。将它设置为块级元素，因为span在默认情况下是行内元素。 ③ 设置为绝对定位方式，这就用到了前面所做的准备工作，将菜单项的a元素设置为相对定位，成为这里的span元素的定位基准。 ④ 再将高度和宽度都设置为0．这样才能产生三角形的箭头形状。 ⑤ 确保溢出部分隐藏起来，这个最后再进行补充说明。lodidance.com ⑥ 设置边框粗细为8像素。这是因为最前面把菜单的文字大小设置为了l6像素，因此这里边框宽度设置为8像素，就会产生高度为16像素的三角形，正好和文字高度匹配。 ⑦ 边框颜色与背景色相同，这样使得在默认情况下，上下左右边框都看不出边框的存在。 ⑧ 进行竖直方向的定位，设置为距离上边界4像素，由于前面设置的菜单项的padding为4像素，因此这里也设置为4像素。 上面设置的是文字左右的两个span元素的共同属性，接下来需要设置各自不同的属性，代码如下。 折叠CSS 代码复制内容到剪贴板
经验：为了便于调试，可以先将上面棒式中的“: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 代码复制内容到剪贴板
即明确地给出每个菜单项的宽度。这个130像素是如何计算出来的呢？外面的#menu容器宽度为140像素，这里希望它里面的a元素的宽度加上边框和padding的总宽度正好等于140像素。由于已经设定边框为1像素，padding为4像素，因此a元素的宽度应该设置为140-2×1-2×4=130像素。 最后，再来解释一下关于溢出样式的设定。前面已经看到，在对"#menu a:hover span"进行设置的时候，有如下代码。 折叠CSS 代码复制内容到剪贴板
此时的效果是Firefox的显示效果依然正确，但是在IE中就不正确了．这是因为即使span中没有任何内容，IE也会认为有默认的行高。如果加入这一行CSS代码，就可以使IE也能正确实现期望的效果了。 |
| 编辑：网页学习网 |
| 本文地址:http://www.lodidance.com/css/jc/703.html |
