您现在的位置是：网站首页>建站学院网站运营

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

2020-05-07来源： 【网站运营】 人已围观

简介 HTML代码： [html] view plaincopy <!DOCTYPE html> <html> <head> <script type="text/javascript" src="http://ajax.

HTML代码：fQ1企业网站模板免费下载_网站建设_企业网站建设方案

 fQ1企业网站模板免费下载_网站建设_企业网站建设方案

[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代码：

 fQ1企业网站模板免费下载_网站建设_企业网站建设方案

 fQ1企业网站模板免费下载_网站建设_企业网站建设方案

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

 fQ1企业网站模板免费下载_网站建设_企业网站建设方案

JQUERY代码：fQ1企业网站模板免费下载_网站建设_企业网站建设方案

 fQ1企业网站模板免费下载_网站建设_企业网站建设方案

[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.             });  
fQ1企业网站模板免费下载_网站建设_企业网站建设方案

很赞哦！ ()

上一篇：对帝国cms、dedecms、phpcms等负载测试总结

下一篇：浅谈：织梦CMS仿站的一些小结

猜您喜欢

相关文章

付费说明

    1、安装cms后台，费用是200，基础费用200包括后台调试以及部分页面模板修改.

    2、请加我个人微信 634626966，或者扫一扫微信二维码。备注“网站”

    3、系统安装只限定于帝国cms，并且支持php，虚拟主机，请选择linux系统

    4、【收费说明】制作企业网站，我是这么收费的！

空间购买

文章评论

阿里云代金券 ￥100 云产品通用

有效期30天 首购用户

立即领取
阿里云代金券 ￥100 云产品通用

有效期30天 复购+升级

立即领取

点击排行

专题推荐

标签云

猜你喜欢

站点信息

l