本文作者:随便撸源码

学习JQUERY,写的简单下拉菜单!

随便撸源码4年前 ( 2016-08-13 )462抢沙发

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);}                  );              });


发表评论取消回复

快捷回复:

验证码

评论列表 (暂无评论,462人围观)参与讨论

还没有评论,来说两句吧...