學(xué)習(xí)JQUERY,寫的簡單下拉菜單！
POST TIME:2020-10-09
HTML代碼：
-
<!DOCTYPE html>
-
<html>
-
<head>
-
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs
-
/jquery/1.7.2/jquery.min.js"></script>
-
<title>side menu</title>
-
</head>
-
<body>
-
<div id="menu">
-
<div class="m-one">
-
<span class="m-tit">主菜單01</span>
-
<ul class="m-ul">
-
<li class="m-li">子菜單11</li>
-
<li class="m-li">子菜單12</li>
-
<li class="m-li">子菜單13</li>
-
</ul>
-
</div>
-
<div class="m-one">
-
<span class="m-tit">主菜單02</span>
-
<ul class="m-ul">
-
<li class="m-li">子菜單21</li>
-
<li class="m-li">子菜單22</li>
-
<li class="m-li">子菜單23</li>
-
</ul>
-
</div>
-
<div class="m-one">
-
<span class="m-tit">主菜單03</span>
-
<ul class="m-ul">
-
<li class="m-li">子菜單31</li>
-
<li class="m-li">子菜單32</li>
-
<li class="m-li">子菜單33</li>
-
</ul>
-
</div>
-
<div class="m-one">
-
<span class="m-tit">主菜單04</span>
-
<ul class="m-ul">
-
<li class="m-li">子菜單41</li>
-
<li class="m-li">子菜單42</li>
-
<li class="m-li">子菜單43</li>
-
</ul>
-
</div>
-
<div class="m-one">
-
<span class="m-tit">主菜單05</span>
-
<ul class="m-ul">
-
<li class="m-li">子菜單51</li>
-
<li class="m-li">子菜單52</li>
-
<li class="m-li">子菜單53</li>
-
</ul>
-
</div>
-
</div>
-
</body>
-
</html>
CSS代碼：
-
#menu {}
-
.m-one {float:left;width:100px;height:40px;line-height:40px; text-align:center; background:#eeeeee;}
-
.m-one:hover{background:#dddddd;}
-
ul,li {list-style:none; margin:0;padding:0;}
-
.m-ul {background:#dddddd; display:none;}
-
.m-li {font-size:12px; height:25px; line-height:25px;}
-
.m-li:hover {background:#cccccc;}
JQUERY代碼：
-
$(document).ready(function() {
-
$('.m-one').hover(
-
function(){$(this).children('.m-ul').slideDown(200);},
-
function(){$(this).children('.m-ul').slideUp(200);}
-
);
-
});
