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 相关文章推荐
Jquery实战_读书笔记1—选择jQuery
Jan 22 Javascript
jQuery右键菜单contextMenu使用实例
Sep 28 Javascript
IFrame跨域高度自适应实现代码
Aug 16 Javascript
利用ajaxfileupload插件实现文件上传无刷新的具体方法
Jun 08 Javascript
将input file的选择的文件清空的两种解决方案
Oct 21 Javascript
JavaScript三元运算符的多种使用技巧
Apr 16 Javascript
基于JS组件实现拖动滑块验证功能(代码分享)
Nov 18 Javascript
js 将input框中的输入自动转化成半角大写(税号输入框)
Feb 16 Javascript
JS基于正则表达式实现的密码强度验证功能示例
Sep 21 Javascript
Vue实现跑马灯效果
May 25 Javascript
原生JS实现记忆翻牌游戏
Jul 31 Javascript
JavaScript对象访问器Getter及Setter原理解析
Dec 08 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
discuz程序的PHP加密函数原理分析
2011/08/05 PHP
php中使用preg_match_all匹配文章中的图片
2013/02/06 PHP
php上传图片到指定位置路径保存到数据库的具体实现
2013/12/30 PHP
php实现将wav文件转换成图像文件并在页面中显示的方法
2015/04/21 PHP
[原创]php求圆周率的简单实现方法
2016/05/30 PHP
Thinkphp框架+Layui实现图片/文件上传功能分析
2020/02/07 PHP
php设计模式之职责链模式实例分析【星际争霸游戏案例】
2020/03/27 PHP
JavaScript和ActionScript的交互实现代码
2010/08/01 Javascript
分享一个自定义的console类 让你不再纠结JS中的调试代码的兼容
2012/04/20 Javascript
使用js操作css实现js改变背景图片示例
2014/03/10 Javascript
jquery实现倒计时代码分享
2014/06/13 Javascript
基于javascript数组实现图片轮播
2016/05/02 Javascript
基于对象合并功能的实现示例
2017/10/10 Javascript
zTree树形菜单交互选项卡效果的实现方法
2017/12/25 Javascript
node前端开发模板引擎Jade的入门
2018/05/11 Javascript
微信小程序非跳转式组件授权登录的方法示例
2019/05/22 Javascript
[03:36]DOTA2完美大师赛coL战队趣味视频——我演你猜
2017/11/23 DOTA
Python中有趣在__call__函数
2015/06/21 Python
在Linux命令行终端中使用python的简单方法(推荐)
2017/01/23 Python
django 在原有表格添加或删除字段的实例
2018/05/27 Python
Python列表切片操作实例总结
2019/02/19 Python
Python 给屏幕打印信息加上颜色的实现方法
2019/04/24 Python
Python调用百度根据经纬度查询地址的示例代码
2019/07/07 Python
基于python分析你的上网行为 看看你平时上网都在干嘛
2019/08/13 Python
python 追踪except信息方式
2020/04/25 Python
PyQt5-QDateEdit的简单使用操作
2020/07/12 Python
Python打印不合法的文件名
2020/07/31 Python
Pycharm无法打开双击没反应的问题及解决方案
2020/08/17 Python
python 爬虫如何正确的使用cookie
2020/10/27 Python
周生生珠宝香港官网:Chow Sang Sang(香港及海外配送)
2019/09/05 全球购物
作文评语集锦大全
2014/04/23 职场文书
节能标语大全
2014/06/21 职场文书
2014年民警工作总结
2014/11/25 职场文书
《狮子和鹿》教学反思
2016/02/16 职场文书
Redis高可用集群redis-cluster详解
2022/03/20 Redis
macos系统如何实现微信双开? mac登录两个微信以上微信的技巧
2022/07/23 数码科技