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与Prototype并存的冲突的解决方法
Aug 29 Javascript
JQuery 风格的HTML文本转义
Jul 01 Javascript
jQuery1.5.1 animate方法源码阅读
Apr 05 Javascript
详解Javascript动态操作CSS
Dec 08 Javascript
JS动画效果打开、关闭层的实现方法
May 09 Javascript
浅谈js构造函数的方法与原型prototype
Jul 04 Javascript
浅谈angularJS中的事件
Jul 12 Javascript
AngularJS的脏检查深入分析
Apr 22 Javascript
redux中间件之redux-thunk的具体使用
Apr 17 Javascript
在Vue项目中,防止页面被缩放和放大示例
Oct 28 Javascript
antd-DatePicker组件获取时间值,及相关设置方式
Oct 27 Javascript
Vue $attrs &amp; inheritAttr实现button禁用效果案例
Dec 07 Vue.js
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 图像函数大举例(非原创)
2009/06/20 PHP
HTML中不支持静态Expando的元素的问题
2007/03/08 Javascript
半角全角相互转换的js函数
2009/10/16 Javascript
jQuery.Validate 使用笔记(jQuery Validation范例 )
2010/06/25 Javascript
jQuery实现自定义下拉列表
2015/01/05 Javascript
微信公众号 客服接口的开发实例详解
2016/09/28 Javascript
简单的js计算器实现
2016/10/26 Javascript
Bootstrap.css与layDate日期选择样式起冲突的解决办法
2017/04/07 Javascript
Vue.js实例方法之生命周期详解
2017/07/03 Javascript
React 使用recharts实现散点地图的示例代码
2018/12/07 Javascript
vue-router 中 meta的用法详解
2019/11/01 Javascript
three.js如何实现3D动态文字效果
2021/03/03 Javascript
Python中使用tarfile压缩、解压tar归档文件示例
2015/04/05 Python
在Django中同时使用多个配置文件的方法
2015/07/22 Python
Python使用tablib生成excel文件的简单实现方法
2016/03/16 Python
Python 多核并行计算的示例代码
2017/11/07 Python
Python Paramiko模块的使用实际案例
2018/02/01 Python
numpy基础教程之np.linalg
2019/02/12 Python
Django网络框架之HelloDjango项目创建教程
2019/06/06 Python
基于python检查SSL证书到期情况代码实例
2020/04/04 Python
pycharm-professional-2020.1下载与激活的教程
2020/09/21 Python
python如何修改文件时间属性
2021/02/05 Python
谈谈对css属性box-sizing的了解
2017/01/04 HTML / CSS
Osklen官方在线商店:巴西服装品牌
2019/04/25 全球购物
幼师专业毕业生自荐信
2013/09/29 职场文书
司机辞职报告范文
2014/01/20 职场文书
经典婚礼主持词
2014/03/13 职场文书
李培根演讲稿
2014/05/22 职场文书
药品营销专业毕业生自荐信
2014/07/02 职场文书
政风行风评议心得体会
2014/10/21 职场文书
单位租房协议书范本
2014/12/04 职场文书
Python实现简繁体转换
2021/06/07 Python
Mysql关于数据库是否应该使用外键约束详解说明
2021/10/24 MySQL
mysql事务对效率的影响分析总结
2021/10/24 MySQL
win11怎么用快捷键锁屏? windows11锁屏的几种方法
2021/11/21 数码科技
详解Anyscript开发指南绕过typescript类型检查
2022/09/23 Javascript