html菜单栏用户点击完自动收缩,几个不错的自动收缩菜单导航效果

runcode

var mh = 30;//最小高度

var step = 1;//每次变化的px量

var ms = 10;//每隔多久循环一次

function toggle(o){

if (!o.tid)o.tid = "_" + Math.random() * 100;

if (!window.toggler)window.toggler = {};

if (!window.toggler[o.tid]){

window.toggler[o.tid]={

obj:o,

maxHeight:o.offsetHeight,

minHeight:mh,

timer:null,

action:1

};

}

o.style.height = o.offsetHeight + "px";

if (window.toggler[o.tid].timer)clearTimeout(window.toggler[o.tid].timer);

window.toggler[o.tid].action *= -1;

window.toggler[o.tid].timer = setTimeout("anim('"+o.tid+"')",ms );

}

function anim(id){

var t = window.toggler[id];

var o = window.toggler[id].obj;

if (t.action = t.maxHeight){

clearTimeout(t.timer);

return;

}

}

o.style.height = (parseInt(o.style.height, 10) + t.action * step) + "px";

window.toggler[id].timer = setTimeout("anim('"+id+"')",ms );

}

div.xx{border:solid 1px;overflow:hidden;}

div.xx h5{border:solid 1px;border-width:0 0 1px;padding:0;margin:0;height:30px;line-height:30px;cursor:pointer;background:#eee;}

伸缩效果

内容

内容

内容

内容

伸缩效果

sdf容

sdf容

sf容

sfd容

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

一打开网页是收缩的

runcode

var mh = 30;//最小高度

var step = 1;//每次变化的px量

var ms = 10;//每隔多久循环一次

var caiying2007=202//最大高度

window.οnlοad=function init(){

var obj_init=document.getElementsByTagName("div")

for (var oi=0;oi= t.maxHeight){

clearTimeout(t.timer);

return;

}

}

o.style.height = (parseInt(o.style.height, 10) + t.action * step) + "px";

window.toggler[id].timer = setTimeout("anim('"+id+"')",ms );

}

div.xx{border:solid 1px;overflow:hidden;height:200px}

div.xx h5{border:solid 1px;border-width:0 0 1px;padding:0;margin:0;height:30px;line-height:30px;cursor:pointer;background:#eee;}

伸缩效果

内容

内容

内容

内容

伸缩效果

sdf容

sdf容

sf容

sfd容

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

慢慢展开菜单的效果，以前早就有人做过，给个时间函数。也算不上什么极限：

body{

margin:0px;

font:normal 12px 宋体;

background: #999999;

}

table{border:0px;}

td{font:normal 12px 宋体; }

img{vertical-align:middle; border:0px;}

.sec_menu{border-left:1px solid #808080; border-right:1px solid #808080;

border-bottom:1px solid #808080; overflow:hidden; background:#FFCC99;}

.menu_title{background-color: #CC6600}

.menu_title span{color:#FFFFFF;}

.menu_title2{background-color: #FF9900}

.menu_title2 span{color:#C8C8C8; }

.showtitle{position:relative; top:-2px; left:-6px; border:1pt solid #C3D4E7;

z-index:0; height:26; background-color: #0080C0; padding-top:5; padding-left:5}

.alp{FILTER: alpha(opacity=0,finishopacity=100,style=1,startx=0,starty=5,

finishx=250,finishy=85}

.txt1{font-size:9pt; color:#CCCCCC;}

6"

if(MenuId.style.pixelHeight==maxh/10)

MenuId.style.display="block";

myMenuId=MenuId;

myMaxh=maxh;

myMenuId2=MenuId2;

myarrow=arrow

setTimeout("menuShow(myMenuId,myMaxh,myMenuId2,myarrow)","5");

}

}

function menuHide(MenuId,maxh,MenuId2,arrow){

if(MenuId.style.pixelHeight>0) {

if(MenuId.style.pixelHeight==maxh/20)

MenuId.style.display="none";

MenuId.style.pixelHeight-=maxh/20;

MenuId.filters.alpha.opacity-=5;

arrow.innerHTML="4"

myMenuId=MenuId;

myMaxh=maxh

myMenuId2=MenuId2;

myarrow=arrow

setTimeout("menuHide(myMenuId,myMaxh,myMenuId2,myarrow)","5");

}

else

if(whichContinue)

whichContinue.click();

}

function menuChange(MenuId,maxh,MenuId2,arrow){

if(MenuId.style.pixelHeight){

menuHide(MenuId,maxh,MenuId2,arrow);

whichOpen="";

whichcontinue="";

}

else

if(whichOpen) {

whichContinue=MenuId2;

whichOpen.click();

}

else

{

menuShow(MenuId,maxh,MenuId2,arrow);

whichOpen=MenuId2;

whichContinue="";

}

}

function MM_preloadImages() { //v3.0

var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();

var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; iCattom

nereidFadeObjects = new Object();

nereidFadeTimers = new Object();

function nereidFade(object, destOp, rate, delta){

if (!document.all)

return

if (object != "[object]"){ //提取串值

setTimeout("nereidFade("+object+","+destOp+","+rate+","+delta+")",0);

return;

}

clearTimeout(nereidFadeTimers[object.sourceIndex]);

diff = destOp-object.filters.alpha.opacity;

direction = 1;

if (object.filters.alpha.opacity > destOp){

direction = -1;

}

delta=Math.min(direction*diff,delta);

object.filters.alpha.opacity+=direction*delta;

if (object.filters.alpha.opacity != destOp){

nereidFadeObjects[object.sourceIndex]=object;

nereidFadeTimers[object.sourceIndex]=setTimeout("nereidFade(nereidFadeObjects["+object.sourceIndex+"],"+destOp+","+rate+","+delta+")",rate);

}

}

var whichOpen=menuTitle1;

var whichContinue="";

4

::动漫同人志::

:::日韩动漫:::

:::港台动漫:::

:::大陆动漫:::

:::原创动漫:::

:::友情链接:::

4

::动漫音乐::

::日韩动漫音乐::

::港台动漫音乐::

::大陆动漫音乐::

::动漫音乐库::

:::网友点播:::

4

::网页123::

::网页基础::

::网页进阶::

::网页高手::

::网页脚本::

::网页理念::

::网页源件::

4

::兄弟站点::

征集中...

征集中...

征集中...

征集中...

征集中...

征集中...

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

tree menu by jiarry

span{ width:100px;Height:25px;margin-left:15px;}

font{font-weight:bold;}

body,td{font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px;color:#333333;}

div{cursor:default;border-top:1px solid gray ; border-left:1px solid gray ;border-right:1px solid gray ;background-color:#D3F7FE ;width:120px;}

pre{background-color:#FFFFF1; border:1px solid gray;color:blue;font-family:verdana;Arial;padding:20px;}

+栏目一

菜单一

菜单二

菜单三

+栏目二

菜单一

菜单二

菜单三

+栏目三

菜单一

菜单二

菜单三

+栏目四

菜单一

菜单二

菜单三

菜单三

菜单三

菜单三

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

时间： 2007-10-25