jquery实现最简单的滑动菜单效果代码


Posted in Javascript onSeptember 12, 2015

本文实例讲述了jquery实现最简单的滑动菜单效果代码。分享给大家供大家参考。具体如下:

这是一款最简单的jQuery下拉滑出菜单,jQuery代码实现,这里没有过多的去修饰菜单,仅是一些基本的实现,特别是对学习jQuery是个不错的参考实例,这里使用了一个jquery封装库文件jquery.tools.min.js,从外部引入,测试时候可能会因载入不成功而看不到效果,刷新一下网页即可解决此问题。

运行效果截图如下:

jquery实现最简单的滑动菜单效果代码

在线演示地址如下:

具体代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>下拉滑出的菜单</title>
<script src="jquery.tools.min.js"></script>
<script type="text/javascript">
$(function() {
 $("#list li").hover(function() {
 $(this).children("ul").slideDown();
 }, function() {
 $(this).children("ul").slideUp();
 });
});
</script>
<style type="text/css">
*{margin:0;padding:0;}
ul{list-style:none outside none}
#list{font-size:14px;width:500px;margin:55px auto}
#list ul{font-size:12px;display:none}
#list .li{float:left;width:100px;margin-right:1px;background:orange}
</style>
</head>
<body>
<ul id="list">
 <li class="li">
  <a href="#">游戏</a>
  <ul>
   <li><a href="#">单机游戏</a></li>
   <li><a href="#">网络游戏</a></li>
  </ul>
 </li>
 <li class="li">
  <a href="#">音乐</a>
  <ul>
   <li><a href="#">流行歌曲</a></li>
   <li><a href="#">摇滚</a></li>
  </ul>
 </li>
 <li class="li">
  <a href="#">编程语言</a>
  <ul>
   <li><a href="#">Javascript</a></li>
   <li><a href="#">PHP</a></li>
  </ul>
 </li>
</ul>
</body>
</html>

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
可缩放Reloaded-一个针对可缩放元素的复用组件
Mar 10 Javascript
javascript实现的简单计时器
Jul 19 Javascript
Web打印解决方案之证件套打的实现思路
Aug 29 Javascript
JQuery中解决重复动画的方法
Oct 17 Javascript
利用jQuery插件imgAreaSelect实现图片上传裁剪(放大缩小)
Dec 02 Javascript
node.js博客项目开发手记
Mar 16 Javascript
vue搜索和vue模糊搜索代码实例
May 07 Javascript
浅谈ECMAScript 中的Array类型
Jun 10 Javascript
AngularJS动态生成select下拉框的方法实例
Nov 17 Javascript
如何使用jQuery操作Cookies方法解析
Sep 08 jQuery
原生JavaScript实现弹幕组件的示例代码
Oct 12 Javascript
解决Ant Design Modal内嵌Form表单initialValue值不动态更新问题
Oct 29 Javascript
jQuery实现自动切换播放的经典滑动门效果
Sep 12 #Javascript
JavaScript中this的9种应用场景及三种复合应用场景
Sep 12 #Javascript
javascript判断网页是关闭还是刷新
Sep 12 #Javascript
js查看一个函数的执行时间实例代码
Sep 12 #Javascript
JavaScript学习笔记(三):JavaScript也有入口Main函数
Sep 12 #Javascript
JS实现仿QQ面板的手风琴效果折叠菜单代码
Sep 11 #Javascript
JS实现仿Windows7风格的网页右键菜单效果代码
Sep 11 #Javascript
You might like
用PHP实现弹出消息提示框的两种方法
2013/12/17 PHP
javascript+php实现根据用户时区显示当地时间的方法
2015/03/11 PHP
PHP三种方式实现链式操作详解
2017/01/21 PHP
浅谈ThinkPHP5.0版本和ThinkPHP3.2版本的区别
2017/06/17 PHP
ThinkPHP框架获取最后一次执行SQL语句及变量调试简单操作示例
2018/06/13 PHP
PHP fprintf()函数用法讲解
2019/02/16 PHP
PHP时间相关常用函数用法示例
2020/06/03 PHP
PHP数组Key强制类型转换实现原理解析
2020/09/01 PHP
JavaScript 在各个浏览器中执行的耐性
2009/04/06 Javascript
jQuery 注意事项 与原因分析
2009/04/24 Javascript
6款经典实用的jQuery小插件及源码(对话框/提示工具等等)
2013/02/04 Javascript
技术男用来对妹子表白的百度首页
2014/07/23 Javascript
jquery引用方法时传递参数原理分析
2014/10/13 Javascript
BootStrap tab选项卡使用小结
2020/08/09 Javascript
JS动态的把左边列表添加到右边的实现代码(可上下移动)
2016/11/17 Javascript
分分钟玩转Vue.js组件(二)
2017/03/01 Javascript
微信浏览器禁止页面下拉查看网址实例详解
2017/06/28 Javascript
python正则表达式match和search用法实例
2015/03/26 Python
python django 增删改查操作 数据库Mysql
2017/07/27 Python
对python 调用类属性的方法详解
2019/07/02 Python
详解pandas数据合并与重塑(pd.concat篇)
2019/07/09 Python
python实现倒计时小工具
2019/07/29 Python
基于Python新建用户并产生随机密码过程解析
2019/10/08 Python
Python with关键字,上下文管理器,@contextmanager文件操作示例
2019/10/17 Python
Django中modelform组件实例用法总结
2020/02/10 Python
Python面向对象程序设计之类和对象、实例变量、类变量用法分析
2020/03/23 Python
Django contrib auth authenticate函数源码解析
2020/11/12 Python
简单介绍HTML5中audio标签的使用
2015/09/24 HTML / CSS
飞利浦法国官网:Philips法国
2019/07/10 全球购物
字符串str除首尾字符外的其他字符按升序排列
2013/03/08 面试题
工业自动化毕业生自荐信范文
2014/01/04 职场文书
2014年自我评价
2014/01/04 职场文书
校园招聘策划书
2014/01/09 职场文书
求职简历自我评价范文
2015/03/10 职场文书
女性健康知识讲座通知
2015/04/23 职场文书
golang 如何用反射reflect操作结构体
2021/04/28 Golang