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

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

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

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/jquery-simple-nav-cha-menu-style-codes/

具体代码如下：

<!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程序设计有所帮助。

赞 (0)

相关推荐

  • jQuery实现背景滑动菜单

    话不多说,直接附上源码,仅供大家参考 <div class="menu"> <ul id="menu"> <li><a href="#">JavaScript</a></li> <li value="1"><a href="#">Graphic Design</a></li> <li

  • jQuery实现可用于博客的动态滑动菜单

    本文实例讲述了jQuery实现可用于博客的动态滑动菜单的方法.分享给大家供大家参考.具体如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtm

  • jquery实现仿Flash的横向滑动菜单效果代码

    jquery实现仿Flash的横向滑动菜单效果代码

    本文实例讲述了jquery实现仿Flash的横向滑动菜单效果代码.分享给大家供大家参考.具体如下: 这是一个仿Flash的jquery滑动菜单,横向,延时效果明显,如果觉得延时太长的话,自己可以修改参数,通过这个菜单主要是想向大家掌握一些jQuery生成动画的技巧,同时这也是jquery强大功能的体现. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-f-flash-style-move-menu-codes/ 具体代码如下: <!

  • jQuery实现带延迟效果的滑动菜单代码

    jQuery实现带延迟效果的滑动菜单代码

    本文实例讲述了jQuery实现带延迟效果的滑动菜单代码.分享给大家供大家参考.具体如下: 这是一款基于jQuery的滑动菜单,鼠标移到某菜单项上,菜单的背景可以滑动过来,平滑的滑动效果,炫动的导航效果,相比没有动画的菜单,这款菜单真的挺不错哦. 先来看看运行效果截图: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-delay-style-menu-nav-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C/

  • 利用JQuery动画制作滑动菜单项效果实现步骤及代码

    利用JQuery动画制作滑动菜单项效果实现步骤及代码

    效果: 点击第二个菜单项后出现一个向上滑动的动画,控制margin-top底部另一个div中的文字 上移从而替换掉原有的文字. 原理其实不难无非就是css的控制加之jquery的代码 对docemnt中所有li绑定一个hover事件,事件中根据鼠标的状态(无非是移入与移除), 使用animate的动画方式使原有的div向上移70px,移出时再将页面效果变回原有的样子. 代码如下: 复制代码 代码如下: $(function () { var webNav = { val: { target: 0

  • jquery实现左右滑动菜单效果代码

    jquery实现左右滑动菜单效果代码

    本文实例讲述了jquery实现左右滑动菜单效果代码.分享给大家供大家参考.具体如下: 这里演示了三种背景颜色左右滑动jquery菜单导航效果,IE下有问题,本菜单使用了CSS3的部分属性,因此建议使用火狐或Chrome等浏览器获取最佳效果.当把鼠标移到菜单上的时候,对应菜单项的背景会变化,而且本菜单具有圆角的效果. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-left-right-move-style-menu-codes/ 具

  • jQuery实现可用于博客的动态滑动菜单完整实例

    jQuery实现可用于博客的动态滑动菜单完整实例

    本文实例讲述了jQuery实现可用于博客的动态滑动菜单代码.分享给大家供大家参考.具体如下: 这是一款基于jQuery1.3.2的动态滑动菜单特效代码,常用于博客,鼠标滑过菜单,菜单会不断伸出,貌似很漂亮,我比较喜欢,发上来供大家使用或学习参考. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-blog-move-style-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//

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

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

    本文实例讲述了jquery实现最简单的滑动菜单效果代码.分享给大家供大家参考.具体如下: 这是一款最简单的jQuery下拉滑出菜单,jQuery代码实现,这里没有过多的去修饰菜单,仅是一些基本的实现,特别是对学习jQuery是个不错的参考实例,这里使用了一个jquery封装库文件jquery.tools.min.js,从外部引入,测试时候可能会因载入不成功而看不到效果,刷新一下网页即可解决此问题. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/

  • javascript简单实现滑动菜单效果的方法

    本文实例讲述了javascript简单实现滑动菜单效果的方法.分享给大家供大家参考.具体如下: 整个javascript代码共42行,其中主要函数Slide代码26行,可以改进哦! <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns=&

  • js实现鼠标点击左上角滑动菜单效果代码

    js实现鼠标点击左上角滑动菜单效果代码

    本文实例讲述了js实现鼠标点击左上角滑动菜单效果代码.分享给大家供大家参考.具体如下: 这里需要鼠标点击激活的网页左上角菜单,不点击不会滑出来,可以改造成二级菜单. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-click-hd-show-menu-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo

  • JS+CSS实现大气清新的滑动菜单效果代码

    JS+CSS实现大气清新的滑动菜单效果代码

    本文实例讲述了JS+CSS实现大气清新的滑动菜单效果代码.分享给大家供大家参考,具体如下: 这是一款比较大气清新的滑动导航菜单,CSS和JavaScript配合完成,鼠标放到一级菜单上,会滑出二级的菜单,兼容性也不错,适合大多数网站使用,用到两张背景图片,请拷贝图片地址下载图片. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-dqqx-scroll-menu-demo/ 具体代码如下: <!DOCTYPE html PUBLIC

  • JS实现滑动菜单效果代码(包括Tab,选项卡,横向等效果)

    JS实现滑动菜单效果代码(包括Tab,选项卡,横向等效果)

    本文实例讲述了JS实现滑动菜单效果代码.分享给大家供大家参考.具体如下: 这里实现一个特效将网页中的选项卡滑动门都集中到一个网页中来,有些同志曾经为同一个页面布置两个滑动门而烦恼,参考一下本例子,相信你会找到答案,而且有各种排列方式的选项卡,总有一款会满足你. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-move-tab-nav-menu-demo-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC &qu

  • JS实现的左侧竖向滑动菜单效果代码

    JS实现的左侧竖向滑动菜单效果代码

    本文实例讲述了JS实现的左侧竖向滑动菜单效果代码.分享给大家供大家参考,具体如下: 这是一款经过改造的左侧竖向滑动菜单,基于JavaScript+CSS,没有过多的修饰,主要想实现菜单的动画效果,想用的朋友,自己美化吧. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-left-scroll-style-menu-demo/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tr

  • jQuery实现的淡入淡出二级菜单效果代码

    jQuery实现的淡入淡出二级菜单效果代码

    本文实例讲述了jQuery实现的淡入淡出二级菜单效果代码.分享给大家供大家参考.具体如下: 这是一款加入了jQuery的菜单,一个看似平凡菜单突然有味道.有生机起来,这里将jQuery1.3.2引用进来,让弹出的二级菜单具备淡入淡出的效果,虽然就效果本身来说并不起眼,但比起无任何效果的菜单,从体验上来说,已经强了很多倍. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-fade-in-out-2l-nav-menu-codes/ 具

  • jquery+CSS3模拟Path2.0动画菜单效果代码

    jquery+CSS3模拟Path2.0动画菜单效果代码

    本文实例讲述了jquery+CSS3模拟Path2.0动画菜单效果代码.分享给大家供大家参考.具体如下: CSS3实现的仿手机软件菜单,动画菜单,注意的地方,小按钮位移后有个缓冲,每个小按钮缓冲的距离不一样,每个小按钮位移的时间有间隔,处理好这些细节才能体现出灵动的效果. CSS3代码:(请用非IE标准浏览器访问)由于代码运行框缺陷,请先刷新一下页面动画运行更流畅.Path菜单的小按钮本来应该也可以旋转的,但CSS3动画的位移和旋转同时出现时不知道为何旋转就没效果了,所以这里没弄出来,感兴趣的朋

随机推荐