首页 > 代码库 > 8.6 会跳起的多彩菜单

8.6 会跳起的多彩菜单

2024-07-08 20:57:35   222人阅读

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

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

图1 会跳起的多彩菜单
图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


联系
我们