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增删元素的代码
Feb 14 Javascript
判断滚动条到底部的JS代码
Nov 04 Javascript
js showModalDialog弹出窗口实例详解
Jan 07 Javascript
原生js的弹出层且其内的窗口居中
May 14 Javascript
JS+CSS实现带小三角指引的滑动门效果
Sep 22 Javascript
javascript中this指向详解
Apr 23 Javascript
jQuery版AJAX简易封装代码
Sep 14 Javascript
详解VUE中v-bind的基本用法
Jul 13 Javascript
初探JavaScript 面向对象(推荐)
Sep 03 Javascript
使用live-server快速搭建本地服务器+自动刷新的方法
Mar 09 Javascript
vue使用websocket的方法实例分析
Jun 22 Javascript
vue中实现点击空白区域关闭弹窗的两种方法
Dec 30 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 将bmp图片转为jpg等其他任意格式的图片
2009/06/29 PHP
Laravel中使用阿里云OSS Composer包分享
2015/02/10 PHP
php实现用已经过去多长时间的方式显示时间
2015/06/05 PHP
解决 firefox 不支持 document.all的方法
2007/03/12 Javascript
js 发个判断字符串是否为符合标准的函数
2009/04/27 Javascript
instanceof和typeof运算符的区别详解
2014/01/06 Javascript
Jquery性能优化详解
2014/05/15 Javascript
JS+CSS实现Div弹出窗口同时背景变暗的方法
2015/03/04 Javascript
jQuery遍历页面所有CheckBox查看是否被选中的方法
2015/04/14 Javascript
被遗忘的javascript的slice() 方法
2015/04/20 Javascript
js实现仿百度风云榜可重复多次调用的TAB切换选项卡效果
2015/08/31 Javascript
jquery制作图片时钟特效
2020/03/30 Javascript
javascript实现粘贴qq截图功能(clipboardData)
2016/05/29 Javascript
用原生js做单页应用
2017/01/17 Javascript
微信小程序自定义模态对话框实例详解
2017/08/16 Javascript
node.js+captchapng+jsonwebtoken实现登录验证示例
2017/08/17 Javascript
AngularJS实现与后台服务器进行交互的示例讲解
2018/08/13 Javascript
浅谈vux之x-input使用以及源码解读
2018/11/04 Javascript
Python生成器generator用法示例
2018/08/10 Python
自学python的建议和周期预算
2019/01/30 Python
python读取并写入mat文件的方法
2019/07/12 Python
django的auth认证,authenticate和装饰器功能详解
2019/07/25 Python
python 绘制正态曲线的示例
2020/09/24 Python
如何查看浏览器对html5的支持情况
2020/12/15 HTML / CSS
ECCO英国官网:丹麦鞋履品牌
2019/09/03 全球购物
EJB的基本架构
2016/09/22 面试题
公司财务自我评价分享
2013/12/17 职场文书
计算机专业职业规划
2014/02/28 职场文书
毕业寄语大全
2014/04/09 职场文书
大学生工作求职信
2014/06/23 职场文书
2014预备党员党课学习心得范文
2014/07/08 职场文书
2015年秋季小班开学寄语
2015/05/27 职场文书
微信搭讪开场白
2015/05/28 职场文书
2016婚礼主持词开场白
2015/11/24 职场文书
《司马光》教学反思
2016/02/22 职场文书
Python 如何利用ffmpeg 处理视频素材
2021/11/27 Python