首页 > 代码库 > 7.5 带说明信息的菜单

7.5 带说明信息的菜单

2024-07-08 20:27:06   226人阅读

现在在7.4节案例的基础上，制作一个能够显示说明信息的菜单，如图1所示。鼠标指针经过某一个菜单项的时候，会出现相应的说明信息。

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

图1 带说明信息的菜单效果
图1 带说明信息的菜单效果

在通常的状态下，这个菜单和7.4节中制作的菜单完全相同。而在鼠标指针经过菜单项的时候，在菜单右侧会出现一个矩形区域，里面分别写着对正在经过的菜单项的说明文字，这是一个很实用的效果。

一、基本思路

如果对7.4节的内容理解了，本案例的解决方法就很容易能想到。仍然是使用“钩子”的方法实现。

以7.4节案例的代码为基础，对于每一个菜单项的a元素，分别再增加一个span元素，里面输入相应的说明文字，代码如下（这里指摘录了前两个菜单项的内容，其他3个菜单项的实现是完全相同的）。lodidance.com

折叠XML/HTML 代码复制内容到剪贴板
  1. <body>  
  2.     <div id="menu">  
  3.        <a href="#">  
  4.             <span class="left"></span>    
  5.                Home    
  6.             <span class="right"></span>  
  7.             <span class="intro">这里说明Home菜单项</span>  
  8.         </a>    
  9.        <a href="#">  
  10.             <span class="left"></span>  
  11.                Contact Us   
  12.             <span class="right"></span>  
  13.             <span class="intro">这里说明Contact Us菜单项</span>  
  14.        </a>  
  15.        <a href="#">  
  16.             <span class="left"></span>  
  17.                 Web Dev   
  18.             <span class="right"></span>       
  19.             <span class="intro">这里说明Web Dev菜单项</span>  
  20.        </a>    
  21.        <a href="#">  
  22.             <span class="left"></span>  
  23.                 Web Design   
  24.             <span class="right"></span>    
  25.             <span class="intro">这里说明Web Design菜单项</span>  
  26.        </a>    
  27.        <a href="#">  
  28.             <span class="left"></span>  
  29.                 Map   
  30.             <span class="right"></span>  
  31.             <span class="intro">这里说明Map菜单项</span>  
  32.         </a>       
  33.     </div>  
  34. </body>  

接下来的基本思路是，首先在默认状态下，把这些说明信息隐藏起来，当鼠标指针经过某一个菜单项的时候，再打开该span就可以了。

二、设置方法

由于本例是在7.4节案例的基础上完成的，因此对其修改的内容并不多，这里就把CSS样式代码全部抄录，然后选择修改的位置进行讲解。如果读者对7.4节的案例还有不清楚的地方，也可以参考这里完整的代码。

折叠CSS 代码复制内容到剪贴板
  1. <style>   
  2. #menu {                         /*对menu层设置*/  
  3.    font-family:Arial;           /*字体*/  
  4.    font-size:16px;              /*字号*/  
  5.    width:140px;                 /*宽度*/  
  6.    margin:0;                    /*菜单项之间间隔0.5em，并水平居中*/  
  7.    border:solid 1px #ccc;       /*灰色细边框*/  
  8.    }   
  9.   
  10. #menu a, #menu a:visited {   
  11.   text-decoration:none;             /*文字无下划线*/  
  12.   text-align:center;                /*文字水平居中对齐*/  
  13.   color:#c00;                       /*红色文字*/  
  14.   display:block;                    /*设置为块级元素*/  
  15.   padding:4px;                      /*内边距*/  
  16.   background-color:#fff;            /*背景色*/  
  17.   border:solid 1px #fff;            /*与背景色相同边框，防止跳动*/  
  18.   position:relative;                /*使用相对定位*/  
  19.   width:130px;   
  20.   }   
  21.   
  22. #menu a span {   
  23.   display:none;   
  24.   }   
  25. #menu a:hover {   
  26.   border-color:#c00;                /*边框颜色红色*/  
  27.   }   
  28.      
  29. #menu a:hover span {   
  30.   display:block;                    /*设置为块级元素*/  
  31.   position:absolute;                /*使用绝对定位*/  
  32.   height:0;                         /*高度为0*/  
  33.   width:0;                          /*宽度为0*/  
  34.   overflow:hidden;                  /*防止溢出*/  
  35.   border:solid 8px #fff;            /*设置默认的边框样式*/  
  36.   top:4px;                          /*竖直方向的定位*/    
  37.   }   
  38.   
  39.   #menu a:hover span.left {   
  40.   border-left-color:#c00;   
  41.   left:8px;   
  42.   }   
  43.   
  44.   #menu a:hover span.rightright {   
  45.   border-right-color:#c00;   
  46.   rightright:8px;   
  47.   }   
  48.     
  49.  #menu a:hover span.intro {   
  50.   font-size:12px;   
  51.   display:block;    
  52.   position:absolute; /*绝对定位*/  
  53.   left:150px;    
  54.   top:0px;    
  55.   padding:5px;    
  56.   width:100px;   
  57.   height:auto;   
  58.   background-color:#eee;    
  59.   color:#000;    
  60.   border:1px dashed #234;   
  61.   }   
  62. </style>

首先观察第3段代码，也就是为“#menu a span”设置的CSS样式，它的作用是在普通状态下，将所有span元素都隐藏起来，使用的CSS语句是：lodidance.com

折叠CSS 代码复制内容到剪贴板
  1. display:block;

接着观察最后一段代码，它的作用是设定说明信息span的具体样式。其中的设置方法，包括定位的方法，都与上一节中的案例相同。使用绝对定位，以a元素为定位基准。

需要注意的是关于height的设置。这里将height的值设置为auto，如果没有这一行，在Firefox中的效果将会显示不全，因此这里设为auto，以使它的高度适应文字的需要，这时效果就如图1所示了。

本章重点

在这一章里，制作了5个竖直方向的导航菜单。需要读者特别注意的有以下几个CSS基础知识和技巧。

(1) 相邻盒子的margin在竖直方向相遇时的“塌陷”现象，水平方向则没有该现象。

(2) 在一系列盒子排列后，如何对头尾盒子进行单独的样式设置，可以为它们单独设置类别，或者是伪类，但需要注意浏览器对伪类的支持情况。

(3) 通过粗边框的颜色设置可以产生出斜角效果，如果充分利用可以产生有趣的效果。

(4) 为了防止鼠标指针经过时造成边框的跳动，可以在通常状态添加与背景色相同的边框。

(5) 相对定位的含义是以自身原来所在位置为基准进行偏移。

(6) “包含块”的定义方法，绝对定位是以包含块为基准进行偏移的。

(7)为了使某个盒子绝对定位，它的上一级元素可以设为相对定位．从而变成“包含块”。

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

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


联系
我们