7.5 带说明信息的菜单


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

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


图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. #menu a, #menu a:visited {
  10. text-decoration:none;             /*文字无下划线*/
  11. text-align:center;                /*文字水平居中对齐*/
  12. color:#c00;                       /*红色文字*/
  13. display:block;                    /*设置为块级元素*/
  14. padding:4px;                      /*内边距*/
  15. background-color:#fff;            /*背景色*/
  16. border:solid 1px #fff;            /*与背景色相同边框，防止跳动*/
  17. position:relative;                /*使用相对定位*/
  18. width:130px;
  19. }
  20. #menu a span {
  21. display:none;
  22. }
  23. #menu a:hover {
  24. border-color:#c00;                /*边框颜色红色*/
  25. }
  26. #menu a:hover span {
  27. display:block;                    /*设置为块级元素*/
  28. position:absolute;                /*使用绝对定位*/
  29. height:0;                         /*高度为0*/
  30. width:0;                          /*宽度为0*/
  31. overflow:hidden;                  /*防止溢出*/
  32. border:solid 8px #fff;            /*设置默认的边框样式*/
  33. top:4px;                          /*竖直方向的定位*/
  34. }
  35. #menu a:hover span.left {
  36. border-left-color:#c00;
  37. left:8px;
  38. }
  39. #menu a:hover span.rightright {
  40. border-right-color:#c00;
  41. rightright:8px;
  42. }
  43. #menu a:hover span.intro {
  44. font-size:12px;
  45. display:block;
  46. position:absolute; /*绝对定位*/
  47. left:150px;
  48. top:0px;
  49. padding:5px;
  50. width:100px;
  51. height:auto;
  52. background-color:#eee;
  53. color:#000;
  54. border:1px dashed #234;
  55. }
  56. </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

7.5 带说明信息的菜单,布布扣,bubuko.com

时间： 2024-10-14 12:13:39

7.5 带说明信息的菜单的相关文章

002带图标的程序菜单

技术要点: 要实现带图标的菜单,需要从CMenu类派生一个子类,并在子类中改写DrawItem方法和MeasureItem方法.基本思路如下: 首先,定义一个记录菜单项信息的结构CMenuItemInfo,该结构包含了菜单项的文本.图像索引.ID等信息. 然后,从CMenu中派生一个子类CIconMenu.在该类中定义一个方法ChangeMenuItem,利用递归的方式修改所有的菜单项信息,使其具有自绘风格(MF_OWNERDRAW). 接着,在CIconMenu类中定义绘制菜单项文本.绘制菜单

带下拉子菜单的导航菜单

一.带下拉子菜单的导航菜单 下拉菜单在一些企业网站应用尤为广泛,它存在使用方便,占用空间小等特点.之前纵向导航教程中已使用过二级导航,今天制作下横向导航菜单的二级菜单,方法和纵向一样,只不过由纵向改变为横向而已,下面我们以上一章第二节用图片美化的横向导航中的实例进行修改. 先在html代码增加二级菜单的代码: <div id=”menu”><ul><li><a id=”current” href=”#”>首页</a></li><

yii2通过foreach循环遍历在一个用户组中取出id去另一表里查寻信息并且带着信息合并原数组信息---案例

yii2通过foreach循环遍历在一个用户组中取出id去另一表里查寻信息并且带着信息合并元数组信息---案例 public function actionRandomLists(){ //查询到了所有用户的信息 $UserInfo=UserOperate::find()->select('id,username,sex,signature,lng,lat,imgs')->asArray()->all(); //循环遍历取出来所有的用户信息中想要的id,然后去另一数据表查询想要的内容 f

Windows Phone 带文本信息的进度条

2. [图片Windows Phone 带文本信息的进度条 详细说明:http://wp.662p.com/thread-7980-1-1.html

处理带说明信息的图片与处理文件上传 四（62）

一 .处理带说明信息的图片与处理文件上传  void delete()           删除保存在临时目录中的文件.     String getContentType()  获取文档的类型           Returns the content type passed by the browser or null if not defined. String getFieldName() 获取字段的名称,即name=xxxx           Returns the name of

MVC扩展控制器, 把部分视图转换成字符串(带验证信息), 并以json传递给前端视图

当我们使用jQuery异步提交表单数据的时候,需要把部分视图转换成字符串(带验证信息),以json的形式传递给前端视图. 使用jQuery异步加载部分视图,返回内容追加到页面某个div: jQuery异步提交失败,返回带验证失败信息的部分视图字符串,并追加到页面div: jQuery异步提交成功,返回显示提交成功的部分视图字符串,并追加到页面div: 一个简单的Model: using System.ComponentModel.DataAnnotations; namespace MvcApp

odoo学习之带出信息

pre.western { font-family: "Courier New", monospace } p { line-height: 120% } a:link { } # 输入客户带出它默认的发运方式和包装方式 def on_change_partner_id_return(self,cr,uid,ids,partner_id,context=None): result={} if partner_id:# 如果存在 #找到满足条件的值 obj=self.pool.get('

html5 + css3 带音效下拉菜单的实现

原文:scripts tutorials    (来自脚本教程网的教程,翻译可能有些不对...想要试试 音效下拉菜单 在这个教程中我们将讲述如何开发酷炫的音效下拉菜单(html5 + css3).下拉菜单有css3动画效果(菜单元素有整洁的悬浮特效)同时也使用了html5的Audio元素来添加菜单的音效,准备好了吗?那就开始吧. Musical drop down menu Our new tutorial tells about developing cool musical drop dow

使用http.cookiejar带cookie信息登录爬取方法 -《狗嗨默示录》-

Login.py # !/usr/bin/env python # -*- coding: utf-8 -*- import urllib.request import urllib.parse import user_info import http.cookiejar import re import time import socket cookie = http.cookiejar.CookieJar() #创建cookieJar保存cookie handler = urllib.req