CSS3制作炫酷的下拉菜单及弹起式选单的实例分享

互联网
所有的人都想停留在那山顶，但是所有的乐趣和成长都是发生在往上爬的过程中。新的一天，早安！

下拉菜单
先直接来看效果是怎样：

当鼠标移到选单之后，下方会展开并有其它说明内容，我这边是把展开的部份加上图片内容，让它有其它不同的变化。因为这样的动作就像人家庙会时会有舞狮从嘴里丢下贺联一样，所以我才取名为"贺联式选单"。

这样的效果其实只需要 HTML 及 CSS 配合就能做出来了，我们先来看 HTML 的部份：
检视原始码 HTML

XML/HTML Code复制内容到剪贴板
  1. <body>
  2. <ul>
  3. <li>
  4. <aclass="t1"rel="nofollow noopener noreferrer" href="#">梅干桑
  5. <div>自我介绍</div>
  6. </a>
  7. </li>
  8. <li>
  9. <aclass="t2"rel="nofollow noopener noreferrer" href="#">Photoshop
  10. <div>上课囉!!</div>
  11. </a>
  12. </li>
  13. <li>
  14. <aclass="t3"rel="nofollow noopener noreferrer" href="#">Q＆A
  15. <div>问题讨论</div>
  16. </a>
  17. </li>
  18. <li>
  19. <aclass="t4"rel="nofollow noopener noreferrer" href="#">男丁格尔</a>
  20. </li>
  21. <li>
  22. <aclass="t5"rel="nofollow noopener noreferrer" href="#">人材
  23. <div>丁丁是人材</div>
  24. </a>
  25. </li>
  26. <li>
  27. <aclass="t6"rel="nofollow noopener noreferrer" href="#">格言
  28. <div>好话大家说</div>
  29. </a>
  30. </li>
  31. <li>
  32. <aclass="t7"rel="nofollow noopener noreferrer" href="http://www.wowgame.tw">WOWGame</a>
  33. </li>
  34. </ul>
  35. </body>

使用 UL 及 LI 来做选单的项目，每一个 LI 中的 A 连结是我们主要的选单内容，而其 DIV 是更进阶的描述内容，若不需要的话则可以不用加。因为我要让每个选单都有不同的背景图，所以还需要帮 A 连结都加一个独立的 class。

然后，我有 7 个 LI 选单项目，因此我还请梅干帮忙准备了 7 张图片(果然还是要专业的来)。接着就能开始动手写 CSS 囉：
检视原始码 CSS

CSS Code复制内容到剪贴板
  1. ul{
  2. margin:0;
  3. padding:0;
  4. list-style:none;
  5. }
  7. ulli{
  8. float:left;
  9. }
  11. ullia{
  12. width:100px;
  13. height:50px;
  14. display:block;
  15. line-height:50px;
  16. overflow:hidden;
  17. text-align:center;
  18. text-decoration:none;
  19. color:#fff;
  20. }
  22. ullia:hover{
  23. height:150px;
  24. }
  26. ulliadiv{
  27. color:#fff;
  28. line-height:16px;
  29. font-weight:bold;
  30. margin-top:73px;
  31. padding-top:7px;
  32. border-top:1pxdotted#fff;
  33. }
  35. .t1{background:#08f2d6url(01.gif);}
  36. .t2{background:#1209f1url(02.gif);}
  37. .t3{background:#a202e2url(03.gif);}
  38. .t4{background:#f4e603url(04.gif);}
  39. .t5{background:#55df07url(05.gif);}
  40. .t6{background:#02a8f3url(06.gif);}
  41. .t7{background:#f6025eurl(07.gif);}

这边用到的 CSS 语法都是很基础的，比较需要注意的是我们一开始 A 连结的 height 是 50px，所以超过的部份会因为 overflow 为 hidden 的关系而被隐藏起来；另外，当鼠标移到 A 连结后，再额外订了一个 a:hover { } 来把它的 height 撑高，因此原本看不到的背景部份就会显现出来了。

到这边就整个都完成了，一开始浏览时就只有一排的选单

当鼠标移到选项后就会显示完整的背景内容

且我们的选单一样是有超连结的功能，是不是很有趣呢！如果要让效果更优的话，当然还是需要 JavaScript 的配合才行唷！

弹起式页签选单
一样先直接来看效果是怎样：

跟上一个例子不同的是在此次是鼠标移到选单后会往上升，就象是突然弹起来一样。

这样的效果一样只需要 HTML 及 CSS 就能做出来了，我们先来看 HTML 的部份：

检视原始码 HTML

XML/HTML Code复制内容到剪贴板
  1. <body>
  2. <ulid="menu">
  3. <li><arel="nofollow noopener noreferrer" href="#"class="home">首页</a></li>
  4. <li><arel="nofollow noopener noreferrer" href="#"class="car">购物车</a></li>
  5. <li><arel="nofollow noopener noreferrer" href="#"class="good">推荐商品</a></li>
  6. <li><arel="nofollow noopener noreferrer" href="#"class="query">订单查询</a></li>
  7. </ul>
  8. </body>

同样是用 UL 及 LI 来做选单的项目，每一个 LI 中的 A 连结是我们主要的选单内容，且为了让每个选单都有不同的选单图片，所以还帮 A 连结都加一个独立的 class。

接着开始动手写 CSS 囉：
检视原始码 CSS

CSS Code复制内容到剪贴板
  1. #menu{
  2. margin:20px00;
  3. padding:0;
  4. height:62px;/*选单图片的高*/
  5. list-style:none;
  6. overflow:hidden;
  7. width:432px;/*98*4+5*8*/
  8. border-bottom:1pxsolid#ccc;
  9. }
  10. #menuli{
  11. float:left;
  12. padding:05px;
  13. }
  14. #menulia{
  15. display:block;
  16. width:98px;/*选单图片的宽*/
  17. height:62px;/*选单图片的高*/
  18. line-height:62px;/*iesuck*/
  19. text-indent:-9999px;
  20. margin-top:31px;/*需要设定为图片宽/2*/
  21. background-repeat:no-repeat;
  22. }
  23. #menulia:hover{
  24. margin-top:1px;/*当鼠标移到选单上时...*/
  25. }
  26. /*帮每一个A连结都加入不同选单图片*/
  27. .home{background:url(home.gif);}
  28. .car{background:url(car.gif);}
  29. .good{background:url(good.gif);}
  30. .query{background:url(query.gif);}

这边要注意的是 A 连结的 margin-top 是选单图片高的一半 - 31px，所以超过的部份就不会显示出来；另外，当鼠标移到 A 连结后，再额外订了一个 a:hover { } 来减少它的 margin-top，因此原本看不到的背景部份就会显现出来了。

到这边就整个都完成了，一开始浏览时就只有一排的选单

当鼠标移到选项后就会弹起来囉~~

本文CSS3制作炫酷的下拉菜单及弹起式选单的实例分享到此结束。每当我观天的时候我就不喜欢再说话每当我说话的时候我却不敢再观天。小编再次感谢大家对我们的支持！