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

2021-07-28 0 4,923

HTML代码:

 

[html] view plaincopy

 

  1. <!DOCTYPE html>  
  2. <html>  
  3.     <head>  
  4.         <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs  
  5. /jquery/1.7.2/jquery.min.js"></script>  
  6.         <title>side menu</title>  
  7.     </head>  
  8.     <body>  
  9.         <div id="menu">  
  10.             <div class="m-one">  
  11.                 <span class="m-tit">菜单01</span>  
  12.                 <ul class="m-ul">  
  13.                     <li class="m-li">子菜单11</li>  
  14.                     <li class="m-li">子菜单12</li>  
  15.                     <li class="m-li">子菜单13</li>  
  16.                 </ul>  
  17.             </div>  
  18.             <div class="m-one">  
  19.                 <span class="m-tit">主菜单02</span>  
  20.                 <ul class="m-ul">  
  21.                     <li class="m-li">子菜单21</li>  
  22.                     <li class="m-li">子菜单22</li>  
  23.                     <li class="m-li">子菜单23</li>  
  24.                 </ul>  
  25.             </div>  
  26.             <div class="m-one">  
  27.                 <span class="m-tit">主菜单03</span>  
  28.                 <ul class="m-ul">  
  29.                     <li class="m-li">子菜单31</li>  
  30.                     <li class="m-li">子菜单32</li>  
  31.                     <li class="m-li">子菜单33</li>  
  32.                 </ul>  
  33.             </div>  
  34.             <div class="m-one">  
  35.                 <span class="m-tit">主菜单04</span>  
  36.                 <ul class="m-ul">  
  37.                     <li class="m-li">子菜单41</li>  
  38.                     <li class="m-li">子菜单42</li>  
  39.                     <li class="m-li">子菜单43</li>  
  40.                 </ul>  
  41.             </div>  
  42.             <div class="m-one">  
  43.                 <span class="m-tit">主菜单05</span>  
  44.                 <ul class="m-ul">  
  45.                     <li class="m-li">子菜单51</li>  
  46.                     <li class="m-li">子菜单52</li>  
  47.                     <li class="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:40pxtext-align:centerbackground:#eeeeee;}  
  3. .m-one:hover{background:#dddddd;}  
  4. ul,li {list-style:nonemargin:0;padding:0;}  
  5. .m-ul {background:#dddddddisplay:none;}  
  6. .m-li {font-size:12pxheight:25pxline-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.             });  

收藏 (0) 打赏

您的支持是我们前进最大的动力!

打开微信扫一扫,即可进行扫码打赏哦
点赞 (0)

本站声明: 根据2013年1月30日《计算机软件保护条例》2次修订第17条规定:为了学习和研究软件内含的设计思想和原理,通过安装、显示、传输或者存储软件等方式使用软件的,可以不经软件著作权人许可,不向其支付报酬,鉴于此,也希望大家遵守相关法律法规使用、研究软件。 1、本站所有资源来源于用户上传和网络,因此不包含技术服务请大家谅解。 2、下载用户仅供学习交流,若使用商业用途,请购买正版授权,否则产生的一切后果将由下载用户自行承担。 3、站内资源均来源于网络公开发表文件或网友投稿发布,如侵犯您的权益,请联系管理员处理。 4、本站不保证所提供下载的资源的准确性、安全性和完整性,资源仅供下载学习之用,如有链接无法下载、失效或广告,请联系客服处理。 5、所有资源均收集于互联网仅供学习、参考和研究,请理解这个概念,所以不能保证每个细节都符合你的需求,也可能存在未知的BUG与瑕疵,因本站资源均为可复制品,所 以不支持任何理由的退款兑现,请熟知后再下载。

彤彤模板团 织梦CMS教程 学习JQUERY,写的简单下拉菜单! https://www.xiaoyuerqingfen.cn/3772.html

一家有态度的精品资源分享平台

常见问题
  • 模板团承诺演示效果图均和网站95%一样,并且我们的模板和数据都没有留后门,请放心使用。
查看详情
  • 因为模板具有可复制性和可传播性,模板一旦发货,非质量问题,不支持退换;所以务必请您一定看清楚后再购买。
查看详情

相关文章

评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务

  • 0 +

    访问总数

  • 0 +

    会员总数

  • 0 +

    资源总数

  • 0 +

    今日发布

  • 0 +

    本周发布

  • 0 +

    运行天数

开通会员,尊享海量资源下载特权