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/xhtml">
<head>
<title>可以折叠的菜单工具栏</title>
<style>
html,body{
margin:0;
}
body{
url(img.jpg) repeat-x;
}
ha{
margin:0 auto;
}
img{
border:none;
}
#fx_topToolbar{
position:relative;top:-76px;left:0;
margin:0 auto;height:92px;
background:#0C3E74; width:700px;
text-align:center;
}
#fx_topToolbar .shell{
margin:0 auto;padding:13px 0;
}
#btn_offOn{
position:absolute;bottom:-8px;
left:20px;height:24px; width:150px;
background:url(img34.gif) no-repeat;
}
#btn_offOn a{
display:block;zoom:1;height:24px;
position:relative;right:-16px;
background:url(tip.gif) no-repeat 100% 0;
}
</style>
<script>
(JS={
$:function(o){return typeof o=="string"?document.getElementById(o):o},
on:function(o,type,fn){
o.attachEvent?o.attachEvent('on'+type,function(){fn.call(o)}):o.addEventListener(type,fn,false);
return JS.on},
move:function(who,attr,val,s,fn){
var fm=parseInt(who.style[attr])||0;
clearInterval(who['timer_'+attr]);
var iFx=(function(form,to,s){
return function (){
return form+=Math[form<to?'ceil':'floor']((to-form)*(s||0.3))};
})(fm,val,s);
who['timer_'+attr]=setInterval(function (){
var v=iFx();
who.style[attr]=v+'px';
if(v==val){ fn&&fn.call(who);clearInterval(who['timer_'+attr]);};
},18);
}
}).on(window,'load',function (){
var Q=JS.$('fx_topToolbar');Q.style.top='-74px';
JS.on(JS.$('btn_offOn'),'mouseover',function(){JS.move(Q,'top',0)})
(Q,'mouseout',function (){Q.outTimer=setTimeout(function(){JS.move(Q,'top',-74)},10)})
(Q,'mouseover',function (){clearTimeout(this.outTimer)});
})
</script>
</head>
<body>
<div id="fx_topToolbar">
<div class="shell">
<a href="#" title="">
<img src="1.gif" width="231" height="58" alt="" />
</a>
<a href="#" title="">
<img src="2.gif" width="231" height="58" alt="" />
</a>
</div>
<div id="btn_offOn"><a href="#" title=""></a></div>
</div>
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

赞 (0)

相关推荐

  • JS+CSS实现大气的黑色首页导航菜单效果代码

    JS+CSS实现大气的黑色首页导航菜单效果代码

    本文实例讲述了JS+CSS实现大气的黑色首页导航菜单效果代码.分享给大家供大家参考.具体如下: 这是一款JS+CSS实现的大气的重色+红色高强对比的菜单,可用作首页导航菜单,从设计的角度来讲,挺专业,从实用角度来讲,应用广泛,是款人见人爱的经典风格菜单,超不错的一个作品. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-black-style-nav-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC

  • js实现带缓冲效果的仿QQ面板折叠菜单代码

    js实现带缓冲效果的仿QQ面板折叠菜单代码

    本文实例讲述了js实现带缓冲效果的仿QQ面板折叠菜单代码.分享给大家供大家参考.具体如下: 带缓冲效果的仿QQ面板折叠菜单代码,使用方法:调用效果: Effect(1,2); 其中1为: 被改变对象的id 其中2为: 控制容器的id 可在使用: this.parentNode.id 取得(父标签的id) 注意给对象ID的时候一定不要重复. 运行效果如下图所示: 在线演示地址如下: http://demo.jb51.net/js/2015/js-buffer-style-qq-menu-codes

  • js无限级折叠菜单精简版

    无限级折叠菜单 1.01 JS版 无限级折叠菜单 1.0.1 JS版 菜单_1_1 菜单_2_1 菜单_3_1 菜单_4_1 菜单_5_1 菜单_5_2 菜单_4_2 菜单_5_1 菜单_5_2 菜单_3_2 菜单_4_1 菜单_5_1 菜单_5_2 菜单_4_2 菜单_5_1 菜单_5_2 菜单_2_2 菜单_3_1 菜单_4_1 菜单_5_1 菜单_5_2 菜单_4_2 菜单_5_1 菜单_5_2 菜单_3_2 菜单_4_1 菜单_5_1 菜单_5_2 菜单_4_2 菜单_5_1 菜单_5_

  • JS实现鼠标滑过折叠与展开菜单效果代码

    JS实现鼠标滑过折叠与展开菜单效果代码

    本文实例讲述了JS实现鼠标滑过折叠与展开菜单效果代码.分享给大家供大家参考.具体如下: 这是一款展开菜单特效,鼠标移上的时候自动展开,移走后自动折叠隐藏起来,运用了JS技术,并结合了CSS共同实现的效果.本折叠菜单类似QQ可折叠的好友列表一样,不少人喜欢这种菜单. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-hover-show-hidden-menu-style-codes/ 具体代码如下: <!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/xhtml"> &l

  • js实现简单折叠、展开菜单的方法

    js实现简单折叠、展开菜单的方法

    本文实例讲述了js实现简单折叠.展开菜单的方法.分享给大家供大家参考.具体如下: 这里介绍的是意乱会折叠.展开的菜单导航栏,很老时候写的,CSS没有做美化,如果想用的朋友就自己美化吧. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-simple-hidden-show-menu-codes/ 具体代码如下: <html> <script> function show(c_Str) {if(document.all(c_Str

  • js+css实现超简洁的二级下拉菜单效果代码

    js+css实现超简洁的二级下拉菜单效果代码

    本文实例讲述了js+css实现超简洁的二级下拉菜单效果代码.分享给大家供大家参考.具体如下: 这是一个很简洁的CSS+JavaScript二级菜单,没有使用过多的修饰素材,尽量不调用外部图片,简洁大方,而且便于二级开发完善,最初是一个政府网站上的菜单. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-simple-2jxl-menu-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//

  • JS实现仿QQ面板的手风琴效果折叠菜单代码

    JS实现仿QQ面板的手风琴效果折叠菜单代码

    本文实例讲述了JS实现仿QQ面板的手风琴效果折叠菜单代码.分享给大家供大家参考.具体如下: 这是一款简单实用的垂直导航菜单,有人把这种风格称为"手风琴"菜单,类似仿QQ面板的折叠菜单,鼠标放在任意一个菜单上,它会展开所属的二级菜单,很不错的选择,以前就分享过此类菜单,这次经过了代码优化升级,更人性化了. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-f-qq-sfq-style-menu-codes/ 具体代码如下: <!

  • js实现可折叠展开的手风琴菜单效果

    js实现可折叠展开的手风琴菜单效果

    本文实例讲述了js实现可折叠展开的手风琴菜单效果.分享给大家供大家参考.具体如下: 这是一款可折叠展开的菜单,手风琴菜单,运用CSS与JavaScript技术实现的合拢与伸展的网页菜单,代码简洁,来自老外的代码作品,希望大家喜欢. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-hidden-show-sfq-style-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XH

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

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

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

  • JS+CSS实现的简单折叠展开多级菜单效果

    JS+CSS实现的简单折叠展开多级菜单效果

    本文实例讲述了JS+CSS实现的可折叠展开多级菜单效果.分享给大家供大家参考.具体如下: 这是一款JS+CSS实现的多级折叠菜单,可折叠展开/合拢,没有引用任何的外部文件,也没有用到图片,虽然简单,而且还有些粗糙,但核心的东西已经展示给大家了,正在研究折叠菜单的朋友们,这一个小例子可能正是你需要的,好好研究一下吧. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-simple-zdzk-menu-style-codes/ 具体代码如

随机推荐