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

摘要：下拉菜单先直接来看效果是怎样：当鼠标移到选单之后，下方会展开并有其它说明内容，我这边是把展开的部份加上图片内容，让它有其它不同的变化。因为这...

下拉菜单

先直接来看效果是怎样：

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

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

检视原始码 HTML

XML/HTML Code复制内容到剪贴板 <body> <ul> <li> <aclass="t1"href="#">梅干桑 <div>自我介绍</div> </a> </li> <li> <aclass="t2"href="#">Photoshop <div>上课囉!!</div> </a> </li> <li> <aclass="t3"href="#">Q＆A <div>问题讨论</div> </a> </li> <li> <aclass="t4"href="#">男丁格尔</a> </li> <li> <aclass="t5"href="#">人材 <div>丁丁是人材</div> </a> </li> <li> <aclass="t6"href="#">格言 <div>好话大家说</div> </a> </li> <li> <aclass="t7"href="http://www.wowgame.tw">WOWGame</a> </li> </ul> </body>

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

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

检视原始码 CSS

CSS Code复制内容到剪贴板 ul{ margin:0; padding:0; list-style:none; } ulli{ float:left; } ullia{ width:100px; height:50px; display:block; line-height:50px; overflow:hidden; text-align:center; text-decoration:none; color:#fff; } ullia:hover{ height:150px; } ulliadiv{ color:#fff; line-height:16px; font-weight:bold; margin-top:73px; padding-top:7px; border-top:1pxdotted#fff; } .t1{background:#08f2d6url(01.gif);} .t2{background:#1209f1url(02.gif);} .t3{background:#a202e2url(03.gif);} .t4{background:#f4e603url(04.gif);} .t5{background:#55df07url(05.gif);} .t6{background:#02a8f3url(06.gif);} .t7{background:#f6025eurl(07.gif);}

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

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

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

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

弹起式页签选单

一样先直接来看效果是怎样：

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

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

检视原始码 HTML

XML/HTML Code复制内容到剪贴板 <body> <ulid="menu"> <li><ahref="#"class="home">首页</a></li> <li><ahref="#"class="car">购物车</a></li> <li><ahref="#"class="good">推荐商品</a></li> <li><ahref="#"class="query">订单查询</a></li> </ul> </body>

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

接着开始动手写 CSS 囉：

检视原始码 CSS

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

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

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