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

HTML代码:

[html]view plaincopy

  1. <!DOCTYPEhtml>
  2. <html>
  3. <head>
  4. <scripttype="text/javascript"src="http://ajax.googleapis.com/ajax/libs
  5. /jquery/1.7.2/jquery.min.js"></script>
  6. <title>sidemenu</title>
  7. </head>
  8. <body>
  9. <divid="menu">
  10. <divclass="m-one">
  11. <spanclass="m-tit">主菜单01</span>
  12. <ulclass="m-ul">
  13. <liclass="m-li">子菜单11</li>
  14. <liclass="m-li">子菜单12</li>
  15. <liclass="m-li">子菜单13</li>
  16. </ul>
  17. </div>
  18. <divclass="m-one">
  19. <spanclass="m-tit">主菜单02</span>
  20. <ulclass="m-ul">
  21. <liclass="m-li">子菜单21</li>
  22. <liclass="m-li">子菜单22</li>
  23. <liclass="m-li">子菜单23</li>
  24. </ul>
  25. </div>
  26. <divclass="m-one">
  27. <spanclass="m-tit">主菜单03</span>
  28. <ulclass="m-ul">
  29. <liclass="m-li">子菜单31</li>
  30. <liclass="m-li">子菜单32</li>
  31. <liclass="m-li">子菜单33</li>
  32. </ul>
  33. </div>
  34. <divclass="m-one">
  35. <spanclass="m-tit">主菜单04</span>
  36. <ulclass="m-ul">
  37. <liclass="m-li">子菜单41</li>
  38. <liclass="m-li">子菜单42</li>
  39. <liclass="m-li">子菜单43</li>
  40. </ul>
  41. </div>
  42. <divclass="m-one">
  43. <spanclass="m-tit">主菜单05</span>
  44. <ulclass="m-ul">
  45. <liclass="m-li">子菜单51</li>
  46. <liclass="m-li">子菜单52</li>
  47. <liclass="m-li">子菜单53</li>
  48. </ul>
  49. </div>
  50. </div>
  51. </body>
  52. </html>



CSS代码:

[css]view plaincopy

  1. #menu{}
  2. .m-one{float:left;width:100px;height:40px;line-height:40px;text-align:center;background:#eeeeee;}
  3. .m-one:hover{background:#dddddd;}
  4. ul,li{list-style:none;margin:0;padding:0;}
  5. .m-ul{background:#dddddd;display:none;}
  6. .m-li{font-size:12px;height:25px;line-height:25px;}
  7. .m-li:hover{background:#cccccc;}

JQUERY代码:

[javascript]view plaincopy

  1. $(document).ready(function(){
  2. $('.m-one').hover(
  3. function(){$(this).children('.m-ul').slideDown(200);},
  4. function(){$(this).children('.m-ul').slideUp(200);}
  5. );
  6. });

版权免责声明

① 本站VIP源码资源永久免费下载 www.wayu.cn
② 本网站资源来源于网络收集,如有侵权,请联系站长进行删除处理。
③ 分享目的仅供大家学习和交流,请不要用于商业用途,否则后果自负。
④ 如果你有源码需要出售,可以联系小编,或者点击 投稿
⑤ 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解。
⑥ 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需。
⑦ 在您的能力范围内,为了大环境的良性发展,请尽可能的选择正版资源。
⑧ 网站资源不做任何二次加密和授权后门(原版加密除外)

评论0

请先

没有账号? 忘记密码?