下拉菜单先直接来看效果是怎样:
当鼠标移到选单之后,下方会展开并有其它说明内容,我这边是把展开的部份加上图片内容,让它有其它不同的变化。因为这样的动作就像人家庙会时会有舞狮从嘴里丢下贺联一样,所以我才取名为"贺联式选单"。
这样的效果其实只需要 HTML 及 CSS 配合就能做出来了,我们先来看 HTML 的部份:
检视原始码 HTML
XML/HTML Code复制内容到剪贴板
梅干桑
自我介绍
Photoshop
上课囉!!
Q&A
问题讨论
男丁格尔
人材
丁丁是人材
格言
好话大家说
WOWGame
使用 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复制内容到剪贴板
首页购物车推荐商品订单查询
同样是用 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,因此原本看不到的背景部份就会显现出来了。
到这边就整个都完成了,一开始浏览时就只有一排的选单
当鼠标移到选项后就会弹起来囉~~
如果觉得《html选择弹出列表实例 CSS3制作炫酷的下拉菜单及弹起式选单的实例分享》对你有帮助,请点赞、收藏,并留下你的观点哦!