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

程序员文章站 2023-11-15 11:53:52

这篇文章主要介绍了CSS3制作炫酷的下拉菜单及弹起式选单的实例分享,当然菜单上如果要实现更多动态效果的话还是需要JavaScript的帮助才行,需要的朋友可以参考下... 16-05-17...

下拉菜单
先直接来看效果是怎样：
CSS3制作炫酷的下拉菜单及弹起式选单的实例分享

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

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

xml/html code复制内容到剪贴板

<body>
<ul>
<li>
<a class="t1" href="#">梅干桑
<div>自我介绍</div>
</a>
</li>
<li>
<a class="t2" href="#">photoshop
<div>上课囉!!</div>
</a>
</li>
<li>
<a class="t3" href="#">q ＆ a
<div>问题讨论</div>
</a>
</li>
<li>
<a class="t4" href="#">男丁格尔</a>
</li>
<li>
<a class="t5" href="#">人材
<div>丁丁是人材</div>
</a>
</li>
<li>
<a class="t6" href="#">格言
<div>好话大家说</div>
</a>
</li>
<li>
<a class="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;
}
ul li {
float: left;
}
ul li a {
width: 100px;
height: 50px;
display: block;
line-height: 50px;
overflow: hidden;
text-align: center;
text-decoration: none;
color: #fff;
}
ul li a:hover {
height: 150px;
}
ul li a div {
color: #fff;
line-height: 16px;
font-weight: bold;
margin-top: 73px;
padding-top: 7px;
border-top: 1px dotted #fff;
}
.t1 { background: #08f2d6 url(01.gif); }
.t2 { background: #1209f1 url(02.gif); }
.t3 { background: #a202e2 url(03.gif); }
.t4 { background: #f4e603 url(04.gif); }
.t5 { background: #55df07 url(05.gif); }
.t6 { background: #02a8f3 url(06.gif); }
.t7 { background: #f6025e url(07.gif); }

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

到这边就整个都完成了，一开始浏览时就只有一排的选单
CSS3制作炫酷的下拉菜单及弹起式选单的实例分享