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

ttx9n · 发表于 2007-10-26 23:26:09

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>runcode</title> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<meta name="Author" content="Sheneyan" /> 
<script type="text/javascript"> 
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 ); 
} 
</script> 
<style type="text/css"> 
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;} 
</style> 
</head> 
<body> 
<h5 onclick="toggle(this.parentNode)">伸缩效果</h5> 
<p>内容</p> 
<p>内容</p> 
<p>内容</p> 
<p>内容</p> 
 
<h5 onclick="toggle(this.parentNode)">伸缩效果</h5> 
<p>sdf容</p> 
<p>sdf容</p> 
<p>sf容</p> 
<p>sfd容</p> 
 
</body> 
</html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]
一打开网页是收缩的

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>runcode</title> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<meta name="Author" content="Sheneyan" /> 
<script type="text/javascript"> 
var mh = 30;//最小高度 
var step = 1;//每次变化的px量 
var ms = 10;//每隔多久循环一次 
var caiying2007=202//最大高度 
window.onload=function init(){ 
var obj_init=document.getElementsByTagName("div") 
for (var oi=0;oi<obj_init.length;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 ); 
} 
</script> 
<style type="text/css"> 
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;} 
</style> 
</head> 
<body> 
<h5 onclick="toggle(this.parentNode);" >伸缩效果</h5> 
<p>内容</p> 
<p>内容</p> 
<p>内容</p> 
<p>内容</p> 
 
<h5 onclick="toggle(this.parentNode)">伸缩效果</h5> 
<p>sdf容</p> 
<p>sdf容</p> 
<p>sf容</p> 
<p>sfd容</p> 
 
<script> 
</script> 
</body> 
</html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]
慢慢展开菜单的效果，以前早就有人做过，给个时间函数。也算不上什么极限：

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
<style> 
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;} 
</style> 
<SCRIPT LANGUAGE="JavaScript"> 
 
</SCRIPT> 
<title>Cattom</title> 
<link href="link.css" rel="stylesheet" type="text/css"> 
</head> 
<script language="JavaScript">  
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); 
    } 
} 
</script> 
<body> 
<script language=javascript> 
  var whichOpen=menuTitle1; 
  var whichContinue=""; 
</script> 
  
  <table cellpadding=0 cellspacing=0 width=150 
style="border-top:1pt solid black"> 
  <tr style="cursor:hand;"> 
<td height=18 class=menu_title onmouseover="this.className='menu_title2'" onmouseout="this.className='menu_title'"  
id=menuTitle1 onclick="menuChange (menu1,120,menuTitle1,arrow1);"> <FONT face="webdings">4 
::动漫同人志::</td></tr><tr><td> 
<table cellpadding=0 cellspacing=0 align=center width=135 style="position:relative;top:10px;"> 
<tr> 
              <td height=20><a href="https://www.jb51.net/article/rhdm.htm">:::日韩动漫:::</a></td> 
            </tr> 
<tr> 
              <td height=20><a href="https://www.jb51.net/article/gtdm.htm">:::港台动漫:::</a></td> 
            </tr> 
<tr> 
              <td height=20><a href="https://www.jb51.net/article/dldm.htm">:::大陆动漫:::</a></td> 
            </tr> 
<tr> 
              <td height=20><a href="https://www.jb51.net/article/ycdm.htm">:::原创动漫:::</a></td> 
            </tr> 
<tr> 
              <td height=20><a href="https://www.jb51.net/article/yqlj.htm">:::友情链接:::</a></td> 
            </tr> 
</table></td></tr></table> 
<table cellpadding=0 cellspacing=0 width=150 
style="border-top:1pt solid black"> 
  <tr style="cursor:hand;"> 
<td height=18 class=menu_title onmouseover="this.className='menu_title2'" onmouseout="this.className='menu_title'"  
id=menuTitle2 onclick="menuChange (menu2,120,menuTitle2,arrow2);"> <FONT face="webdings">4 
::动漫音乐::</td></tr><tr><td> 
<table cellpadding=0 cellspacing=0 align=center width=135 style="position:relative;top:10px;"> 
<tr> 
              <td height=20><a href="https://www.jb51.net/article/rhdmyy.htm">::日韩动漫音乐::</a></td> 
            </tr> 
<tr> 
              <td height=20><a href="https://www.jb51.net/article/gtdmyy.htm">::港台动漫音乐::</a></td> 
            </tr> 
<tr> 
              <td height=20><a href="https://www.jb51.net/article/dldmyy.htm">::大陆动漫音乐::</a></td> 
            </tr> 
<tr> 
              <td height=20><a href="https://www.jb51.net/article/dmyyk.htm">::动漫音乐库::</a></td> 
            </tr> 
<tr> 
              <td height=20><a href="https://www.jb51.net/article/wydb.htm">:::网友点播:::</a></td> 
            </tr> 
</table></td></tr></table> 
<table cellpadding=0 cellspacing=0 width=150 
style="border-top:1pt solid black; border-bottom:1pt solid black;"> 
  <tr style="cursor:hand;"><td height=18 class=menu_title onmouseover="this.className='menu_title2'" onmouseout="this.className='menu_title'"   
id=menuTitle3 onclick="menuChange(menu3,140,menuTitle3,arrow3);"> 
<FONT face="webdings">4 
::网页123::</td></tr><tr><td> 
 
<table cellpadding=0 cellspacing=0 align=center width=135 style="position:relative; top:10px;"> 
<tr><td height=20>::网页基础::</td></tr> 
<tr><td height=20>::网页进阶::</td></tr> 
<tr><td height=20>::网页高手::</td></tr> 
<tr><td height=20>::网页脚本::</td></tr> 
<tr><td height=20>::网页理念::</td></tr> 
<tr><td height=20>::网页源件::</td></tr> 
</table></td></tr></table> 
<table cellpadding=0 cellspacing=0 width=150 
style="border-top:1pt solid black; border-bottom:1pt solid black;"> 
  <tr style="cursor:hand;"><td height=18 class=menu_title onmouseover="this.className='menu_title2'" onmouseout="this.className='menu_title'"   
id=menuTitle4 onclick="menuChange(menu4,140,menuTitle4,arrow4);"> 
<FONT face="webdings">4 
::兄弟站点::</td></tr><tr><td> 
 
<table cellpadding=0 cellspacing=0 align=center width=135 style="position:relative; top:10px;"> 
<tr><td height=20>征集中...</td></tr> 
<tr><td height=20>征集中...</td></tr> 
<tr><td height=20>征集中...</td></tr> 
<tr><td height=20>征集中...</td></tr> 
<tr><td height=20>征集中...</td></tr> 
<tr><td height=20>征集中...</td></tr> 
</table></td></tr></table> 
</body> 
</html>

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<title>tree menu by jiarry</title> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<script language="JavaScript" type="text/JavaScript"> 
 
</script> 
<style type="text/css"> 
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;} 
</style> 
</head> 
<body> 
<p> </p> 
<p> </p> 
<font id='icon1'>+</font>栏目一 
 
<font id='select1_1'></font>菜单一</font>
 
<font id='select1_2'></font>菜单二</font>
 
<font id='select1_3'></font>菜单三</font>
 
 
<font id='icon2'>+</font>栏目二 
 
<font id='select2_1'></font>菜单一</font>
 
<font id='select2_2'></font>菜单二</font>
 
<font id='select2_3'></font>菜单三</font>
 
 
<font id='icon3'>+</font>栏目三 
 
<font id='select3_1'></font>菜单一</font>
 
<font id='select3_2'></font>菜单二</font>
 
<font id='select3_3'></font>菜单三</font>
 
 
<font id='icon4'>+</font>栏目四 
 
<font id='select4_1'></font>菜单一</font>
 
<font id='select4_2'></font>菜单二</font>
 
<font id='select4_3'></font>菜单三</font>
 
<font id='select4_4'></font>菜单三</font>
 
<font id='select4_5'></font>菜单三</font>
 
<font id='select4_6'></font>菜单三</font>

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

黑白键 · 发表于 2022-8-18 03:35:00

刷刷刷刷刷刷刷刷刷刷刷刷刷刷刷

溪谷玉贤 · 发表于 2022-11-17 20:36:21

有什么好的服务器

xf9hlg1 · 发表于 2022-12-30 21:07:46

可以，看卡巴

5ble0ks · 发表于 2023-2-9 01:22:32

很好，谢谢分享

locopy · 发表于 2023-2-27 18:06:59

哈哈哈哈哈哈

kwa3hgmjp · 发表于 2023-4-1 06:08:14

的沙发水电费水电费

95nd4ba · 发表于 2023-10-24 04:06:52

vcxvcxv

locopy · 发表于 2023-11-15 14:01:30

老大你好你好好你好

95nd4ba · 发表于 2023-11-22 11:49:15

啦啦啦啦啦德玛西亚

账号		自动登录	找回密码
密码			立即注册

[JavaScript] 几个不错的自动收缩菜单导航效果

相关帖子