JS下拉缓冲菜单示例代码下拉缓冲菜单示例代码
下拉缓冲菜单效果想必大家都有见过吧,在本文使用JS轻松实现下,想学习的朋友可以参考下
复制代码 代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
body,html,div,ul,li,span,img,a{
margin:0;
padding:0;
}
a{
text-decoration:none;
color:#000;
font-weight:bold;
width:150px;
display:inline-block;
text-align:center;
}
li{
list-style:none;
}
img{
width:0;
height:0;
outline:none;
}
#tab{
margin:200px 0 0 300px;
}
#tab li{
float:left;
width:150px;
height:50px;
line-height:50px;
position:relative;
margin-right:30px;
}
#tab img.map,#tab span.content{
position:absolute;
}
#tab span.content{
background:#333;
color:#FFF;
font-size:14px;
text-align:center;
height:0;
}
#tab img.map{
left:50%;
bottom:0;
}
</style>
<title>JS下拉缓冲菜单_网页代码站()</title>
</head>
<body>
<div id="tab">
<ul>
<li style="background:url('/images/20130826/psb1.png')">
<a href="#">路飞</a>
<img src="/jscss/demoimg/201210/psb1.jpg" class="map" />
<span class="content">草帽海贼团船长,特征是头戴草帽,天性乐观、热情、善良、天真、单纯。</span>