php伸缩菜单_几个不错的自动收缩菜单导航效果

本文介绍了使用PHP创建动态伸缩菜单的方法,包括JavaScript实现的菜单展开和收缩效果。通过设置最小高度、每次变化的像素量和循环间隔,实现平滑的菜单动画。示例中展示了多个伸缩效果的实例,适用于网页导航设计。
摘要由CSDN通过智能技术生成

/p>

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

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 < 0){

if (o.offsetHeight <= t.minHeight){

clearTimeout(t.timer);

return;

}

}

else{

if (o.offsetHeight >= 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容

一打开网页是收缩的/p>

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

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

if (obj_init[oi].className=="xx"){obj_init[oi].style.height=mh + "px";}

}

}

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,

maxHeight:caiying2007,

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 < 0){

if (o.offsetHeight <= t.minHeight){

clearTimeout(t.timer);

return;

}

}

else{

if (o.offsetHeight >= 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容

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

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;}

Cattom

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="";

style="border-top:1pt solid black">

id=menuTitle1 οnclick="menuChange (menu1,120,menuTitle1,arrow1);"> 4

::动漫同人志::

style="border-top:1pt solid black">

id=menuTitle2 οnclick="menuChange (menu2,120,menuTitle2,arrow2);"> 4

::动漫音乐::

style="border-top:1pt solid black; border-bottom:1pt solid black;">

id=menuTitle3 οnclick="menuChange(menu3,140,menuTitle3,arrow3);">

4

::网页123::

style="border-top:1pt solid black; border-bottom:1pt solid black;">

id=menuTitle4 οnclick="menuChange(menu4,140,menuTitle4,arrow4);">

4

::兄弟站点::

/p>

"http://www.w3.org/TR/html4/loose.dtd">

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;}

+栏目一

菜单一

菜单二

菜单三

+栏目二

菜单一

菜单二

菜单三

+栏目三

菜单一

菜单二

菜单三

+栏目四

菜单一

菜单二

菜单三

菜单三

菜单三

菜单三

本文原创发布php中文网,转载请注明出处,感谢您的尊重!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值