Js 竖直伸缩菜单(百度)

更新时间：2010年03月03日 23:29:01 作者：

这个菜单是从百度推广扒下来的，去掉了CSS文件，仅保留核心的Js动作，点击每一项的标题，可展开二级的子项菜单，想用的朋友自己添加样式，这样更能符合你网站的主题。

<title>从百度扒下来的竖直伸缩菜单-www.jb51.net</title> <div class="menu" id="MenuContainer"> <h4 nodeid="390">新手入门</h4> <div style="display:none" id="submenu_390"> <p><a href="#">关于百度搜索推广</a></p> <p><a href="#">账户注册</a></p> <p><a href="#5">快速上手</a></p> </div> <h4 nodeid="397">推广制作</h4> <div style="display:none" id="submenu_397"> <p><a href="#">设置匹配方式</a></p> <p><a href="#">撰写创意</a></p> <p><a href="#">设置URL</a></p> </div> <h4 nodeid="436">推广投放</h4> <div style="display:none" id="submenu_436"> <p><a href="#">点击过滤</a></p> <p><a href="#">质量度</a></p> <p><a href="#">关键词匹配</a></p> <p><a href="#">创意展现方式</a></p> </div> <h4 nodeid="506">效果评估</h4> <div style="display:none" id="submenu_506"> <p><a href="#">推广效果</a></p> <p><a href="#6">百度Bridge</a></p> </div> <h4 nodeid="515">持续优化</h4> <div style="display:none" id="submenu_515"> <p><a href="#">网站优化</a></p> </div> <h4 nodeid="520">增值产品</h4> <div style="display:none" id="submenu_520"> <p><a href="#1">百度推广助手</a></p> <p><a href="#">营销中心</a></p> </div> <h4 class="expand" nodeid="3936">关注焦点</h4> <div style="display:none" id="submenu_3936"> <p><a href="#7">推广专题</a></p> </div> </div> <script type="text/javascript"> var MENU_ID="MenuContainer";var MENU_LINK_PREFIX="./?module=default&controller=index&action=node&nodeid=";var SUB_ITEM_HEIGHT=27;function G(A){return document.getElementById(A)}var menuOnshow;function initMenu(){try{if(window.ActiveXObject&&!window.isopera){document.execCommand("BackgroundImageCache",false,true)}}catch(F){}var C=G(MENU_ID).getElementsByTagName("h4");for(var D=0,B=C.length;D<B;D++){var E=C[D];if(E.className!="current"){E.onclick=menuClickHandler}if(E.className=="expand"){var A=getMenuContainer(E);if(A.getElementsByTagName("p").length>0){menuOnshow=E;A.style.display=""}}}}function getMenuContainer(B){var A=B.nextSibling;while(A.nodeType!=1){A=A.nextSibling}return A}function menuClickHandler(I){if(isOnTweening){return }var D=getMenuContainer(this);var C=D.getElementsByTagName("p").length;if(C<=0){top.location=MENU_LINK_PREFIX+this.getAttribute("nodeid");return }if(this!=menuOnshow){var B;var E=G(MENU_ID).getElementsByTagName("h4");for(var F=0,A=E.length;F<A;F++){var H=E[F];if(H.className=="expand"&&getMenuContainer(H).getElementsByTagName("p").length>0){B=H;break}}menuOnshow=this;if(B){Queue.add(showSubMenu,this)}else{Queue.add(showSubMenu,this)}}else{Queue.add(hideSubMenu,this);menuOnshow=null}Queue.trigRun()}function showSubMenu(C){var B=C.nextSibling;while(B.nodeType!=1){B=B.nextSibling}if(B.style.display!="none"){return }var A=B.getElementsByTagName("p").length;var D=A*SUB_ITEM_HEIGHT;C.className="expand";tween(B,0,D)}function hideSubMenu(B){var A=B.nextSibling;while(A.nodeType!=1){A=A.nextSibling}if(A.style.display=="none"){return }var C=A.offsetHeight;B.className="";tween(A,C,0)}var Queue={list:[],add:function(A,B){Queue.list.push({fn:A,tar:B})},trigRun:function(){var A=Queue.list.shift();if(A){onTweenFinished=Queue.trigRun;A.fn(A.tar)}}};var tweenCurrentStep,tweenEl,tweenBegin,tweenEnd,tweenOffset,tweenInterval;var tweenStep=5,isOnTweening=0;var onTweenFinished;function tween(C,B,A){if(isOnTweening){return }tweenEl=C;tweenBegin=B;tweenEnd=A;tweenOffset=A-B;tweenCurrentStep=0;tweenEl.style.display="";tweenEl.style.height=tweenBegin+"px";isOnTweening=1;tweenInterval=setInterval(onTweenStep,10)}function onTweenStep(){tweenCurrentStep++;if(tweenStep<=tweenCurrentStep){afterTween();return }var A=Math.floor(tweenOffset*easeOut(tweenCurrentStep,tweenStep));tweenEl.style.height=tweenBegin+A+"px"}function afterTween(){tweenEl.style.height="";if(tweenEnd==0){tweenEl.style.display="none"}clearInterval(tweenInterval);tweenInterval=null;tweenEl=null;isOnTweening=0;if(onTweenFinished){var A=onTweenFinished;onTweenFinished=null;A()}}function easeOut(A,B){var C=A/B;return -C*(C-2)}initMenu(); </script>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

您可能感兴趣的文章:

javascript仿126邮箱TAB切换效果
仿126中的绿色tab切换效果，比较漂亮
2008-09-09
js 全兼容可高亮二级缓冲折叠菜单
最近一段时间一直比较忙，已经有好几个月没有打理博客了。现将一个最近在项目中制作的一个菜单实例整理出来，共享一下。
2010-06-06
JavaScript多级下拉菜单代码(简单实用)
JavaScript下拉菜单实现代码，js与css的良好结合。喜欢的朋友可以测试下。
2010-06-06
一个不错的动感导航菜单
一个不错的动感导航菜单...
2007-05-05
JavaScript CSS 菜单功能代码
CSS 菜单功能,多浏览器兼容性好
2008-12-12
Js 竖直伸缩菜单(百度)
这个菜单是从百度推广扒下来的，去掉了CSS文件，仅保留核心的Js动作，点击每一项的标题，可展开二级的子项菜单，想用的朋友自己添加样式，这样更能符合你网站的主题。
2010-03-03
带缓冲的收缩与展开内容效果
带缓冲的收缩与展开内容效果...
2007-09-09
可以媲美Flash的JS导航菜单
可以媲美Flash的JS导航菜单...
2007-03-03
超酷的鼠标拖拽翻页(分页)效果实现javascript代码
超酷的鼠标拖拽翻页(分页)效果实现javascript代码,非常的不错。
2009-09-09
Div+Js实现的带阴影菜单微软以前网站曾用过
Div+Js实现的阴影菜单，微软以前老版网站首页曾用过，用以索引出Windows产品家族的所有产品，本菜单仅实现了一个雏形，想实现像微软一样的效果，估计还需要做不少工作。放出来的目的是供学习CSS的朋友做参考。
2009-12-12

Js 竖直伸缩菜单(百度)

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具