首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

Posted in Javascript onSeptember 06, 2015

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

这是基于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 相关文章推荐
jscript之Read an Excel Spreadsheet
Jun 13 Javascript
javascript的trim,ltrim,rtrim自定义函数
Sep 21 Javascript
Pro JavaScript Techniques学习笔记
Dec 28 Javascript
Javascript封装DOMContentLoaded事件实例
Jun 12 Javascript
JavaScript设计模式之装饰者模式介绍
Dec 28 Javascript
JS动态增删表格行的方法
Mar 03 Javascript
Javascript将数值转换为金额格式（分隔千分位和自动增加小数点）
Jun 22 Javascript
vue脚手架及vue-router基本使用
Apr 09 Javascript
Angular Excel 导入与导出的实现代码
Apr 17 Javascript
Vue移动端实现图片上传及超过1M压缩上传
Dec 23 Javascript
easyUI使用分页过滤器对数据进行分页操作实例分析
Jun 01 Javascript
一分钟学会JavaScript中的try-catch
Dec 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
西索(1) 通知(159) 实用文书(952) 申请书(21) 观后感(479) HAM-2000(1) 文书(291) 慰问信(53) 波段(1) AngularJS(2)
You might like
基于数据库的在线人数，日访问量等统计
2006/10/09 PHP
PHP实现指定字段的多维数组排序函数分享
2015/03/09 PHP
ThinkPHP框架实现定时执行任务的两种方法分析
2018/09/04 PHP
php中yii框架实例用法
2020/12/22 PHP
让复选框只能选择一项的方法
2013/10/08 Javascript
JavaScript获取客户端计算机硬件及系统等信息的方法
2014/01/02 Javascript
利用JQuery制作符合Web标准的QQ弹出消息
2014/01/14 Javascript
利用jquery写的左右轮播图特效
2014/02/12 Javascript
JQuery解析HTML、JSON和XML实例详解
2014/03/29 Javascript
webpack-dev-server自动更新页面方法
2018/02/22 Javascript
vuejs使用axios异步访问时用get和post的实例讲解
2018/08/09 Javascript
对vue事件的延迟执行实例讲解
2018/08/28 Javascript
微信小程序使用wx.request请求服务器json数据并渲染到页面操作示例
2019/03/30 Javascript
vue样式穿透 ::v-deep的具体使用
2020/06/04 Javascript
解决vue无法侦听数组及对象属性的变化问题
2020/07/17 Javascript
Vue 中使用lodash对事件进行防抖和节流操作
2020/07/26 Javascript
python中文编码问题小结
2014/09/28 Python
Python从单元素字典中获取key和value的实例
2018/12/31 Python
python爬虫刷访问量 2019 7月
2019/08/01 Python
pytorch 更改预训练模型网络结构的方法
2019/08/19 Python
python轮询机制控制led实例
2020/05/03 Python
python中numpy.empty()函数实例讲解
2021/02/05 Python
详解css3自定义滚动条样式写法
2017/12/25 HTML / CSS
使用HTML5的File实现base64和图片的互转
2013/08/01 HTML / CSS
Pure Collection美国官网：来自英国羊绒专家的奢华羊绒
2017/11/19 全球购物
可持续未来的时尚基础：Alternative Apparel
2019/05/06 全球购物
数控专业大学生的自我鉴定
2013/11/13 职场文书
优秀毕业大学生推荐信
2013/11/13 职场文书
《记金华的双龙洞》教学反思
2014/04/19 职场文书
环保建议书300字
2014/05/14 职场文书
2014年文艺部工作总结
2014/11/17 职场文书
质量保证书格式
2015/02/27 职场文书
毕业生入职感言
2015/07/31 职场文书
关于拾金不昧的感谢信（五篇）
2019/10/18 职场文书
Redis入门教程详解
2021/08/30 Redis
图文详解Nginx版本平滑升级方案
2021/09/15 Servers