1. Before expanding:
2. coding:
<!DOCTYPE html>
<html>
<head>
<title>Smooth Animated Menu</title>
<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.js" type="text/javascript"></script>
<script src="js/jquery.easing.1.3.js"></script>
<style>
body {
background-color: #F3F3F3;
font-family: "Lucida Grande", arial, sans-serif;
}
a{
text-decoration:none;
color:#fff;
}
ul {
/*width: 500px; Don't add properties of width and height to 'ul'
height: 50px;*/
}
li {
width: 100px;
height: 50px;
text-align: center;
/*padding-top: 10px;*/
float: left;
overflow: hidden;
}
p{
padding:0px 5px;
}
.subText {
color: #191919;
padding-top: 15px;
}
.green {
background: #649e37 url("images/green-item-bg.jpg") no-repeat right top;
}
.yellow {
background: #fbc701 url("images/yellow-item-bg.jpg") no-repeat right top;
}
.red {
background: #c61e01 url("images/red-item-bg.jpg") no-repeat right top;
}
.blue {
background: #008cb7 url("images/blue-item-bg.jpg") no-repeat right top;
}
.purple {
background: #5121b3 url("images/purple-item-bg.jpg") no-repeat right top;
}
</style>
<script>
$(document).ready(function () {
$("a").click(function () {
this.blur();
});
$("li").mouseover(function () {
$(this).stop().animate({ height: '150px' }, { queue: false, duration: 600, easing: 'easeOutBounce' })
});
$("li").mouseout(function () {
$(this).stop().animate({height:'50px'},{queue:false,duration:600,easing:'easeOutBounce'})
})
});
</script>
</head>
<body>
<p>Rollover a menu item to expand it.</p>
<ul>
<li class ="green">
<p><a href="#">Home</a></p>
<p class="subText">The front of page</p>
</li>
<li class="yellow">
<p><a href="#">About</a></p>
<p class="subText">More info</p>
</li>
<li class="red">
<p><a href="#">Contact</a></p>
<p class="subText">Get in touch</p>
</li>
<li class="blue">
<p><a href="#">Submit</a></p>
<p class="subText">Send us your stuff!</p>
</li>
<li class="purple">
<p><a href="#">Terms</a></p>
<p class="subText">Legal things</p>
</li>
</ul>
</body>
</html>
时间： 2024-08-07 02:36:50