首页
所有分类
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 相关文章推荐
在浏览器中获取当前执行的脚本文件名的代码
Jul 19 Javascript
Javascript数组的排序 sort()方法和reverse()方法
Jun 04 Javascript
js创建一个input数组并绑定click事件的方法
Jun 12 Javascript
JavaScript对表格或元素按文本，数字或日期排序的方法
May 26 Javascript
javascript实现数组中的内容随机输出
Aug 11 Javascript
纯jquery实现模仿淘宝购物车结算
Aug 20 Javascript
详解Webwork中Action 调用的方法
Feb 02 Javascript
js操作DOM--添加、删除节点的简单实例
Jul 08 Javascript
Vue.js快速入门教程
Sep 07 Javascript
JS实现点击网页判断是否安装app并打开否则跳转app store
Nov 18 Javascript
addEventListener()与removeEventListener()解析
Apr 20 Javascript
深入掌握 react的 setState的工作机制
Sep 27 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
德劲1107(1) A254(1) 上海永华(1) 安健(1) SRF-M100(1) YH-R296(1) SRF-22W(1) 华普R-96(1) GF515(1) 德劲1102(1)
You might like
PHP学习之PHP表达式
2006/10/09 PHP
PHP IN_ARRAY 函数使用注意事项
2010/07/24 PHP
php中选择什么接口(mysql、mysqli)访问mysql
2013/02/06 PHP
PHP登录环节防止sql注入的方法浅析
2014/06/30 PHP
PHP记录搜索引擎蜘蛛访问网站足迹的方法
2015/04/15 PHP
四个PHP非常实用的功能
2015/09/29 PHP
phalcon框架使用指南
2016/02/23 PHP
Laravel实现autoload方法详解
2017/05/07 PHP
Laravel-添加后台模板AdminLte的实现方法
2019/10/08 PHP
javaScript对象和属性的创建方法
2007/01/15 Javascript
js 控制下拉菜单刷新的方法
2013/03/03 Javascript
超简单JS二级、多级联动的简单实例
2014/02/18 Javascript
js获取url传值的方法
2015/12/18 Javascript
基于jQuery实现左右图片轮播（原理通用）
2015/12/24 Javascript
ionic cordova一次上传多张图片（类似input file提交表单)的实现方法
2016/12/16 Javascript
图文详解vue框架安装步骤
2019/02/12 Javascript
深入理解 JS 垃圾回收
2019/06/03 Javascript
你了解vue3.0响应式数据怎么实现吗
2019/06/07 Javascript
浅谈Vue static 静态资源路径 和 style问题
2020/11/07 Javascript
解决vue 使用axios.all()方法发起多个请求控制台报错的问题
2020/11/09 Javascript
[07:54]DOTA2-DPC中国联赛 正赛 iG vs VG 选手采访
2021/03/11 DOTA
python实现的二叉树算法和kmp算法实例
2014/04/25 Python
Python实现的远程登录windows系统功能示例
2018/06/21 Python
Django REST framework内置路由用法
2019/07/26 Python
Python使用字典实现的简单记事本功能示例
2019/08/15 Python
python 实现的车牌识别项目
2021/01/25 Python
Willer台湾：日本高速巴士/夜行巴士预约
2017/07/09 全球购物
西班牙语在线票务市场：SuperBoletería
2019/06/10 全球购物
新闻专业应届生求职信
2013/10/31 职场文书
村干部群众路线教育活动对照检查材料
2014/10/01 职场文书
银行先进个人总结
2015/02/15 职场文书
工程竣工验收申请报告
2015/05/15 职场文书
2016年国庆节假期旅游工作总结
2016/04/01 职场文书
合同范本之电脑出租
2019/08/13 职场文书
七年级话题作文之执着
2019/11/19 职场文书
Redis可视化客户端小结
2021/06/10 Redis