日韩天天综合网_野战两个奶头被亲到高潮_亚洲日韩欧美精品综合_av女人天堂污污污_视频一区**字幕无弹窗_国产亚洲欧美小视频_国内性爱精品在线免费视频_国产一级电影在线播放_日韩欧美内地福利_亚洲一二三不卡片区

每日更新|TOP排行榜|Tag標簽|充值

無憂首頁網(wǎng)頁模板程序模板建站教程視頻教程網(wǎng)頁特效圖標素材字體下載站長工具站長問答

網(wǎng)頁特效代碼模板無憂>網(wǎng)頁特效>菜單導航特效代碼>

收藏分享查看評論菜單導航

JS+CSS簡易樹狀菜單Tree_菜單導航特效

查看演示效果

特效Tag：樹形菜單樹狀菜單添加

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>樹形菜單實例-hl5o.cn</title>
<meta http-equiv="Content-Type" mrc="text/html; charset=utf-8">
<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含有l(wèi)ist時,與charAt類似;
           {
            //循環(huán)把所有菜單鏈接都隱躲起來
           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 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>
<a href="/" target="_blank">技術支持</a></span></font><br />
<span id="menu1_2" onclick="show_this('select1_2')"><font id='select1_2'></font><a href="/" target="_blank">模板無憂</a></span></font><br />
<span id="menu1_3" onclick="show_this('select1_3')"><font id='select1_3'></font><a href="/" target="_blank">網(wǎng)頁殊效</a></span></font><br />
</div>
<div style="line-height:25px;" onClick="showhide_obj('title2','icon2')"><font id='icon2'>+</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='select2_1'></font><a  target="_blank">百度</a></span></font><br />
<span id="menu2_2" onclick="show_this('select2_2')"><font id='select2_2'></font><a  target="_blank">谷歌</a></span></font><br />
<span id="menu2_3" onclick="show_this('select2_3')"><font id='select2_3'></font><a  target="_blank">雅虎</a></span></font><br />
</div>
<div style="line-height:25px;" onClick="showhide_obj('title3','icon3')"><font id='icon3'>+</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='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 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>

所屬頻道：菜單導航特效/更新時間：2012-10-25

[收藏][報錯][返回列表]

相關菜單導航特效：

菜單導航特效Rss訂閱特效代碼搜索

菜單導航特效推薦

猜你也喜歡看這些

相關鏈接：
復制本頁鏈接| 搜索JS+CSS簡易樹狀菜單Tree
特效說明：
菜單導航模板-JS+CSS簡易樹狀菜單Tree。