社群 學習 工具庫 休閒
搜尋
繁体中文
首頁 > web前端 > js教程 > 几个不错的自动收缩菜单导航效果

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

PHP中文网
發布： 2016-05-16 19:08:26
原創
2132 人瀏覽過

<!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(&#39;"+o.tid+"&#39;)",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(&#39;"+id+"&#39;)",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> 
<div class="xx"><h5 onclick="toggle(this.parentNode)">伸缩效果</h5> 
<p>内容</p> 
<p>内容</p> 
<p>内容</p> 
<p>内容</p> 
</div> 
<div class="xx"><h5 onclick="toggle(this.parentNode)">伸缩效果</h5> 
<p>sdf容</p> 
<p>sdf容</p> 
<p>sf容</p> 
<p>sfd容</p> 
</div> 
</body> 
</html>
登入後複製

一打开网页是收缩的

<!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(&#39;"+o.tid+"&#39;)",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(&#39;"+id+"&#39;)",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> 
<div class="xx"><h5 onclick="toggle(this.parentNode);" >伸缩效果</h5> 
<p>内容</p> 
<p>内容</p> 
<p>内容</p> 
<p>内容</p> 
</div> 
<div class="xx"><h5 onclick="toggle(this.parentNode)">伸缩效果</h5> 
<p>sdf容</p> 
<p>sdf容</p> 
<p>sf容</p> 
<p>sfd容</p> 
</div> 
<script> 
</script> 
</body> 
</html>
登入後複製

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

<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"> 
<!-- 
function menuShow(MenuId,maxh,MenuId2,arrow){ 
if(MenuId.style.pixelHeight<maxh)  { 
    MenuId.style.pixelHeight+=maxh/20; 
    MenuId.filters.alpha.opacity+=5; 
    arrow.innerHTML="<FONT face=webdings>6</span>" 
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="<FONT face=webdings>4</span>" 
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; i<a.length; i++) 
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}} 
} 
//--> 
</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> 
<div id="Layer1" style="position:absolute; left:0px; top:350px; width:111px; height:102px; z-index:1">  
  <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=&#39;menu_title2&#39;" onmouseout="this.className=&#39;menu_title&#39;"  
id=menuTitle1 onclick="menuChange (menu1,120,menuTitle1,arrow1);"> <span><span id=arrow1><FONT face="webdings">4</span> 
::动漫同人志::</span></td></tr><tr><td><div class=sec_menu style="width:150;height:0; filter:alpha(Opacity=0);display:none;" id=menu1> 
<table cellpadding=0 cellspacing=0 align=center width=135 style="position:relative;top:10px;"> 
<tr> 
              <td height=20><a href="rhdm.htm">:::日韩动漫:::</a></td> 
            </tr> 
<tr> 
              <td height=20><a href="gtdm.htm">:::港台动漫:::</a></td> 
            </tr> 
<tr> 
              <td height=20><a href="dldm.htm">:::大陆动漫:::</a></td> 
            </tr> 
<tr> 
              <td height=20><a href="ycdm.htm">:::原创动漫:::</a></td> 
            </tr> 
<tr> 
              <td height=20><a href="yqlj.htm">:::友情链接:::</a></td> 
            </tr> 
</table></div></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=&#39;menu_title2&#39;" onmouseout="this.className=&#39;menu_title&#39;"  
id=menuTitle2 onclick="menuChange (menu2,120,menuTitle2,arrow2);"> <span><span id=arrow2><FONT face="webdings">4</span> 
::动漫音乐::</span></td></tr><tr><td><div class=sec_menu style="width:150;height:0; filter:alpha(Opacity=0);display:none;" id=menu2> 
<table cellpadding=0 cellspacing=0 align=center width=135 style="position:relative;top:10px;"> 
<tr> 
              <td height=20><a href="rhdmyy.htm">::日韩动漫音乐::</a></td> 
            </tr> 
<tr> 
              <td height=20><a href="gtdmyy.htm">::港台动漫音乐::</a></td> 
            </tr> 
<tr> 
              <td height=20><a href="dldmyy.htm">::大陆动漫音乐::</a></td> 
            </tr> 
<tr> 
              <td height=20><a href="dmyyk.htm">::动漫音乐库::</a></td> 
            </tr> 
<tr> 
              <td height=20><a href="wydb.htm">:::网友点播:::</a></td> 
            </tr> 
</table></div></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=&#39;menu_title2&#39;" onmouseout="this.className=&#39;menu_title&#39;"   
id=menuTitle3 onclick="menuChange(menu3,140,menuTitle3,arrow3);"> 
<span><span id=arrow3><FONT face="webdings">4</span> 
::网页123::</span></td></tr><tr><td> 
<div class=sec_menu style="width:150;height:0; 
filter:alpha(Opacity=0); display:none;" id=menu3> 
<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></div></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=&#39;menu_title2&#39;" onmouseout="this.className=&#39;menu_title&#39;"   
id=menuTitle4 onclick="menuChange(menu4,140,menuTitle4,arrow4);"> 
<span><span id=arrow4><FONT face="webdings">4</span> 
::兄弟站点::</span></td></tr><tr><td> 
<div class=sec_menu style="width:150;height:0; 
filter:alpha(Opacity=0); display:none;" id=menu4> 
<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></div></td></tr></table></div> 
</body> 
</html>
登入後複製
<!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"> 
<!--//made by jiarry.126.com Aug.27 2004 
function showhide_obj(obj,icon) 
{ 
//objStr=obj.toString();     
//alert(objStr) 
/*objStr=2; 
a=objStr.toString()+5; 
b=objStr+5 
alert(a);alert(b); 
*/ 
 if (obj.style.display=="none")  
  {     
    div_list = document.all.tags("div"); //指定文档中的对象为div,以适用于IE;    
    for (i=0; i< div_list.length; i ++) { 
      thisDiv = div_list[i];  
      if(thisDiv.id.indexOf("title")!=-1)//当文档div中的id含有list时,与charAt类似; 
      { 
      //if(obj.id!=obj)//该div 的id又非选中的obj,设置该div的style为none 
      //{ 
      thisDiv.style.display="none"; 
     // } 
      } 
    }  
     
     
    myfont=document.all.tags("font"); 
   for(i=0;i<myfont.length;i++) 
    { 
    thisfont = myfont[i]; 
    if(thisfont.id.indexOf("icon")!=-1 && icon.id!=icon) 
    {    
    //alert(thisfont.id) 
    thisfont.innerHTML="+"; 
     } 
   } 
    icon.innerHTML="-"; 
    obj.style.display="";  
} 
 else 
  { 
      icon.innerHTML="+"; 
      obj.style.display="none"; 
      } 
 } 
function set_initialization(obj,img) 
{//设置初始状态,打开一个层; 
   obj.style.display=""; 
   img.src="images/icon/minus.gif"; 
   } 
// 
function show_this(obj) 
{ 
if (obj.id==obj.id)  
 { 
 //alert(obj.id) 
   blinkicon=document.all.tags("font");     
   for(x=0;x<blinkicon.length;x++) 
    { 
    if( blinkicon[x].id.indexOf("select")!=-1 && obj.id!=obj ) 
      { 
      //alert( blinkicon[x].id) 
       blinkicon[x].innerHTML=" "; 
      } 
    } 
      obj.innerHTML="&gt;";  
 } 
 else 
 { 
       obj.innerHTML=" "; 
 } 
} 
//--> 
</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> 
<div style="line-height:25px;" onClick="showhide_obj(title1,icon1)"><font id=&#39;icon1&#39;>+</font>栏目一</div> 
<div id=title1  style="background-color:#fffff3;line-height:22px;display:none;"> 
<span id=menu1_1 onMouseOver="this.style.backgroundColor=&#39;blue&#39;" onMouseOut="this.style.backgroundColor=&#39;&#39;" onclick="show_this(select1_1)"><font id=&#39;select1_1&#39;></font>菜单一</span></font>
 
<span id=menu1_2 onclick="show_this(select1_2)"><font id=&#39;select1_2&#39;></font>菜单二</span></font>
 
<span id=menu1_3 onclick="show_this(select1_3)"><font id=&#39;select1_3&#39;></font>菜单三</span></font>
 
</div> 
<div style="line-height:25px;" onClick="showhide_obj(title2,icon2)"><font id=&#39;icon2&#39;>+</font>栏目二</div> 
<div id=title2 style="background-color:#fffff3;line-height:22px;display:none;"> 
<span id=menu2_1 onclick="show_this(select2_1)"><font id=&#39;select2_1&#39;></font>菜单一</span></font>
 
<span id=menu2_2 onclick="show_this(select2_2)"><font id=&#39;select2_2&#39;></font>菜单二</span></font>
 
<span id=menu2_3 onclick="show_this(select2_3)"><font id=&#39;select2_3&#39;></font>菜单三</span></font>
 
</div> 
<div style="line-height:25px;" onClick="showhide_obj(title3,icon3)"><font id=&#39;icon3&#39;>+</font>栏目三</div> 
<div id=title3 style="background-color:#fffff3;line-height:22px;display:none;"> 
<span id=menu3_1 onclick="show_this(select3_1)"><font id=&#39;select3_1&#39;></font>菜单一</span></font>
 
<span id=menu3_2 onclick="show_this(select3_2)"><font id=&#39;select3_2&#39;></font>菜单二</span></font>
 
<span id=menu3_3 onclick="show_this(select3_3)"><font id=&#39;select3_3&#39;></font>菜单三</span></font>
 
</div> 
<div style="line-height:25px;" onClick="showhide_obj(title4,icon4)"><font id=&#39;icon4&#39;>+</font>栏目四</div> 
<div id=title4 style="background-color:#fffff3;line-height:22px;display:none;"> 
<span id=menu4_1 onclick="show_this(select4_1)"><font id=&#39;select4_1&#39;></font>菜单一</span></font>
 
<span id=menu4_2 onclick="show_this(select4_2)"><font id=&#39;select4_2&#39;></font>菜单二</span></font>
 
<span id=menu4_3 onclick="show_this(select4_3)"><font id=&#39;select4_3&#39;></font>菜单三</span></font>
 
<span id=menu4_4 onclick="show_this(select4_4)"><font id=&#39;select4_4&#39;></font>菜单三</span></font>
 
<span id=menu4_5 onclick="show_this(select4_5)"><font id=&#39;select4_5&#39;></font>菜单三</span></font>
 
<span id=menu4_6 onclick="show_this(select4_6)"><font id=&#39;select4_6&#39;></font>菜单三</span></font>
 
</div> 
<div> 
<span style=" border-top:1px solid gray;width:120px;margin-left:0px;"></span> 
</div>
登入後複製


相關標籤：
效果 選單導航
來源：php.cn
上一篇：javascript渐变显示的雅虎中国选项卡效果代码_导航菜单 下一篇：javascript实现的左右选择框效果代码_表单特效
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
作者最新文章
最新問題
PX自動轉換為REM錯誤 <style>html {   字體大小：calc(100vw / 3.75); }body {    字體大小：0.16rem； }</style><...
來自於 2024-04-16 09:34:16
0
0
4687
使用具有 3 級層次結構的自訂分類法選擇 woocommerce 相關產品 我有一家woocommerce商店，其自訂分類為「運動」。此分類有三個等級-父級、子級、子級-例如：室內運動>競技場運動>籃球。如果使用者查看籃球項目，那麼我希望相關產...
來自於 2024-04-06 20:05:30
0
1
544
如何讓我的圖像顯示在頁面的主顯示幕上？ 我想做的是使用NASAAPI接收一些照片。然後在我的網頁的縮圖和主顯示屏上顯示這些照片。我只是弄清楚為什麼程式碼不從縮圖中獲取圖像並將其顯示在頁面上。我還使用HTML5以上版本的模...
來自於 2024-04-06 15:33:12
0
1
433
使用 Live Server 的網站，當我從文件啟動時無法工作 我嘗試了幾種瀏覽器，並且在每種情況下網站都可以與LiveServer正常工作。另一方面，當我使用Firefox/Chrome啟動它時，網站根本不會加載我的style.css，當我使...
來自於 2024-04-06 12:46:18
0
1
403
如何從 PrimeVue 為 ColumnSlots 主體函數新增正確的類型 這是來自Column.d.ts的PrimeVueColumnSlots（縮短）exportinterfaceColumnSlots{/***Custombodytemplate.*...
來自於 2024-04-06 11:50:20
0
1
526
相關專題
更多>
熱門推薦
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板