动画:模仿当当独家特供菜单动画
jQuery方法:addClass(),removeClass(),siblings(),find(),show(),hide()
动画效果:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>案例三:当当</title>
<script src="../jquery.min.js"></script>
<link type="text/css" rel="stylesheet" href="style.css">
</head>
<body>
<div class="dujia ">
<h3 class="title">独家特供</h3>
<ul>
<li class="menu on"><span>主打</span>
<div class="submenu show">主打内容</div>
</li>
<li class="menu">
<span>童书1</span>
<div class="submenu">童书1内容</div>
</li>
<li class="menu">
<span>童书2</span>
<div class="submenu">童书2内容</div>
</li>
<li class="menu">
<span>文艺</span>
<div class="submenu">文艺</div>
</li>
<li class="menu">
<span>小说</span>
<div class="submenu">小说</div>
</li>
<li class="menu">
<span>青春励志</span>
<div class="submenu">青春励志</div>
</li>
<li class="menu">
<span>社科</span>
<div class="submenu">社科</div>
</li>
<li class="menu">
<span>经管</span>
<div class="submenu">经管</div>
</li>
<li class="menu">
<span>生活</span>
<div class="submenu">生活</div>
</li>
<li class="menu">
<span>教育</span>
<div class="submenu">教育</div>
</li>
<li class="menu">
<span>电子书</span>
<div class="submenu">电子书</div>
</li>
</ul>
</div>
<script type="text/javascript">
$(document).ready(function () {
$(".menu").mouseenter(function () {
$(this).addClass("on");
$(this).siblings().removeClass("on");
$(this).find(".submenu").show();
$(this).siblings().find(".submenu").hide();
});
});
</script>
</body>
</html>
样式文件
body,div,ul,li,h3{
margin: 0;
padding: 0;
list-style: none;
}
.dujia{
position: relative;
left: 110px;
top: 100px;
width: 950px;
height: 50px;
border-bottom: 1px solid #487a6f;
z-index: 1;
}
.dujia .title{
position:relative;
top: 0;
left: 0;
width: 108px;
height: 48px;
line-height: 0;
font-size: 0;
background: url('title_sprite.png') 0 0 no-repeat;
}
.dujia ul{
position: absolute;
left: 150px;
top: 15px;
height: 35px;
}
.menu{
float: left;
padding:2px 17px 0 17px ;
margin-right: 4px;
line-height: 32px;
font-size: 14px;
font-family: "Microsoft Yahei";
font-color: rgb(102,102,102);
}
.on{
padding:0px 15px 0 15px ;
color: #488175;
border: 2px solid #488175;
border-bottom-color:white;
border-top-left-radius: 0.5em;
border-top-right-radius: 0.5em;
font-weight: bold;
}
.submenu{
display: none;
position: absolute;
left: -150px;
top:37px;
width: 950px;
height: 533px;
border: 1px solid #488175;
border-top: none;
}