编程 Javascript

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

Posted in Javascript onSeptember 06, 2015

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

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

运行效果截图如下：

在线演示地址如下：

具体代码如下：

<!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实现美观的多级动画效果菜单代码

- Author -

企鹅

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

动态加载图片路径保持JavaScript控件的相对独立性

Sep 06 Javascript

获取offsetTop和offsetLeft值的js代码(兼容)

Apr 16 Javascript

jQuery输入城市查看地图使用介绍

May 08 Javascript

Jquery右下角抖动、浮动实例代码(兼容ie6、FF)

Aug 15 Javascript

jquery模拟SELECT下拉框取值效果

Oct 23 Javascript

js、jquery图片动画、动态切换示例代码

Jun 03 Javascript

JavaScript学习笔记之JS函数

Jan 22 Javascript

JavaScript中setMonth()方法的使用详解

Jun 11 Javascript

jquery trigger函数执行两次的解决方法

Feb 29 Javascript

BootStrap智能表单实战系列(八)表单配置json详解

Jun 13 Javascript

JavaScript实现三级联动菜单效果

Aug 16 Javascript

vue3.0 CLI - 2.4 - 新组件 Forms.vue 中学习表单

Sep 14 Javascript

jquery实现美观的导航菜单鼠标提示特效代码

Sep 06 #Javascript

基于Flowplayer打造一款免费的WEB视频播放器附源码

Sep 06 #Javascript

jquery京东商城双11焦点图多图广告特效代码分享

Sep 06 #Javascript

javascript日期处理函数，性能优化批处理

Sep 06 #Javascript

js实现改进的仿蓝色论坛导航菜单效果代码

Sep 06 #Javascript

配置Grunt的Task时通配符支持和动态生成文件名问题

Sep 06 #Javascript

基于jquery实现的树形菜单效果代码

Sep 06 #Javascript

You might like

Snoopy类使用小例子

2008/04/15 PHP

自己写的php curl库实现整站克隆功能

2015/02/12 PHP

php遍历删除整个目录及文件的方法

2015/03/13 PHP

ThinkPHP2.x防范XSS跨站攻击的方法

2015/09/25 PHP

使用PHP如何实现高效安全的ftp服务器(二)

2015/12/30 PHP

如何用PHP做到页面注册审核

2017/03/02 PHP

JavaScript的类型转换(字符转数字数字转字符)

2010/08/30 Javascript

script的async属性以非阻塞的模式加载脚本

2013/01/15 Javascript

GridView中获取被点击行中的DropDownList和TextBox中的值

2013/07/18 Javascript

js检测网络是否具体连接功能的代码

2014/05/23 Javascript

node.js中的path.join方法使用说明

2014/12/08 Javascript

javascript中innerText和innerHTML属性用法实例分析

2015/05/13 Javascript

JavaScript中Number.MAX_VALUE属性的使用方法

2015/06/04 Javascript

js预加载图片方法汇总

2015/06/15 Javascript

javascript的BOM

2016/05/03 Javascript

js小数计算小数点后显示多位小数的实现方法

2016/05/30 Javascript

AngularJS删除路由中的#符号的方法

2016/09/20 Javascript

重新理解JavaScript的六种继承方式

2017/03/24 Javascript

vue数据传递--我有特殊的实现技巧

2018/03/20 Javascript

利用chrome浏览器进行js调试并找出元素绑定的点击事件详解

2021/01/30 Javascript

jquery拖拽自动排序插件使用方法详解

2020/07/20 jQuery

微信小程序动态修改页面数据及参数传递过程详解

2019/09/27 Javascript

[01:08]DOTA2次级职业联赛 - Wings 战队宣传片

2014/12/01 DOTA

Python回文字符串及回文数字判定功能示例

2018/03/20 Python

python字符串常用方法

2018/06/14 Python

对python中数组的del,remove,pop区别详解

2018/11/07 Python

在python 不同时区之间的差值与转换方法

2019/01/14 Python

Django模板语言 Tags使用详解

2019/09/09 Python

django 框架实现的用户注册、登录、退出功能示例

2019/11/28 Python

给keras层命名,并提取中间层输出值,保存到文档的实例

2020/05/23 Python

Keras load_model 导入错误的解决方式

2020/06/09 Python

python用Tkinter做自己的中文代码编辑器

2020/09/07 Python

加拿大床上用品、家居装饰、厨房和浴室产品购物网站：Linen Chest

2018/06/05 全球购物

土耳其风格手工珠宝：Ottoman Hands

2019/07/26 全球购物

个人工作总结范文2014

2014/11/07 职场文书

经理助理岗位职责

2015/02/02 职场文书