jQuery简单的下拉菜单效果| 金飞科技[3A88.COM]

jQuery简单的下拉菜单效果

　　一个简单的下拉菜单效果，主要用于说明jQuery的web用法，直接贴出源代码：

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>简单的下拉菜单效果</title>

<script type="text/javascript" src="/upimg/files/jquery-1.4.2.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){

 $(".btn-slide").click(function(){
  $("#panel").slideToggle("slow");
  $(this).toggleClass("active"); return false;
 });
 
 
});
</script>

<style type="text/css">
body {
 margin: 0 auto;
 padding: 0;
 width: 570px;
 font: 75%/120% Arial, Helvetica, sans-serif;
}
a:focus {
 outline: none;
}
#panel {
 background: #754c24;
 height: 200px;
 display: none;
}
.slide {
 margin: 0;
 padding: 0;
 border-top: solid 4px #422410;
 background: url(/upimg/2010/201058184527643.gif) no-repeat center top;
}
.btn-slide {
 background: url(/upimg/2010/201058184553359.gif) no-repeat right -50px;
 text-align: center;
 width: 144px;
 height: 31px;
 padding: 10px 10px 0 0;
 margin: 0 auto;
 display: block;
 font: bold 120%/100% Arial, Helvetica, sans-serif;
 color: #fff;
 text-decoration: none;
}
.active {
 background-position: right 12px;
}
</style>
</head>

<body>

<div id="panel">
 这就是下拉效果，很简单吧！
</div>

<p class="slide"><a href="#" class="btn-slide">Slide Panel</a></p>

</body>
</html>

　　　提示：点击运行代码按钮可看到实际效果

更新时间：2010-5-8