7.4 箭头菜单


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


图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. #menu a:hover span.rightright {
  6. border-right-color:#c00;
  7. rightright:8px;
  8. }

经验：为了便于调试，可以先将上面棒式中的“: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

7.4 箭头菜单,布布扣,bubuko.com

时间： 2024-10-06 03:10:25

7.4 箭头菜单的相关文章

iOS 带箭头菜单选项弹窗LFPopupMenu

一.效果图 由于是模拟器缩得比较小,一些细线可能显示不出来,不是bug哈. 二.用法 LFPopupMenuItem *item1 = [LFPopupMenuItem createWithTitle:@"小视频" image:[UIImage imageNamed:@"icon_menu_record_normal"]]; LFPopupMenuItem *item2 = [LFPopupMenuItem createWithTitle:@"拍照&quo

50个jQuery插件可将你的网站带到另一个高度

Web领域一直在发生变化并且其边界在过去的每一天都在发生变化(甚至不能以小时为计),随着其边界的扩展取得了许多新发展.在这些进步之中,开发者的不断工作创造了更大和更好的脚本,这些脚本以插件方式带来更好的终端用户体验,它们比原来更轻量级,还有更强的处理能力. 关键是这些新发展起来的脚本和插件是能构建响应式Web的,而且还不会丧失它们原有的功能特性——除了更优秀和更轻巧(就文件大小而言)之外,它们还不会增加页面加载的时间. 通过浏览文档,掌握JQuery的语法是很容易的.它可以支持选择DOM元素,创

Android自定义ViewGroup（一）——带箭头的圆角矩形菜单

今天要做一个带箭头的圆角矩形菜单,大概长下面这个样子: 要求顶上的箭头要对准菜单锚点,菜单项按压反色,菜单背景色和按压色可配置. 最简单的做法就是让UX给个三角形的图片往上一贴,但是转念一想这样是不是太low了点,而且不同分辨率也不太好适配,干脆自定义一个ViewGroup吧! 自定义ViewGroup其实很简单,基本都是按一定的套路来的. 一.定义一个attrs.xml 就是声明一下你的这个自定义View有哪些可配置的属性,将来使用的时候可以自由配置.这里声明了7个属性,分别是:箭头宽度.箭头

疑难杂症之开始菜单黑色箭头不见了

当你使用360优化开机速度的时候有可能会发现开始菜单里的黑色箭头不见了,这虽然不会影响编码但是会很不爽也很不方便 当你在网上搜了许多方法还不能搞定的时候 不妨这样做一下 如果 发现第二个选项不能选中 “搜索程序和文件”那里输入“gpedit.msc”,打开“组策略”, 依次选择“用户配置”——“管理模板”——“开始菜单和任务栏”——“关闭用户跟踪”, 选择“未配置” “搜索程序和文件”那里输入“gpedit.msc”,打开“组策略”, 依次选择“用户配置”——“管理模板”——“开始菜单和任务栏”

CSS制作的导航菜单向上箭头

使用纯CSS技术制作导航菜单上的向上箭头图标,不使用图片,用CSS实现,挑战自己的CSS布局水平,最终效果自己满意,如果您对此感兴趣的话,就要好好研究一下CSS代码啦. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="h

Android 菜单箭头切换控件

在android 的材料设计上有一种菜单按钮和箭头之间互相切换的效果十分吸引人. 前两天看到一个应用使用了这个效果特地把这个控件拿出来学习一下 1 package com.example.drawablearrow; 2 3 4 import android.content.Context; 5 import android.graphics.Canvas; 6 import android.graphics.ColorFilter; 7 import android.graphics.Pain

QT之二级菜单（二级菜单的箭头可以使用QSS设置图片）

QT之二级菜单 QT之二级菜单 开场白 效果图 上代码 可参考文章 下代码 结尾 开场白 今天我们一起来了解下,在我们QT中,二级菜单是如何实现的,在上篇我们学习了QT之系统托盘,QT之自定义菜单, QT之样式styleSheet.今天我们在这基础上,增加二级菜单的功能. 效果图 大家注意下这里箭头,不是用的默认效果哦,还是自定义的好看哈!O(∩_∩)下面这张图示是默认的.  上代码 void SysTray::addSysTrayMenu() { CustomMenu* customMenu

Winform控件之菜单控件，工具栏控件和状态栏控件

菜单是用户获取应用程序中主要功能和实用程序的主要途径,如新建文件,打开文件等,这就需要用到菜单控件(MenuStrip).工具栏另一种获取应用程序主要功能的常用方法,比起菜单要直观,这就需要用到工具栏控件(ToolStrip).状态栏用于显示用户状态的简短信息,这就需要用到状态栏控件(StatusStrip). 一,MenuStrip控件和ContenxMenuStrip控件 MenuStrip控件是由System.Windows.Forms.MenuStrip类提供的,取代了以前的MainMe

菜单和工具栏

1.ContextMenuStrip右键菜单 控件/窗体属性中的行为属性中ContextMenuStrip来进行选择使用 2.MenuStrip可以自己编辑的的菜单栏 每一个选项都有自己的属性 属性中外观属性Image设置每个选项前面的小图标 "-"作为分割线,也可以右键选择插入,里面也有分割线 右键插入标准项,可以插入程序自带的模板,减少编辑时间 选中某个选项,找到属性中的ShortCutKey来实现编辑这个选项的快捷键 菜单栏右边还有个小箭头.也可选择添加ComBox下拉菜单,和T