html选择弹出列表实例,CSS3制作炫酷的下拉菜单及弹起式选
单的实例分享
下拉菜单先直接来看效果是怎样：
当⿏标移到选单之后，下⽅会展开并有其它说明内容，我这边是把展开的部份加上图⽚内容，让它有其它不同的变化。因为这样的动作就像⼈家庙会时会有舞狮从嘴⾥丢下贺联⼀样，所以我才取名为"贺联式选单"。
这样的效果其实只需要 HTML 及 CSS 配合就能做出来了，我们先来看 HTML 的部份：
检视原始码 HTML
XML/HTML Code复制内容到剪贴板
梅⼲桑
⾃我介绍
Photoshop
上课囉!!
Q ＆ A
问题讨论
男丁格尔
⼈材
html下拉菜单的制作方法丁丁是⼈材
格⾔
好话⼤家说
WOWGame
使⽤ 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: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复制内容到剪贴板
⾸页购物车推荐商品订单查询
同样是⽤ UL 及 LI 来做选单的项⽬，每⼀个 LI 中的 A 连结是我们主要的选单内容，且为了让每个选单都有不同的选单图⽚，所以还帮 A 连结都加⼀个独⽴的 class。
接着开始动⼿写 CSS 囉：
检视原始码 CSS
CSS Code复制内容到剪贴板
#menu{
margin:20px0 0;
padding: 0;
height:62px;/* 选单图⽚的⾼ */
list-style:none;
overflow:hidden;
width:432px;/* 98 * 4 + 5 * 8 */
border-bottom:1pxsolid#ccc;
}
#menuli {
float:left;
padding: 05px;
}
#menuli a {
display:block;
width:98px;/* 选单图⽚的宽 */
height:62px;/* 选单图⽚的⾼ */
line-height:62px;/* ie suck */
text-indent: -9999px;
margin-top:31px;/* 需要设定为图⽚宽/2 */
background-repeat:no-repeat;
}
#menuli a: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，因此原本看不到的背景部份就会显现出来了。
到这边就整个都完成了，⼀开始浏览时就只有⼀排的选单
当⿏标移到选项后就会弹起来囉~~

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。