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 相关文章推荐
动态刷新 dorado树的js代码
Jun 12 Javascript
js对象与打印对象分析比较
Apr 23 Javascript
jQuery实现Tab选项卡切换效果简单演示
Nov 23 Javascript
设计模式中的facade外观模式在JavaScript开发中的运用
May 18 Javascript
jQuery过滤选择器用法示例
Sep 12 Javascript
基于wordpress的ajax写法详解
Jan 02 Javascript
基于webpack.config.js 参数详解
Mar 20 Javascript
es6 filter() 数组过滤方法总结
Apr 03 Javascript
Node.js中Koa2在控制台输出请求日志的方法示例
May 02 Javascript
vue项目打包后上传至GitHub并实现github-pages的预览
May 06 Javascript
Vue时间轴 vue-light-timeline的用法说明
Oct 29 Javascript
ES6 十大特性简介
Dec 09 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
福利彩票幸运号码自动生成器
2006/10/09 PHP
PHP 定界符 使用技巧
2009/06/14 PHP
php把session写入数据库示例
2014/02/26 PHP
php接口和抽象类使用示例详解
2014/03/02 PHP
php出现web系统多域名登录失败的解决方法
2014/09/30 PHP
全面解读PHP的Yii框架中的日志功能
2016/03/17 PHP
php使用file函数、fseek函数读取大文件效率对比分析
2016/11/04 PHP
Laravel学习教程之路由模块
2017/08/18 PHP
详解PHP发送邮件知识点
2018/05/06 PHP
JavaScript 组件之旅(四):测试 JavaScript 组件
2009/10/28 Javascript
iframe里的页面禁止右键事件的方法
2014/06/10 Javascript
jquery Validation表单验证使用详解
2020/09/12 Javascript
基于vue的换肤功能的示例代码
2017/10/10 Javascript
Vue 嵌套路由使用总结(推荐)
2020/01/13 Javascript
vue 封装 Adminlte3组件的实现
2020/03/18 Javascript
js实现双人五子棋小游戏
2020/05/28 Javascript
浅析JavaScript 函数柯里化
2020/09/08 Javascript
简述Python中的面向对象编程的概念
2015/04/27 Python
总结Python编程中三条常用的技巧
2015/05/11 Python
python实现微信跳一跳辅助工具步骤详解
2018/01/04 Python
Python迭代器和生成器定义与用法示例
2018/02/10 Python
python networkx 包绘制复杂网络关系图的实现
2019/07/10 Python
python构建指数平滑预测模型示例
2019/11/21 Python
python按照list中字典的某key去重的示例代码
2020/10/13 Python
python3 kubernetes api的使用示例
2021/01/12 Python
卡西欧G-SHOCK英国官网: 防水防震手表
2018/01/08 全球购物
公司员工的自我评价范例
2013/11/01 职场文书
岗位职责的构建方法
2014/02/01 职场文书
个人委托书怎么写
2014/04/04 职场文书
道德之星事迹材料
2014/05/03 职场文书
工地宣传标语
2014/06/18 职场文书
2015年教师节贺卡寄语
2015/03/24 职场文书
施工安全员岗位职责
2015/04/11 职场文书
商业计划书如何写?关键问题有哪些?
2019/07/11 职场文书
解决Jenkins集成SonarQube遇到的报错问题
2021/07/15 Java/Android
Python开发简易五子棋小游戏
2022/05/02 Python