8.6 会跳起的多彩菜单


本案例将在8.5节的基础上来制作会跳起的多彩菜单，效果如图1所示。在平常状态时，各菜单项的高度都同样，而当鼠标指针经过某一个菜单项的时候，该菜单项就会跳起，高于其他菜单项。这个效果非常有趣，能够吸引访问者的目光。

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


图1 会跳起的多彩菜单

注意：本案例的制作完全基于8.5节的最终成果进行，因此请读者一定先做出8.5节的效果，再学习本案例。

一、实现跳起效果

这里来实现跳起的效果，基于8.5节的制作过程，自然会想到，这里让某个菜单项跳起来，就是让菜单项在鼠标指针经过时，使菜单文字所在的p段落变高一些，那么只要给它的padding-bottom增加若干像素就可以了。

先来试验一下，在“.item a:hover p”中增加对padding-bottom的设置，代码如下。

折叠展开CSS 代码复制内容到剪贴板

  1. .item a:hover p{
  2. background:#884;
  3. color:#fff;
  4. padding-bottom:10px;
  5. }

在浏览器中看到如图效果，并不是希望的效果，会错误的跳起。

分析：这是由于每个菜单性都是向左浮动排列的，这些盒子都是根据上边缘对齐的，如果某个菜单项中的p段落变高了，它自然就会向下延伸，而不是向上延伸。网页学习网CSS教程资源中的"第8章\06\wrong-method.htm"文件是这种错误效果的页面，请读者参考。

解决办法是实现为每一个菜单项的上面增加一个预留的高度空间，然后在鼠标指针经过某一个菜单项的时候，使该菜单项的预留空间高度变为0，同时增加下面的p段落的高度。这样，如果计算精确，就可以实现跳起的效果了。

具体的做法如下。

① 首先改造HTML。在每一个li中，增加一个div．这里把类别名设为“pad”，即垫子的意思，代码如下。这里的代码只抄录了一个Ii的代码，其余3个都是相同的。

折叠展开XML/HTML 代码复制内容到剪贴板

  1. <li>
  2. <a href="#">
  3. <div class="pad"></div>
  4. <div class="row1"></div> <div class="row2"></div>
  5. <div class="row3"></div> <div class="row4"></div>
  6. <p>Home</p>
  7. </a>
  8. </li>

② 对这个“垫子”div设置CSS样式，代码如下。

折叠展开CSS 代码复制内容到剪贴板

  1. .item .pad{
  2. height:10px;
  3. border:0;
  4. background:transparent;
  5. }

上面代码将“垫子”设置为10像素高，边框为0，背景色为透明，这样这个“垫子”看起来就好像不存在一样。lodidance.com

③ 分别设置“垫子”和p段落在鼠标指针经过时的样式，代码如下。

折叠展开CSS 代码复制内容到剪贴板

  1. .item a:hover p{
  2. background:#884;
  3. padding-bottom:12px;
  4. }
  5. .item a:hover .pad{
  6. height:0px;
  7. }

在鼠标指针经过时，“垫子”的高度变为0，菜单文字所在的p段落的padding-bottom变为12像素。注意这里的12像素是因为原本p段落的padding-bottom是2像素，这里加上垫子所占的10像素，因此一共12像素。此时在浏览器巾的效果如图1所示，已经可以正确地实现“跳起”的效果了。

网页学习网CSS教程资源中的“第8章\06\popup-navi.hLm”文件是制作到这时的文件，请读者参考。

二、实现多彩效果

为了实现各个菜单项的不同颜色，仍需要对HTML进行改造。为了使各个菜单的颜色不同，可以为每种所需颜色设置一个类别，分别分配给相应的菜单项。

① 若想让第1个菜单项以橘黄色显示，就要在li的类别声明中增加一个orange类别名。注意和前而原先的item类别名之间留一个空格，代码如下：lodidance.com

折叠展开XML/HTML 代码复制内容到剪贴板

  1. <li class="item orange">
  2. <a href="#">
  3. <div class="pad"></div>
  4. <div class="row1"></div> <div class="row2"></div>
  5. <div class="row3"></div> <div class="row4"></div>
  6. <p>Home</p>
  7. </a>
  8. </li>

② 其余3个菜单项也同样处理，颜色分别为黄色、绿色和蓝色，相应增加的类别名称分别为yellow、green和blue。

③ 接下来对增加的这4个类别的css样式进行设置。平常状态颜色设置的代码如下。这里将文字所在的p段落以及row2、row3和row4这4个对象的背景色设置为橘黄色（#fa0）。为什么不设置row1呢？因为row1自有一条黑色边框，所以不需要设置背景色。

折叠展开CSS 代码复制内容到剪贴板

  1. .orange p,
  2. .orange .row2,
  3. .orange .row3,
  4. .orange .row4,
  5. {
  6. background:#fa0;
  7. }

④ 设置鼠标指针经过时的颜色，代码如下。

折叠展开CSS 代码复制内容到剪贴板

  1. .orange a:hover p,
  2. .orange a:hover .row2,
  3. .orange a:hover .row3,
  4. .orange a:hover .row4,
  5. {
  6. background:#fa0;
  7. }

⑤ 其余3个菜单项做相同处理，黄、绿、蓝3种颜色使用的颜色值依次为#ff0、#0e0和#0cf，读者可以随意选择自己喜欢的颜色。

分析：由于普通状态与跳起状态的背景色相同，使用的都是比较浅的颜色，因此在鼠标指针经过时，文字的颜色就不必变成白色了，否则文字会不容易看清楚。

⑥ 在“.item a:hover p”中，将8.5节对文字颜色的设置删除，就会在鼠标指针经过时仍使用黑色文字。这时在浏览器中的效果如图1所示。

网页学习网CSS教程资源中的“第8章\06\colorful-navi．htm”文件是制作到这时的文件，请读者参考。这个例子比较复杂，在下一小节中将给出本案例的完整的代码，供读者逐行分析理解。

三、本案例完整代码

在进行比较复杂的CSS设计时，可以准备一张草稿纸，经常画一画草图，计算准确是很重要的。本案例的完整代码如下。

折叠展开XML/HTML 代码复制内容到剪贴板

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>会跳起的多彩菜单</title>
  6. <style type="text/css">
  7. ul{
  8. height:26px;
  9. margin:0;
  10. padding:10px;
  11. list-style-type:none;
  12. background:#ddd;
  13. }
  14. .item{
  15. float:left;
  16. width:100px;
  17. margin:0 -1px 0 0;
  18. padding 0;
  19. font: 14px Arial;
  20. font-weight:bold;
  21. }
  22. .item p{
  23. padding:0 0 2px 0;
  24. margin:0px;
  25. text-align:center;
  26. background:#cc6;
  27. border:solid 1px  #000;
  28. border-top-width:0;
  29. }
  30. .item div{
  31. height:1px;
  32. overflow:hidden;
  33. background:#cc6;
  34. border-left:solid 1px  #000;
  35. border-right:solid 1px  #000;
  36. }
  37. .item .pad{
  38. height:10px;
  39. border:0;
  40. background:transparent;
  41. }
  42. .item .row1{
  43. margin:0 5px;
  44. background:#000;
  45. }
  46. .item  .row2{
  47. margin:0 3px;
  48. border:0 2px;
  49. }
  50. .item .row3{
  51. margin:0 2px;
  52. }
  53. .item .row4{
  54. margin:0 1px;
  55. height:2px;
  56. }
  57. .item a , .item a:visted{
  58. display:block;
  59. color:#000;
  60. text-decoration:none;
  61. }
  62. .item a:hover{
  63. background:transparent;
  64. }
  65. .item a:hover p{
  66. background:#884;
  67. padding-bottom:12px;
  68. }
  69. .item a:hover .pad{
  70. height:0px;
  71. }
  72. .item a:hover .row2,
  73. .item a:hover .row3 ,
  74. .item a:hover .row4{
  75. background:#884;
  76. }
  77. .orange p,
  78. .orange .row2,
  79. .orange .row3,
  80. .orange .row4,
  81. {
  82. background:#fa0;
  83. }
  84. .orange a:hover p,
  85. .orange a:hover .row2,
  86. .orange a:hover .row3,
  87. .orange a:hover .row4,
  88. {
  89. background:#fa0;
  90. }
  91. .yellow p,
  92. .yellow .row2,
  93. .yellow .row3,
  94. .yellow .row4,
  95. {
  96. background:#ff0;
  97. }
  98. .yellow a:hover p,
  99. .yellow a:hover .row2,
  100. .yellow a:hover .row3,
  101. .yellow a:hover .row4,
  102. {
  103. background:#ff0;
  104. }
  105. .green p,
  106. .green .row2,
  107. .green .row3,
  108. .green .row4,
  109. {
  110. background:#0e0;
  111. }
  112. .green a:hover p,
  113. .green a:hover .row2,
  114. .green a:hover .row3,
  115. .green a:hover .row4,
  116. {
  117. background:#0e0;
  118. }
  119. .blue p,
  120. .blue .row2,
  121. .blue .row3,
  122. .blue .row4,
  123. {
  124. background:#0cf;
  125. }
  126. .blue a:hover p,
  127. .blue a:hover .row2,
  128. .blue a:hover .row3,
  129. .blue a:hover .row4,
  130. {
  131. background:#0cf;
  132. }
  133. </style>
  134. </head>
  135. <body>
  136. <ul>
  137. <li class="item orange"><a href="#">
  138. <div class="pad"></div>
  139. <div class="row1"></div> <div class="row2"></div>
  140. <div class="row3"></div> <div class="row4"></div>
  141. <p>Home</p>
  142. </a>
  143. </li>
  144. <li class="item yellow"><a href="#">
  145. <div class="pad"></div>
  146. <div class="row1"></div> <div class="row2"></div>
  147. <div class="row3"></div> <div class="row4"></div>
  148. <p>Contact Us</p>
  149. </a>
  150. </li>
  151. <li class="item green"><a href="#">
  152. <div class="pad"></div>
  153. <div class="row1"></div> <div class="row2"></div>
  154. <div class="row3"></div> <div class="row4"></div>
  155. <p>Web Dev</p>
  156. </a>
  157. </li>
  158. <li class="item blue"><a href="#">
  159. <div class="pad"></div>
  160. <div class="row1"></div> <div class="row2"></div>
  161. <div class="row3"></div> <div class="row4"></div>
  162. <p>Map</p>
  163. </a>
  164. </li>
  165. </ul>
  166. </body>
  167. </html>

四、实现向下弹出效果

菜单向上弹出的效果已经比较完善了，最后再给读者提出一个思考题。如果要制作一个向下的弹出菜单，制作方法和上面有哪些相同之处，又有哪些不同之处？

倒转每个菜单项，实际上只需要把row1—row4这4个div移动到p段落的下面就可以了，然后把p段落的下边框设置为0，而上边框设置为1像素，就可实现了。

而要实现向下弹起，就更简单了，不需要使用“垫子”div，直接把p段落的paddjng-top值增加就可以实现跳起了。

这里只列出修改后的HTML代码，至于CSS的修改方法，相信读者完全可以自己解决了。HTML代码如下。

折叠展开XML/HTML 代码复制内容到剪贴板

  1. <body>
  2. <ul>
  3. <li class="item orange"><a href="#">
  4. <p>Home</p>
  5. <div class="row4"></div> <div class="row3"></div>
  6. <div class="row2"></div> <div class="row1"></div>
  7. </a>
  8. </li>
  9. ……这里省略其他三个菜单项……
  10. </ul>
  11. </body>

网页学习网CSS教程资源中的“第8章\06\popdown-navi.htm”文件是制作完成的“向下弹出”效果的文件，请读者参考。

本章重点

在本章中，实现了6个水平方向的菜单，主要需要掌握以下基本要点。

(1) 设置浮动方式，以及是否适应宽度的设置方法。

(2) 不使用图像，实现斜角和圆角的方法。

(3) 使用背景图片的滑动门技术。

(4) 理解本章案例中的“钩子”和“垫子”的用途。

点击下载第8~17章CSS教程资源 返回《CSS教程布局之道》教程列表
编辑：网页学习网
本文地址:http://www.lodidance.com/css/jc/727.html

8.6 会跳起的多彩菜单,布布扣,bubuko.com

时间： 2024-10-24 06:15:00

8.6 会跳起的多彩菜单的相关文章

9.3 制作下拉菜单(2)

一.对子菜单项(dd)进行设置 设置子菜单项的样式分为3步. ① 首先对每个子菜单项,也就是dd元素进行常规设置,包括文字颜色.背景色等,代码如下. 折叠展开CSS 代码复制内容到剪贴板 /* 设置菜单项的dd */ #menu li dd { margin:0; padding:0; color: #fff; background: #47a; } ② 为了使最下面的dd的下端和dI的下侧padding之间有一条暗红色分割线,设置1像素的下边框,代码如下.它在视觉上与上面的分割线相呼应,同时也

从零开始学android&lt;GridView网格视图.二十八.&gt;

GridView组件是以网格的形式显示所有的组件,例如:在制作相册的时候,所有的图片都会以相同大小显示在不同的格子之中,就可以依靠此组件完成,此组件的继承结构如下所示: java.lang.Object ? android.view.View ? android.view.ViewGroup ? android.widget.AdapterView<T extends android.widget.Adapter> ? android.widget.AbsListView ? android.

jQuery制作一个多彩下拉菜单按钮

最终效果图: html代码: 1 <div id="list"> 2 <div id="btn"> 3 <div class="icon"> 4 <span></span> 5 <span></span> 6 <span></span> 7 </div> 8 </div> 9 <ul> 10 <li

Colorful(Folders星语多彩文件夹) v1.7绿色版

软件名称:星语多彩文件夹ColorfulFolders v1.7绿色版软件类别:国产软件运行环境:WinXP/2003/Vista/Win7/Win2008软件语言:简体中文授权方式:免费版软件大小:647 KB软件等级:整理时间:2012-01-03 17:10:44插件情况:软件有弹出窗口! 该软件经过四种杀毒软件检测,结果如下:卡巴检测:安全 瑞星检测:安全 江民检测:安全 麦咖啡检测:安全 软件截图: 软件简介:星语多彩文件夹(ColorfulFolders) 可以帮助你轻松改变任何文件

设计多彩下拉列表样式

多彩下拉列表样式: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&quo

免费css3技巧：时间线, Nexus 7, 滑动和菜单.

1.使用css3和jQuery的作品时间线 非常感谢tutorizlzine,在这篇教程中,我们可以看到一个由jQuery插件展示的作品事件的时间线.你可以添加很多种媒体类型,包括文章.视屏和地图等 In this great tutorial thanks to Tutorialzine we look at Timeline, a jQuery plugin specialized in showing a chronological series of events. You can em

树形菜单 jsTree 使用方法

jsTree版本:3.0.4 在ASP.NET MVC中使用jsTree Model: public class Department { public int Id { get; set; } public string Name { get; set; } public int PId { get; set; } } 数据库: Controller: jsTree既可以一次性把所有节点都加载到客户端,也可以只加载一层,点击节点后再去服务端获取下层节点.对于小的菜单可以一次性加载完,如果节点很

微信 小程序布局 水平菜单

<!-- 菜单列表部分 --> <view class="wear-menu"> <view class='menu-box' wx:key="menu" wx:for="{{menuList}}" wx:for-index="index"> <view class="menu-img" bindtap="selectMenu" data-ind

微信公众号菜单开发以及授权详细说明

主代码请参考:http://www.cnblogs.com/hopelooking/p/7463934.html 难点解析: 在微信创建菜单的时候我们惯用的是curl,但是菜单中难免是要有中文的,如果你的php版本是5.4版本的话,那么一定会报错的,主要错误原因是对象或者字符串之间的错误,那么我们在使用json_encode的时候就不能单纯的只是json一下了,应该json_encode($data,JSON_UNESCAPED_UNICODE) 例子: public function acti