jquery弹出二级菜单
来源:互联网 发布:云豹步兵战车知乎 编辑:程序博客网 时间:2024/04/28 04:36
css样式:
<style type="text/css">html { color:#000; -webkit-text-size-adjust:none; }body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td { margin:0; padding:0; }body { font-size:12px; font-family: Arial, Helvetica, sans-serif; color:#848484; line-height:25px; }li { list-style:none; }table { border-collapse: collapse; border-spacing: 0; }fieldset, img { border: 0; }a, button { text-decoration:none; outline:none; }legend, caption { display:none; }h1, h2, h3, h4, h5, h6 { font-family:'Microsoft YaHei', 'SimSun'; font-size:12px; }/*=nav*/.nav { position:relative; z-index:60; margin-top:14px; }.fnav .h_38 { height:40px; position:relative; width:251px; }.fnav .first_title { border-top:#48494c 1px dotted; }.fnav .first_title a { font-size:16px; font-weight:normal; }.fnav .b_0 { border:0; }.first_title { position:relative; z-index:70; float:left; width:230px; height:39px; margin-left:5px; overflow:hidden; }.first_title a { margin-left:20px; padding-left:38px; background:#000; border-left:#cb1811 1px solid; font:bold 1.2em 'Microsoft YaHei'; color:#fff; }.fnav .ch { background:none; border:0; font-family:'Microsoft YaHei'; font-weight:normal; color:#7e7e7e; }.fnav a { display:block; font-size:12px; line-height:40px; color:#ccc; }.fnav ul { width:200px; position:absolute; z-index:60; float:left; padding-left:25px; background:url(images/ul_bg.png) right bottom no-repeat #000; line-height:25px; top:-20PX; left:251px; display:none; }.fnav .subNav { left:244px }.fnav ul a { line-height:38px; }.fnav ul li { PADDING-LEFT:15PX; background:#000 url(images/li_bg.png) left top no-repeat; }.fnav .sec_last_nav { padding-right:0; }.fnav ul a { color:#8d8d8d; }.fnav ul a:hover { color:#cb1811; }</style>
html:
<div class="nav"> <ul class="fnav"> <li class="h_38"> <p class="first_title b_0 "> <a class="ch" href="http://www.cdudc.com/index.php?act=index&nav_id=1">首页</a> <a href="http://www.cdudc.com/index.php?act=index&nav_id=1"> INDEX </a> </p> </li> <li class="h_38"> <p class="first_title "> <a class="ch" href="javascript:;">关于我们</a> <a href="javascript:;"> ABOUT US </a> </p> <ul class="pngFix subNav"> <li><a href="http://www.cdudc.com/index.php?act=simple&cat_id=283&nav_id=2" title="机构简介/BRIEF">机构简介/BRIEF</a></li> <li><a href="http://www.cdudc.com/index.php?act=simple&cat_id=284&nav_id=2" title="组织构架/ORGANIZATION">组织构架/ORGANIZATION</a></li> <li><a href="http://www.cdudc.com/index.php?act=article_list&cat_id=286&nav_id=2" title="人才资源/HUNAM RESOURCE">人才资源/HUNAM RESOURCE</a></li> <li><a class="sec_last_nav" href="http://www.cdudc.com/index.php?act=others&cat_id=309&nav_id=2" title="合作单位/COOPERATION">合作单位/COOPERATION</a></li> </ul> </li> <li class="h_38"> <p class="first_title "> <a class="ch" href="javascript:;">业务领域</a> <a href="javascript:;"> FIELDS </a> </p> <ul class="pngFix subNav"> <li><a href="http://www.cdudc.com/index.php?act=pro_list&cat_id=293&nav_id=6" title="城市设计/URBAN DESIGN">城市设计/URBAN DESIGN</a></li> <li><a href="http://www.cdudc.com/index.php?act=pro_list&cat_id=288&nav_id=6" title="概念规划/CONCEPT PLANNING">概念规划/CONCEPT PLANNING</a></li> <li><a href="http://www.cdudc.com/index.php?act=pro_list&cat_id=294&nav_id=6" title="地块规划/PLOT RESEARCH">地块规划/PLOT RESEARCH</a></li> <li><a href="http://www.cdudc.com/index.php?act=pro_list&cat_id=295&nav_id=6" title="专项规划/SPECIAL PLANNING">专项规划/SPECIAL PLANNING</a></li> <li><a class="sec_last_nav" href="http://www.cdudc.com/index.php?act=pro_list&cat_id=310&nav_id=6" title="相关服务/RELATED">相关服务/RELATED</a></li> </ul> </li> <li class="h_38"> <p class="first_title "> <a class="ch" href="javascript:;">学术交流</a> <a href="javascript:;"> ACADEMICS </a> </p> <ul class="pngFix subNav"> <li><a href="http://www.cdudc.com/index.php?act=article_list&cat_id=292&nav_id=3" title="学术讲座/LECTURE">学术讲座/LECTURE</a></li> <li><a href="http://www.cdudc.com/index.php?act=article_list&cat_id=298&nav_id=3" title="学术会议/CONFERENCE">学术会议/CONFERENCE</a></li> <li><a href="http://www.cdudc.com/index.php?act=article_list&cat_id=300&nav_id=3" title="课题研究/SUBJECT RESEARCH">课题研究/SUBJECT RESEARCH</a></li> <li><a href="http://www.cdudc.com/index.php?act=article_list&cat_id=301&nav_id=3" title="考察调研/INVESTIGATION">考察调研/INVESTIGATION</a></li> <li><a class="sec_last_nav" href="http://www.cdudc.com/index.php?act=article_list&cat_id=302&nav_id=3" title="合作设计/CO-DESIGN">合作设计/CO-DESIGN</a></li> </ul> </li> <li class="h_38"> <p class="first_title "> <a class="ch" href="http://www.cdudc.com/index.php?act=article_list&nav_id=5">新闻中心</a> <a href="http://www.cdudc.com/index.php?act=article_list&nav_id=5"> NEWS </a> </p> </li> <li class="h_38"> <p class="first_title "> <a class="ch" href="javascript:;">联系我们</a> <a href="javascript:;"> CONTACT US </a> </p> <ul class="pngFix subNav"> <li><a href="http://www.cdudc.com/index.php?act=simple&cat_id=290&nav_id=4" title="联系方式/MEANS">联系方式/MEANS</a></li> <li><a class="sec_last_nav" href="http://www.cdudc.com/index.php?act=message&cat_id=176&nav_id=4" title="访客留言/GUEST BOOK">访客留言/GUEST BOOK</a></li> </ul> </li> </ul></div>
jquery:
jQuery.extend(jQuery.easing, { easeInBounce: function(x, t, b, c, d) { return c - jQuery.easing.easeOutBounce(x, d - t, 0, c, d) + b; }, easeOutBounce: function(x, t, b, c, d) { if ((t /= d) < (1 / 2.75)) { return c * (7.5625 * t * t) + b; } else if (t < (2 / 2.75)) { return c * (7.5625 * (t -= (1.5 / 2.75)) * t + .75) + b; } else if (t < (2.5 / 2.75)) { return c * (7.5625 * (t -= (2.25 / 2.75)) * t + .9375) + b; } else { return c * (7.5625 * (t -= (2.625 / 2.75)) * t + .984375) + b; } }, easeInOutBounce: function(x, t, b, c, d) { if (t < d / 2) return jQuery.easing.easeInBounce(x, t * 2, 0, c, d) * .5 + b; return jQuery.easing.easeOutBounce(x, t * 2 - d, 0, c, d) * .5 + c * .5 + b; }, easeInCirc: function(x, t, b, c, d) { return - c * (Math.sqrt(1 - (t /= d) * t) - 1) + b; }, easeOutCirc: function(x, t, b, c, d) { return c * Math.sqrt(1 - (t = t / d - 1) * t) + b; }, easeInOutCirc: function(x, t, b, c, d) { if ((t /= d / 2) < 1) return - c / 2 * (Math.sqrt(1 - t * t) - 1) + b; return c / 2 * (Math.sqrt(1 - (t -= 2) * t) + 1) + b; }});var cdc = {};cdc.va = {};cdc.fu = {}cdc.va.nav = null;cdc.va.nav2 = null;//导航点击切换$(".fnav li").hover(function() { $('.leftOut').css('zIndex', '13');$(this).children('p').children('a').eq(0).stop(false, true).animate({ 'marginTop': '-38px' }, 400, 'easeInOutCirc'); $(this).children('ul').stop(false, true).animate({ top: '2px' }, { queue: false, duration: 300 }).fadeIn(300);},function() { $('.leftOut').css('zIndex', '11');$(this).children('p').children('a').eq(0).stop(false, true).animate({ 'marginTop': '0px' }, 400, 'easeInOutCirc'); $(this).children('ul').stop(false, true).animate({ top: '-20px' }, { queue: false, duration: 300 }).fadeOut(300);})
- jquery弹出二级菜单
- 二级dropdown弹出菜单
- Jquery二级菜单
- jquery二级树形菜单
- jQuery二级菜单
- jquery实现二级菜单
- Android 二级动画弹出菜单
- 桌面右键弹出二级菜单
- VC 弹出菜单 动态添加二级菜单
- jquery二级导航菜单--可弹出下拉层 UL/LI结构
- JQuery 实现二级下拉菜单
- jquery+div+css二级菜单
- 用jquery生成二级菜单
- jquery 简单二级树形菜单
- jQuery左侧二级菜单树
- JQuery做折叠二级菜单
- jQuery做二级菜单动画
- jquery ajax二级联动菜单
- jquery 图片全屏效果
- [Linux] ubuntu 下 compiz 与 xorg 与 plugin-containe 都分别是什么
- Inno Setup入门(七)——提供安装语言选项
- HDU 1495 非常可乐
- [Linux] ubuntu最常用的10个快捷键
- jquery弹出二级菜单
- MATLAB figure中提取数据
- mongodb客户端(windows平台)- MongoVUE
- 算法总结:判断一个数是否为素数
- 有趣智力题
- [Linux] ubuntu 12.04 风扇高速旋转解决方法
- Inno Setup入门(八)——有选择性的安装文件
- 典型的ELF可重定位目标文件
- hadoop 配置ssh