首页 / JQUERY / jQuery实现美观的多级动画效果菜单代码

jQuery实现美观的多级动画效果菜单代码

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了jQuery实现美观的多级动画效果菜单代码，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含6845字，纯文字阅读大概需要10分钟。

内容图文

本文实例讲述了jQuery实现多级动画效果菜单代码。分享给大家供大家参考。具体如下：

这是基于jQuery实现的一款多级动画菜单源代码，动画效果流畅，确实不错的动画菜单，欢迎大家试用。这种菜单一般应用于大站，不过如果你的站点内容比较多，也是可以考虑的哦。

运行效果截图如下：

jQuery实现美观的多级动画效果菜单代码 - 文章图片

在线演示地址如下：

http://demo.jb51.net/js/2015/jquery-nlevel-animate-menu-style-codes/

具体代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
 <head>
 <title>多级的动画菜单代码</title>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
 <style>
 *{
 padding:0;
 margin:0;
 }
  body{
 background:#f0f0f0;
 font-family:"Helvetica Neue",Arial,Helvetica,Geneva,sans-serif;
  overflow-x:hidden;
 }
 h1{
 font-size:180px;
 line-height:180px;
 text-transform: uppercase;
 color:#f9f9f9;
 position:absolute;
 text-shadow:0 1px 1px #ddd;
 top:-25px;
 left:-20px;
 white-space: nowrap;
 }
 span.reference{
 position:fixed;
 left:10px;
 bottom:10px;
 font-size:11px;
 }
 span.reference a{
 color:#DF7B61;
 text-decoration:none;
 text-transform: uppercase;
 text-shadow:0 1px 0 #fff;
 }
 span.reference a:hover{
 color:#000;
 }
 .box{
 margin-top:129px;
 height:460px;
  width:100%;
 position:relative;
 background:#fff url(images/click.png) no-repeat 380px 180px;
  -moz-box-shadow:0px 0px 10px #aaa;
  -webkit-box-shadow:0px 0px 10px #aaa;
  -box-shadow:0px 0px 10px #aaa;
 }
 .box h2{
  color:#f0f0f0;
  padding:40px 10px;
  text-shadow:1px 1px 1px #ccc;
 }
ul.ldd_menu{
 margin:0px;
 padding:0;
 display:block;
 height:50px;
 background-color:#D04528;
 list-style:none;
 font-family:"Trebuchet MS", sans-serif;
 border-top:1px solid #EF593B;
 border-bottom:1px solid #EF593B;
 border-left:10px solid #D04528;
 -moz-box-shadow:0px 3px 4px #591E12;
 -webkit-box-shadow:0px 3px 4px #591E12;
 -box-shadow:0px 3px 4px #591E12;
}
ul.ldd_menu a{
 text-decoration:none;
}
ul.ldd_menu > li{
 float:left;
 position:relative;
}
ul.ldd_menu > li > span{
 float:left;
 color:#fff;
 background-color:#D04528;
 height:50px;
 line-height:50px;
 cursor:default;
 padding:0px 20px;
 text-shadow:0px 0px 1px #fff;
 border-right:1px solid #DF7B61;
 border-left:1px solid #C44D37;
}
ul.ldd_menu .ldd_submenu{
 position:absolute;
 top:50px;
 width:550px;
 display:none;
 opacity:0.95;
 left:0px;
 font-size:10px;
 background: #C34328;
 border-top:1px solid #EF593B;
 -moz-box-shadow:0px 3px 4px #591E12 inset;
 -webkit-box-shadow:0px 3px 4px #591E12 inset;
 -box-shadow:0px 3px 4px #591E12 inset;
}
a.ldd_subfoot{
 background-color:#f0f0f0;
 color:#444;
 display:block;
 clear:both;
 padding:15px 20px;
 text-transform:uppercase;
 font-family: Arial, serif;
 font-size:12px;
 text-shadow:0px 0px 1px #fff;
 -moz-box-shadow:0px 0px 2px #777 inset;
 -webkit-box-shadow:0px 0px 2px #777 inset;
 -box-shadow:0px 0px 2px #777 inset;
}
ul.ldd_menu ul{
 list-style:none;
 float:left;
 border-left:1px solid #DF7B61;
 margin:20px 0px 10px 30px;
 padding:10px;
}
li.ldd_heading{
 font-family: Georgia, serif;
 font-size: 13px;
 font-style: italic;
 color:#FFB39F;
 text-shadow:0px 0px 1px #B03E23;
 padding:0px 0px 10px 0px;
}
ul.ldd_menu ul li a{
 font-family: Arial, serif;
 font-size:10px;
 line-height:20px;
 color:#fff;
 padding:1px 3px;
}
ul.ldd_menu ul li a:hover{
 -moz-box-shadow:0px 0px 2px #333;
 -webkit-box-shadow:0px 0px 2px #333;
 box-shadow:0px 0px 2px #333;
 background:#AF412B;
}
 </style>
 </head>
 <body>
 <h1>UI Elements</h1>
 <div class="box">
  <h2>Large Drop Down Menu Demo</h2>
  <ul id="ldd_menu" class="ldd_menu">
  <li>
   <span>Vacations</span><!-- Increases to 510px in width-->
   <div class="ldd_submenu">
   <ul>
    <li class="ldd_heading">By Location</li>
    <li><a href="#">South America</a></li>
    <li><a href="#">Antartica</a></li>
    <li><a href="#">Africa</a></li>
    <li><a href="#">Asia and Australia</a></li>
    <li><a href="#">Europe</a></li>
   </ul>
   <ul>
    <li class="ldd_heading">By Category</li>
    <li><a href="#">Sun & Beach</a></li>
    <li><a href="#">Adventure</a></li>
    <li><a href="#">Science & Education</a></li>
    <li><a href="#">Extreme Sports</a></li>
    <li><a href="#">Relaxing</a></li>
    <li><a href="#">Spa and Wellness</a></li>
   </ul>
   <ul>
    <li class="ldd_heading">By Theme</li>
    <li><a href="#">Paradise Islands</a></li>
    <li><a href="#">Cruises & Boat Trips</a></li>
    <li><a href="#">Wild Animals & Safaris</a></li>
    <li><a href="#">Nature Pure</a></li>
    <li><a href="#">Helping others & For Hope</a></li>
    <li><a href="#">Diving</a></li>
   </ul>
   <a class="ldd_subfoot" href="#"> + New Deals</a>
   </div>
  </li>
  <li>
   <span>Equipment</span>
   <div class="ldd_submenu">
   <ul>
    <li class="ldd_heading">By Location</li>
    <li><a href="#">South America</a></li>
    <li><a href="#">Antartica</a></li>
    <li><a href="#">Africa</a></li>
    <li><a href="#">Asia and Australia</a></li>
    <li><a href="#">Europe</a></li>
   </ul>
   <ul>
    <li class="ldd_heading">By Category</li>
    <li><a href="#">Sun & Beach</a></li>
    <li><a href="#">Adventure</a></li>
    <li><a href="#">Science & Education</a></li>
    <li><a href="#">Extreme Sports</a></li>
    <li><a href="#">Relaxing</a></li>
    <li><a href="#">Spa and Wellness</a></li>
   </ul>
   <ul>
    <li class="ldd_heading">By Theme</li>
    <li><a href="#">Paradise Islands</a></li>
    <li><a href="#">Cruises & Boat Trips</a></li>
    <li><a href="#">Wild Animals & Safaris</a></li>
    <li><a href="#">Nature Pure</a></li>
    <li><a href="#">Helping others & For Hope</a></li>
    <li><a href="#">Diving</a></li>
   </ul>
   <a class="ldd_subfoot" href="#"> + New Deals</a>
   </div>
  </li>
  <li>
   <span>Locations</span>
   <div class="ldd_submenu">
   <ul>
    <li class="ldd_heading">By Location</li>
    <li><a href="#">South America</a></li>
    <li><a href="#">Antartica</a></li>
    <li><a href="#">Africa</a></li>
    <li><a href="#">Asia and Australia</a></li>
    <li><a href="#">Europe</a></li>
   </ul>
   <ul>
    <li class="ldd_heading">By Category</li>
    <li><a href="#">Sun & Beach</a></li>
    <li><a href="#">Adventure</a></li>
    <li><a href="#">Science & Education</a></li>
    <li><a href="#">Extreme Sports</a></li>
    <li><a href="#">Relaxing</a></li>
    <li><a href="#">Spa and Wellness</a></li>
   </ul>
   <ul>
    <li class="ldd_heading">By Theme</li>
    <li><a href="#">Paradise Islands</a></li>
    <li><a href="#">Cruises & Boat Trips</a></li>
    <li><a href="#">Wild Animals & Safaris</a></li>
    <li><a href="#">Nature Pure</a></li>
    <li><a href="#">Helping others & For Hope</a></li>
    <li><a href="#">Diving</a></li>
   </ul>
   <a class="ldd_subfoot" href="#"> + New Deals</a>
   </div>
  </li>
  </ul>
 </div>
 <!-- The JavaScript -->
 <script type="text/javascript" src="jquery-1.6.2.min.js"></script>
 <script type="text/javascript">
 $(function() {
  /**
   * the menu
   */
  var $menu = $('#ldd_menu');
  /**
   * for each list element,
   * we show the submenu when hovering and
   * expand the span element (title) to 510px
   */
  $menu.children('li').each(function(){
   var $this = $(this);
   var $span = $this.children('span');
   $span.data('width',$span.width());
   $this.bind('mouseenter',function(){
   $menu.find('.ldd_submenu').stop(true,true).hide();
   $span.stop().animate({'width':'510px'},300,function(){
    $this.find('.ldd_submenu').slideDown(300);
   });
   }).bind('mouseleave',function(){
   $this.find('.ldd_submenu').stop(true,true).hide();
   $span.stop().animate({'width':$span.data('width')+'px'},300);
   });
  });
 });
 </script> 
 </body>
</html>

希望本文所述对大家的jquery程序设计有所帮助。

内容总结

以上是互联网集市为您收集整理的jQuery实现美观的多级动画效果菜单代码全部内容，希望文章能够帮你解决jQuery实现美观的多级动画效果菜单代码所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/356224.html

来源：【匿名】

【上一篇】jquery实现可自动收缩的TAB网页选项卡代码【下一篇】学习php+jQuery+Ajax实现点赞效果的方法

更多 ►

【jQuery实现美观的多级动画效果菜单代码】教程文章相关的互联网学习教程文章

动画效果详情请看 jQuery api 动画收放 slideUp slideDown 通过id class 来设置 jQuery实现效果【代码】

<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; padding: 0; } #boss{ margin:auto ; width: 500px; background-color:#C48698; border: 2px; } #boss ul li { list-style: none; } #boss ul li div { display: none...

jQuery动画效果

1、jQuery隐藏显示：可以使用hide()和show()方法来隐藏和显示HTML元素。1、show()显示2、hide()隐藏不占位置本质是在行内样式表中添加了display:none样式3、toogle() 切换显示隐藏4、（1）$("#hide").click(function(){$("p").hide();});（2）$("#show").click(function(){$("p").show();});（3）$("#toogle").click(function(){$("p").toogle();});2、jQuery淡入淡出：参数可以控制淡入淡出的时间1、fadeIn()用于淡入已隐藏的...

jQuery基本动画效果【代码】

jQuery基本动画效果1、show()用于显示页面元素与之相对应的hide() 测试案例：<p title="标题">测试</p> <ul ><li title=‘苹果‘>苹果</li><li title=‘橘子‘>橘子</li><li title=‘菠萝‘>菠萝</li> </ul> 点击显示 $(‘p‘).bind("click",function(){$("ul").show(); })点击切换效果 $(‘p‘).toggle(function(){$("ul").show(); },function(){$("ul").hide() }) 注意：这里可以加参数进去speed:三种预定速度之一的字符串("slow...

03-jQuery动画效果【代码】

jQuery提供的一组网页中常见的动画效果，这些动画是标准的、有规律的效果；同时还提供给我们了自定义动画的功能。显示动画方式一： $("div").show();解释：无参数，表示让指定的元素直接显示出来。其实这个方法的底层就是通过display: block;实现的。方式二：$(‘div‘).show(3000);解释：通过控制元素的宽高、透明度、display属性，逐渐显示，2秒后显示完毕。方式三： $("div").show("slow");参数可以是：slow 慢：600msnormal 正...

jQuery 动画效果，关键词 animate【代码】

<!DOCTYPE html> <html> <head> <script src="/jquery/jquery-1.11.1.min.js"> </script> <script> $(document).ready(function(){$("button").click(function(){$("div").animate({left:‘250px‘});}); }); </script> </head><body> <button>开始动画</button> <p>默认情况下，所有 HTML 元素的位置都是静态的，并且无法移动。如需对位置进行操作，记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。</p...

jquery带动画效果幻灯片特效代码【图】

本文实例讲述了jquery带动画效果幻灯片插件devrama.slider。分享给大家供大家参考。具体如下： jquery带动画效果幻灯片插件devrama.slider是一款可以在焦点图中嵌入html内容和文字动画效果，运行时可出现图文层叠显示效果，且图片下方伴有进度条效果。运行效果图： -------------------查看效果下载源码-------------------小提示：浏览器中如果不能正常运行，可以尝试切换浏览模式。为大家分享...

jQuery实现的鼠标响应缓冲动画效果示例【图】

本文实例讲述了jQuery实现的鼠标响应缓冲动画效果。分享给大家供大家参考，具体如下：先来看看运行效果：具体代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>js动画-缓冲动画</title> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.js"></script> <style> * {margin: 0;padding: 0;font-family:"微软雅黑" } #box{height:100px;width:100px;background-color:#0099CC;margin-top:200px;po...

jQuery原生的动画效果

1.方法： show：显示选中元素。 hide：隐藏选中元素。 toggle：显示或隐藏选中元素。 fadeIn：将选中元素的不透明度逐步提升到100%。 fadeOut：将选中元素的不透明度逐步降为0%。 slideDown：垂直向下滑动显示选中元素。 slideUp：垂直向上滑动隐藏当前元素。 slideToggle：垂直向上或向下滑动的形式折叠或展开选中元素。2.语法：　　　$(selector).方法名([speed], [callback]);-- speed：可选，表示速度。默认“normal”。可取值...

jQuery+HTML5实现WebGL高性能烟花绽放动画效果【附demo源码下载】【图】

本文实例讲述了jQuery+HTML5实现WebGL高性能烟花绽放动画效果。分享给大家供大家参考，具体如下：运行效果：完整代码如下： <!DOCTYPE html> <html class=" -webkit- js flexbox canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations cssc...

jQuery实现的点赞随机数字显示动画效果(附在线演示与demo源码下载)_jquery【图】

本文实例讲述了jQuery实现的点赞随机数字显示动画效果。分享给大家供大家参考，具体如下：运行效果截图如下：点击此处查看在线演示。完整实例代码点击此处本站下载。具体代码如下：jQuery实现点赞数字累加动画效果*{margin:0;padding:0;list-style-type:none;} a,img{border:0;} html,body{background:#fff;font-size:14px;font-family:"microsoft yahei";} .tip{text-align:center;padding-top:10%;font-size:2em;}$("html,bod...

jQuery淡入于淡出动画效果实现【图】

淡入与淡出hide()和show()函数的动画都在不断的改变着大小,实际上这种做法非常的混乱,所以我们此时最好的做法是可以进行淡入与淡出的效果淡入操作:fadeIn(时间,function(){})淡出操作:fadeOut(事件,function(){})自己设置淡出操作fadeTo(事件,淡出率,function(){}),淡出率不超过1淡出操作<html> <head> <meta charset="utf-8"/> <title>jQuery的动画函数</title> <script type="text/javascript" src="js/jQuery.min.js" charset="...

jQuery中的动画效果有哪些【图】

jQuery中的动画效果有：slideDown,slideUp等实现滑动效果；fadeIn,fadeToggle等实现淡入淡出的效果jQuery有很多方法可以帮助我们在页面上实现很多有趣好玩的动画效果，而且程序代码简单比用原生态的JavaScript代码实现效果更加方便简洁，今天将在文章中详细和大家介绍几种jQuery动画操作的方法，希望对大家的学习有一定的帮助。【推荐课程：jQuery动画】滑动效果slideDown（）可以通过高度变化从下往上增大，并且以滑动的方式显示隐...

jquery中的动画效果总结以及动画队列的总结（附代码）【图】

本篇文章给大家带来的内容是关于jquery中的动画效果总结以及动画队列的总结（附代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。基础效果.hide([duration ] [,easing ] [,complete ])用于隐藏元素，没有参数的时候等同于直接设置 display 属性$(.target).hide()//等同于 $(.target).css(display, none).show()用于显示元素，用法和hide类似$(#btn-box1).on(click,function(){$(.box).show(normal) }).togg...

jQuery实现切换页面过渡动画效果【图】

这篇文章主要介绍了关于jQuery实现切换页面过渡动画效果，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下这是一款效果非常酷的jQuery和CSS3通过AJAX调用切换页面过渡动画特效插件。该页面切换特效使用AJAX来动态加载链接内容，在页面加载的时候，使用CSS3来制作非常酷的页面过渡动画效果。插件中使用pushState方法来管理浏览器的浏览历史，需要的朋友可以参考下直接为大家介绍制作过程，希望大家可以喜欢。HTML结构...

在jQuery中如何实现下雪动画效果【图】

这篇文章主要介绍了jQuery实现的下雪动画效果,涉及jQuery插件结合setInterval、animate进行动画操作的相关使用技巧,并附带源码供读者下载参考,需要的朋友可以参考下本文实例讲述了jQuery实现的下雪动画效果。分享给大家供大家参考，具体如下：html部分：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"> <html xmlns="http://www.w3.org/1999/xhtml"><head><meta name="viewport"content="width=device-width, in...

JQUERY - 技术教程分类

jQuery 教程 jQuery 简介 jQuery 安装 jQuery 语法 jQuery 选择器 jQuery 事件 jQuery 隐藏/显示 jQuery 淡入淡出 jQuery 滑动 jQuery 动画 jQuery 停止动画 jQuery Callback jQuery 链 jQuery 捕获 jQuery 设置 jQuery 添加元素 jQuery 删除元素 jQuery CSS 类 jQuery css() 方法 jQuery 尺寸 jQuery 遍历 jQuery 祖先 jQuery 后代 jQuery 同胞 jQuery 过滤 jQuery AJAX 简介 jQuery load() 方法 jQuery get()/post() 方法 jQuery noConflict() 方法 jQuery JSONP jQuery 实例 jQuery 选择器 jQuery 事件方法 jQuery 效果方法 jQuery HTML / CSS 方法 jQuery 遍历方法 jQuery AJAX 方法 jQuery 杂项方法 jQuery 属性 jQuery Validate jQuery Cookie jQuery Accordion jQuery Autocomplete jQuery Growl jQuery 密码验证 jQuery Tooltip jQuery Treeview jquery 全部

JQUERY - 最热教程

javascript中html字符串转化为jquerydo...js批量设置元素样式和封装似于jquery的...使用jquery获取url及url参数的方法 jQuery取消ajax请求的方法 jquery中根据获取元素的6种方法总结如何通过jQuery添加新的内容 jQuery和ajax实现鼠标单击修改内容的方...基于JSON格式数据的简单jQuery幻灯片插...jquery设置内联样式css()js调用iframe实现打印页面内容的方法_j...

首页 / JQUERY / jQuery实现美观的多级动画效果菜单代码

jQuery实现美观的多级动画效果菜单代码

内容导读

内容图文

内容总结

内容备注

内容手机端

【jQuery实现美观的多级动画效果菜单代码】教程文章相关的互联网学习教程文章

动画效果详情请看 jQuery api 动画收放 slideUp slideDown 通过id class 来设置 jQuery实现效果【代码】

jQuery动画效果

jQuery基本动画效果【代码】

03-jQuery动画效果【代码】

jQuery 动画效果，关键词 animate【代码】

jquery带动画效果幻灯片特效代码【图】

jQuery实现的鼠标响应缓冲动画效果示例【图】

jQuery原生的动画效果

jQuery+HTML5实现WebGL高性能烟花绽放动画效果【附demo源码下载】【图】

jQuery实现的点赞随机数字显示动画效果(附在线演示与demo源码下载)_jquery【图】

jQuery淡入于淡出动画效果实现【图】

jQuery中的动画效果有哪些【图】

jquery中的动画效果总结以及动画队列的总结（附代码）【图】

jQuery实现切换页面过渡动画效果【图】

在jQuery中如何实现下雪动画效果【图】

JQUERY - 相关标签

JQUERY - 技术教程分类

JQUERY - 最新教程

JQUERY - 最热教程