码迷，mamicode.com
首页 > 其他好文 > 详细

8.6 会跳起的多彩菜单

时间：2014-06-20 14:38:27      阅读：272      评论：0      收藏：0      [点我收藏+]

标签：style   class   blog   code   java   http   

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

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

bubuko.com,布布扣
图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.   
  6. .item a:hover .pad{   
  7.     height:0px;   
  8. }

在鼠标指针经过时，“垫子”的高度变为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.   
  4. <head>  
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  6. <title>会跳起的多彩菜单</title>  
  7. <style type="text/css">  
  8. ul{   
  9.     height:26px;   
  10.     margin:0;   
  11.     padding:10px;   
  12.     list-style-type:none;   
  13.     background:#ddd;   
  14. }   
  15.   
  16. .item{   
  17.     float:left;   
  18.     width:100px;   
  19.     margin:0 -1px 0 0;   
  20.     padding 0;   
  21.     font: 14px Arial;   
  22.     font-weight:bold;   
  23.     }   
  24.   
  25. .item p{   
  26.     padding:0 0 2px 0;   
  27.     margin:0px;   
  28.     text-align:center;   
  29.     background:#cc6;   
  30.     border:solid 1px  #000;    
  31.     border-top-width:0;   
  32. }   
  33.   
  34. .item div{   
  35.     height:1px;   
  36.     overflow:hidden;   
  37.     background:#cc6;   
  38.     border-left:solid 1px  #000;    
  39.     border-right:solid 1px  #000;   
  40. }   
  41.   
  42. .item .pad{   
  43.     height:10px;   
  44.     border:0;   
  45.     background:transparent;   
  46. }   
  47.   
  48. .item .row1{   
  49.     margin:0 5px;   
  50.     background:#000;   
  51. }   
  52.   
  53. .item  .row2{   
  54.     margin:0 3px;   
  55.     border:0 2px;   
  56. }   
  57.   
  58. .item .row3{   
  59.     margin:0 2px;   
  60. }   
  61. .item .row4{   
  62.     margin:0 1px;   
  63.     height:2px;   
  64. }   
  65.   
  66.   
  67. .item a , .item a:visted{   
  68.     display:block;   
  69.     color:#000;   
  70.     text-decoration:none;   
  71. }   
  72.   
  73. .item a:hover{   
  74.     background:transparent;   
  75. }   
  76.   
  77. .item a:hover p{   
  78.     background:#884;   
  79.     padding-bottom:12px;   
  80. }   
  81.   
  82. .item a:hover .pad{   
  83.     height:0px;   
  84. }   
  85.   
  86. .item a:hover .row2,   
  87. .item a:hover .row3 ,   
  88. .item a:hover .row4{   
  89.     background:#884;   
  90. }   
  91.   
  92.   
  93. .orange p,   
  94. .orange .row2,   
  95. .orange .row3,   
  96. .orange .row4,   
  97. {   
  98.     background:#fa0;   
  99. }   
  100.   
  101. .orange a:hover p,   
  102. .orange a:hover .row2,   
  103. .orange a:hover .row3,   
  104. .orange a:hover .row4,   
  105. {   
  106.     background:#fa0;   
  107. }   
  108.   
  109. .yellow p,   
  110. .yellow .row2,   
  111. .yellow .row3,   
  112. .yellow .row4,   
  113. {   
  114.     background:#ff0;   
  115. }   
  116.   
  117. .yellow a:hover p,   
  118. .yellow a:hover .row2,   
  119. .yellow a:hover .row3,   
  120. .yellow a:hover .row4,   
  121. {   
  122.     background:#ff0;   
  123. }   
  124. .green p,   
  125. .green .row2,   
  126. .green .row3,   
  127. .green .row4,   
  128. {   
  129.     background:#0e0;   
  130. }   
  131.   
  132. .green a:hover p,   
  133. .green a:hover .row2,   
  134. .green a:hover .row3,   
  135. .green a:hover .row4,   
  136. {   
  137.     background:#0e0;   
  138. }   
  139.   
  140.   
  141. .blue p,   
  142. .blue .row2,   
  143. .blue .row3,   
  144. .blue .row4,   
  145. {   
  146.     background:#0cf;   
  147. }   
  148.   
  149. .blue a:hover p,   
  150. .blue a:hover .row2,   
  151. .blue a:hover .row3,   
  152. .blue a:hover .row4,   
  153. {   
  154.     background:#0cf;   
  155. }   
  156.   
  157.   
  158. </style>  
  159. </head>  
  160.   
  161. <body>  
  162. <ul>  
  163.     <li class="item orange"><a href="#">  
  164.       <div class="pad"></div>  
  165.       <div class="row1"></div> <div class="row2"></div>  
  166.       <div class="row3"></div> <div class="row4"></div>  
  167.       <p>Home</p>  
  168.     </a>  
  169.     </li>  
  170.     <li class="item yellow"><a href="#">  
  171.       <div class="pad"></div>  
  172.       <div class="row1"></div> <div class="row2"></div>  
  173.       <div class="row3"></div> <div class="row4"></div>  
  174.       <p>Contact Us</p>  
  175.     </a>  
  176.     </li>  
  177.     <li class="item green"><a href="#">  
  178.       <div class="pad"></div>  
  179.       <div class="row1"></div> <div class="row2"></div>  
  180.       <div class="row3"></div> <div class="row4"></div>  
  181.       <p>Web Dev</p>  
  182.     </a>  
  183.     </li>  
  184.     <li class="item blue"><a href="#">  
  185.       <div class="pad"></div>  
  186.       <div class="row1"></div> <div class="row2"></div>  
  187.       <div class="row3"></div> <div class="row4"></div>  
  188.       <p>Map</p>  
  189.     </a>  
  190.     </li>  
  191. </ul>  
  192. </body>  
  193.   
  194. </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

8.6 会跳起的多彩菜单

标签：style   class   blog   code   java   http   

原文地址：http://www.cnblogs.com/you-me/p/3796841.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！