JS+CSS簡易樹狀菜單Tree

2024-09-05 12:19:54

字體：大中小

來源：轉載

供稿：網友

JavaScript+CSS實現的簡易樹狀二級菜單Tree，有CSS基礎的朋友再美化一下，看上去還不錯，它一共可以支持二級分類，用到后臺想必可以吧。

<html><head><title>樹形菜單實例</title><script language="JavaScript" type="text/JavaScript">function showhide_obj(obj,icon){obj=document.getElementById(obj);icon=document.getElementById(icon); if (obj.style.display=="none")   {         //指定文檔中的對象為div,僅適用于IE;           div_list = document.getElementsByTagName("div");        for (i=0; i< div_list.length;i ++)        {          thisDiv = div_list[i];            if(thisDiv.id.indexOf("title")!=-1)//當文檔div中的id含有list時,與charAt類似;           {            //循環把所有菜單鏈接都隱藏起來           thisDiv.style.display="none";           icon.innerHTML = "+";           }        }     myfont=document.getElementsByTagName("font");   for(i=0;i<myfont.length;i++)    {    thisfont = myfont[i];   }    icon.innerHTML="-";    obj.style.display=""; //只顯示當前鏈接} else  {  //當前對象是打開的，就關閉它;   icon.innerHTML="+";   obj.style.display="none";   } }function show_this(obj){    obj=document.getElementById(obj);    if (obj.id==obj.id)      {       blinkicon=document.getElementsByTagName("font");       for(x=0;x<blinkicon.length;x++)        {           if( blinkicon[x].id.indexOf("select")!=-1 && obj.id!=obj )            {               blinkicon[x].innerHTML=" ";            }        }          obj.innerHTML=">";      }     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:#000000;}div{cursor:default;border-top:1px solid gray ; border-left:1px solid gray ;border-right:1px solid gray;background-color:#F6F6F6 ;width:200px;}pre{background-color:#FFFFF1; border:1px solid gray;color:blue;font-family:verdana;Arial;padding:20px;}</style></head><body><div style="line-height:25px;" onClick="showhide_obj('title1','icon1')"><font id='icon1'>+</font>技術類</div><div   class="iwvjtn8m0"   id="title1"  style="background-color:#fffff3;line-height:22px;display:none;"><span id="menu1_1" onMouseOver="this.style.backgroundColor='blue'" onMouseOut="this.style.backgroundColor=''" onclick="show_this('select1_1')"><font id='select1_1'></font>技術支持</span></font><br /><span id="menu1_2" onclick="show_this('select1_2')"><font id='select1_2'></font>PHP學院</span></font><br /><span id="menu1_3" onclick="show_this('select1_3')"><font id='select1_3'></font>網頁特效</span></font><br /></div><div style="line-height:25px;" onClick="showhide_obj('title2','icon2')"><font id='icon2'>+</font>搜索類</div><div   class="iwvjtn8m0"   id="title2" style="background-color:#fffff3;line-height:22px;display:none;"><span id="menu2_1" onclick="show_this('select2_1')"><font id='select2_1'></font>百度</span></font><br /><span id="menu2_2" onclick="show_this('select2_2')"><font id='select2_2'></font>代碼</span></font><br /><span id="menu2_3" onclick="show_this('select2_3')"><font id='select2_3'></font>雅虎</span></font><br /></div><div style="line-height:25px;" onClick="showhide_obj('title3','icon3')"><font id='icon3'>+</font>音樂類</div><div   class="iwvjtn8m0"   id="title3" style="background-color:#fffff3;line-height:22px;display:none;"><span id=menu3_1 onclick="show_this('select3_1')"><font id='select3_1'></font>我的收藏</span></font><br /><span id=menu3_2 onclick="show_this('select3_2')"><font id='select3_2'></font>我的音樂</span></font><br /><span id=menu3_3 onclick="show_this('select3_3')"><font id='select3_3'></font>我的主頁</span></font><br /></div><div style="line-height:25px;" onClick="showhide_obj('title4','icon4')"><font id='icon4'>+</font>聊天類</div><div   class="iwvjtn8m0"   id="title4" style="background-color:#fffff3;line-height:22px;display:none;"><span id=menu4_1 onclick="show_this('select4_1')"><font id='select4_1'></font>菜單一</span></font><br /><span id=menu4_2 onclick="show_this('select4_2')"><font id='select4_2'></font>菜單二</span></font><br /><span id=menu4_3 onclick="show_this('select4_3')"><font id='select4_3'></font>菜單三</span></font><br /></div></body></html>

上一篇：CSS豎向滑動展開的折疊菜單

下一篇：水晶按鈕式的CSS導航菜單