jQuery实现下拉菜单的实例代码


Posted in jQuery onJune 19, 2017

基本效果是这样的~~

jQuery实现下拉菜单的实例代码

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
    * {
      margin: 0;
      padding: 0;
    }
    ul {
      list-style: none;
    }
    .wrap {
      width: 330px;
      height: 30px;
      margin: 100px auto 0;
      padding-left: 10px;
      background-color: skyblue;
    }
    .wrap li {
      background-color: skyblue;
    }
    .wrap > ul > li {
      float: left;
      margin-right: 10px;
      position: relative;
    }
    .wrap a {
      display: block;
      height: 30px;
      width: 100px;
      text-decoration: none;
      color: #000;
      line-height: 30px;
      text-align: center;
    }
    .wrap li ul {
      position: absolute;
      top: 30px;
      display: none;
    }
  </style>
  <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
  <script>
    $(function () {
      //获取所有li,添加移入事件
      $(".wrap>ul>li").mouseenter(function () {
        //设置内部的子元素ul slideDown
        $(this).children("ul").stop().slideDown(600);
      });
      //移出li时,让内部子元素slideUp
      $(".wrap>ul>li").mouseleave(function () {
        $(this).children("ul").stop().slideUp(600);
      });
      //如果当前运动没有完毕,又添加了新的动画,这时新的动画需要等待当前动画执行完毕才会开始
      //如果持续添加。一定会造成动画的积累,这种情况我们称为动画队列
    });
  </script>
</head>
<body>
<div class="wrap">
  <ul>
    <li>
      <a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >一级菜单1</a>
      <ul class="ul">
        <li><a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >二级菜单11</a></li>
        <li><a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >二级菜单12</a></li>
        <li><a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >二级菜单13</a></li>
      </ul>
    </li>
    <li>
      <a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >一级菜单2</a>
      <ul>
        <li><a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >二级菜单21</a></li>
        <li><a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >二级菜单22</a></li>
        <li><a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >二级菜单23</a></li>
      </ul>
    </li>
    <li>
      <a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >一级菜单3</a>
      <ul>
        <li><a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >二级菜单31</a></li>
        <li><a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >二级菜单32</a></li>
        <li><a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >二级菜单33</a></li>
      </ul>
    </li>
  </ul>
</div>
</body>
</html>

以上所述是小编给大家介绍的jQuery实现下拉菜单的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

jQuery 相关文章推荐
jQuery插件FusionCharts实现的Marimekko图效果示例【附demo源码】
Mar 24 jQuery
jQuery动态追加页面数据以及事件委托详解
May 06 jQuery
jquery easyui如何实现格式化列
Jul 30 jQuery
jQuery Ajax 实现分页 kkpager插件实例代码
Aug 10 jQuery
jQuery实现的表格前端排序功能示例
Sep 18 jQuery
jQuery 开发之EasyUI 添加数据的实例
Sep 26 jQuery
jQuery实现动态加载select下拉列表项功能示例
May 31 jQuery
jQuery实现输入框的放大和缩小功能示例
Jul 21 jQuery
jQuery动态操作表单示例【基于table表格】
Dec 06 jQuery
JQuery属性操作与循环用法示例
May 15 jQuery
jquery轻量级数字动画插件countUp.js使用详解
Oct 17 jQuery
jQuery操作选中select下拉框的值代码实例
Feb 07 jQuery
jquery DataTable实现前后台动态分页
Jun 17 #jQuery
jQuery Jsonp跨域模拟搜索引擎
Jun 17 #jQuery
jQuery 控制文本框自动缩小字体填充
Jun 16 #jQuery
jQuery序列化后的表单值转换成Json
Jun 16 #jQuery
基于jQuery和CSS3实现APPLE TV海报视差效果
Jun 16 #jQuery
利用jquery去掉时光轴头尾部线条的方法实例
Jun 16 #jQuery
jQuery实现 RadioButton做必选校验功能
Jun 15 #jQuery
You might like
PHP字符串函数系列之nl2br(),在字符串中的每个新行 (\n) 之前插入 HTML 换行符br
2011/11/10 PHP
PHP实现显示照片exif信息的方法
2014/07/11 PHP
WIFI万能钥匙密码查询接口实例
2015/09/28 PHP
CI框架源码解读之利用Hook.php文件完成功能扩展的方法
2016/05/18 PHP
php自定义函数实现JS的escape的方法示例
2016/07/07 PHP
php实现微信支付之现金红包
2018/05/30 PHP
PHP 实现base64编码文件上传出现问题详解
2020/09/01 PHP
JQuery打造PHP的AJAX表单提交实例
2009/11/03 Javascript
通过jQuery打造支持汉字,拼音,英文快速定位查询的超级select插件
2010/06/18 Javascript
jQuery实现form表单reset按钮重置清空表单功能
2012/12/18 Javascript
用js实现table单元格高宽调整,兼容合并单元格(兼容IE6、7、8、FF)实例
2013/06/25 Javascript
用JavaScript实现动画效果的方法
2013/07/20 Javascript
js中使用replace方法完成某个字符的转换
2014/08/20 Javascript
打造个性化的功能强大的Jquery虚拟键盘(VirtualKeyboard)
2014/10/11 Javascript
Node.js实现Excel转JSON
2015/04/24 Javascript
jQuery中判断对象是否存在的方法汇总
2016/02/24 Javascript
AngularJS深入探讨scope,继承结构,事件系统和生命周期
2016/11/02 Javascript
Vue异步组件使用详解
2017/04/08 Javascript
VueJS如何引入css或者less文件的一些坑
2017/04/25 Javascript
利用jQuery+localStorage实现一个简易的计时器示例代码
2017/12/25 jQuery
vue2.0 better-scroll 实现移动端滑动的示例代码
2018/01/25 Javascript
js正则表达式校验指定字符串的方法
2018/07/23 Javascript
[01:57]2018DOTA2亚洲邀请赛赛前采访-iG
2018/04/03 DOTA
python操作xml文件详细介绍
2014/06/09 Python
python将图片文件转换成base64编码的方法
2015/03/14 Python
python实现批量修改图片格式和尺寸
2018/06/07 Python
python实现zabbix发送短信脚本
2018/09/17 Python
python 进程的几种创建方式详解
2019/08/29 Python
如何使用Python进行PDF图片识别OCR
2021/01/22 Python
入党申请书自我鉴定
2013/10/12 职场文书
小学运动会班级口号
2014/06/09 职场文书
2014年社区个人工作总结
2014/12/02 职场文书
2015年简历自我评价范文
2015/03/11 职场文书
邮政营业员岗位职责
2015/04/14 职场文书
2015年高校图书馆工作总结
2015/04/30 职场文书
html中显示特殊符号(附带特殊字符对应表)
2021/06/21 HTML / CSS