Js 竖直伸缩菜单(百度)

从百度扒下来的竖直伸缩菜单-www.jb51.net

新手入门

关于百度搜索推广

账户注册

快速上手

推广制作

设置匹配方式

撰写创意

设置URL

推广投放

点击过滤

质量度

关键词匹配

创意展现方式

效果评估

推广效果

百度Bridge

持续优化

网站优化

增值产品

百度推广助手

营销中心

关注焦点

推广专题

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;D0){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(C0){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

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

(0)

相关推荐

  • JS实现带有3D立体感的银灰色竖排折叠菜单代码

    本文实例讲述了JS实现带有3D立体感的银灰色竖排折叠菜单代码.分享给大家供大家参考,具体如下: 这是一款超酷的可以用到网页左侧的银灰色竖排多级折叠菜单,可以自己为菜单加一个背景,CSS中预留有代码,这是比较标准和经典的一款后台管理模式的菜单,Div+Css结构,符合标准,修改方便,挺不错. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-3d-left-yhs-menu-demo/ 具体代码如下: <!DOCTYPE html PUBLIC

  • JS基于构造函数实现的菜单滑动显隐效果【测试可用】

    本文实例讲述了JS基于构造函数实现的菜单滑动显隐效果.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/x

  • 用js实现的比较经典实用的触发型导航菜单

    经典实用的触发型导航菜单 .sec1 { BORDER-RIGHT: gray 1px solid; BORDER-TOP: #ffffff 1px solid; BORDER-LEFT: #ffffff 1px solid; CURSOR: hand; COLOR: #000000; BORDER- BOTTOM: #ffffff 1px solid; BACKGROUND-COLOR: #eeeeee } .sec2 { BORDER-RIGHT: gray 1px solid; BORDE

  • JS实现选中当前菜单后高亮显示的导航条效果

    本文实例讲述了JS实现选中当前菜单后高亮显示的导航条效果.分享给大家供大家参考.具体如下: 这里演示选中当前菜单后,该菜单高亮显示,也就是说在不改变菜单CSS代码的情况下,用JavaScript去控制菜单的背景,如果该菜单项被点击后,将赋予它一个与众不同的背景颜色或背景图像,这样可以清淅的指引用户下在浏览的网站栏目,本菜单不需要动态语言的加入,简单方便而且效果好. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-cho-nav-gl-sho

  • js 全兼容可高亮二级缓冲折叠菜单

    在后台或OA系统中最常用到的布局往往是一个全屏布局,一般都是上中下三行两列布局,页头.页脚.左侧菜单加一个右侧ifame框架页.所以那种带折叠的二级菜单是会经常使用到的,本例便是实现这样一种比较通用的全兼容可高亮二级缓冲折叠菜单. 特点: 全兼容,浏览器测试:IE5.5.IE6.IE7.IE8.FF3.0.谷歌.Safari 4.0.Opera9.0. Html结构优雅简洁,无多余标签,利于程序循环输出. 样式与结构分离,你可以在样式表中修改不同的风格. 当前选中项高亮状态,一级菜单和二级菜单都

  • 一个简单的js树形菜单

    我练习一下,以免不时之需. 树形菜单不过就是把普通菜单重新排列一下,看起来像树形而已. 上图京东的菜单,给他多几个嵌套,然后添加收缩伸展事件,差不多就行了. 给个例子: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html>

  • js实现的全国省市二级联动下拉选择菜单完整实例

    本文实例讲述了js实现的全国省市二级联动下拉选择菜单.分享给大家供大家参考.具体如下: 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-province-city-cho-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-

  • 基于JS代码实现导航条弹出式悬浮菜单

    1.概述 采用弹出式悬浮菜单,不但可以使网站的导航内容更加清晰,而且不影响页面的整体效果.运行本实例,如图1所示,当鼠标移动到一级导航菜单的标题上时,将弹出悬浮菜单显示该菜单对应的子菜单,鼠标移出时,将隐藏悬浮菜单. 2.技术要点 本实例主要是在JavaScript中,动态改变<div>标签对象的style属性的display属性值来实现动态显示和隐藏二级导航菜单.其实,每一个一级菜单下的二级菜单内容是已经添加在网页的<div>标签中,只是此时设置了<div>不显示.所

  • JS实现的竖向折叠菜单代码

    本文实例讲述了JS实现的竖向折叠菜单代码.分享给大家供大家参考,具体如下: 先来看看运行效果截图: 在线演示地址如下: http://demo.jb51.net/js/2015/js-hxzd-menu-demo/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&q

  • 通用的二级菜单代码(css+javascript)

    ]但在<CSS二级菜单>中,如果一级菜单中的超链接是#,那么只要单击该一级菜单,那么与这个一级菜单对应的二级菜单就会一直显示在网页中,不能隐藏,是一个小小的bug.后来仔细的想了一想,其实,无论是什么样的二级菜单,原理都是一样的: 1.每一个一级菜单都会对应一个层,而这个层里放着的就是该一级菜单对应的二级菜单. 2.默认情况下,二级菜单这个层是隐藏的,在CSS中将层的display属性值设为none,可以达到这一目的. 3.当鼠标放在一级菜单上时,将对应的二级菜单层显示出来,在CSS中将层的d

  • JS模拟bootstrap下拉菜单效果实例

    本文实例讲述了JS模拟bootstrap下拉菜单效果.分享给大家供大家参考,具体如下: 模拟bootstrap下拉菜单 在工作中要切一个效果:点击导航栏,则出现下列菜单,但是当点击其他地方的时候,就隐藏子菜单,效果有点类似于bootstrap 的"下拉菜单" 由于bootstrap的子菜单的样式与设计不同,因此需要自己写一个类似的效果 当点击某个控件的时候,则显示出下拉菜单,但是,当点击空白的地方的时候怎么让其自动隐藏呢? 起初的想法,给body绑定一个onclick事件,当点击空白的

随机推荐