Javascript制作可折叠式导航菜单 - 栏目, 导航, menu, 菜单, 折叠, 伸缩(好用)
2009-11-09 20:12:38 来源：WEB开发网 闂傚倸鍊搁崐椋庢濮橆兗缂氱憸宥堢亱闂佸湱铏庨崰鏍不椤栫偞鐓ラ柣鏇炲€圭€氾拷
闂傚倸鍊搁崐椋庣矆娓氣偓楠炲鏁撻悩鎻掔€梺姹囧灩閻忔艾鐣烽弻銉︾厵闁规鍠栭。濂告煕鎼达紕校闁靛洤瀚伴獮鎺楀箣濠靛啫浜鹃柣銏⑶圭壕濠氭煙閻愵剚鐏辨俊鎻掔墛缁绘盯宕卞Δ鍐冣剝绻涘畝濠佺敖缂佽鲸鎹囧畷鎺戭潩閹典焦鐎搁梻浣烘嚀閸ゆ牠骞忛敓锟�
婵犵數濮烽弫鍛婃叏椤撱垹绠柛鎰靛枛瀹告繃銇勯幘瀵哥畼闁硅娲熷缁樼瑹閳ь剙岣胯鐓ら柕鍫濇偪濞差亜惟闁宠桨鑳堕崝锕€顪冮妶鍡楃瑐闁煎啿鐖奸崺濠囧即閵忥紕鍘梺鎼炲劗閺呮稒绂掕缁辨帗娼忛埡浣锋闂佽桨鐒﹂幑鍥极閹剧粯鏅搁柨鐕傛嫹闂傚倸鍊搁崐椋庢濮橆兗缂氱憸宥堢亱闂佸湱铏庨崰鏍不椤栫偞鐓ラ柣鏇炲€圭€氾拷 闂傚倸鍊搁崐鐑芥嚄閼哥數浠氱紓鍌欒兌缁垶銆冮崨鏉戠厺鐎广儱顦崡鎶芥煏韫囨洖校闁诲寒鍓熷铏圭磼濡搫顫嶅銈嗗姉閸樠囧煡婢跺á鐔兼煥鐎ｎ兘鍋撴繝姘拺鐟滅増甯掓禍浼存煕閹惧鈽夐柍缁樻煥椤繈鎳滅喊妯诲闂備礁鎲＄粙鎴︺偑閺夋垟鏋旈柡鍐ｅ亾缂佺粯绋撴禒锕傚磼濮橆剦鐎抽梻浣哥－缁垶骞戦崶顒傚祦閻庯綆浜栭弨浠嬫煙闁箑澧い鏂垮€规穱濠囨倷椤忓嫧鍋撻弽褜娼栧┑鐘宠壘閸屻劎鎲歌箛娑樼疅闁圭虎鍠楅弲鎼佹煥閻曞倹瀚�
<html>
<head>
</head>
<title>用 javascript 制作可折叠式导航菜单 - 栏目, 导航, menu, 菜单, 折叠, 伸缩, </title>
<body>
<script type="text/Javascript">
function switchMenu(curr_id, total_num)
{
for(var i=0; i<total_num; i++)
{
//二级菜单
var el = document.getElementById('menu_sub_'+i);
if(!el) return;
//一级菜单前面的图片
var img = document.getElementById('menu_master_'+i);
if(i == curr_id)
{
el.style.display = "block";
img.src = "open.gif";
}
else
{
el.style.display = "none";
img.src = "http://www.cncms.com/close.gif";
}
}
}
</script>
<style type="text/CSS">
<!--
#warp {
width:200px;
margin:20px auto;
height:300px;
}
.menu_master {
border:1px solid #ccc;
padding:5px 10px;
margin-bottom:2px;
cursor:pointer;
font-weight:bold;
color:#666;
}
.menu_master img { vertical-align:middle; }
.sub_menu { display:none; }
.sub_menu ul, .sub_menu ul li {
margin:0;
padding:0;
list-style:none;
}
.sub_menu ul li a {
margin:0 0 3px 10px;
padding:3px 0 2px 25px;
background:url('arrow_001.gif') no-repeat 5px center;
display:block;
height:18px;
border-bottom:1px solid #eee;
color:#666;
text-decoration:none;
}
-->
</style>
<div id="warp">
<div class="menu_master" >
<img src="http://www.cncms.com/close.gif" alt="close" id="menu_master_0" /> php/MySQL
</div>
<div id="menu_sub_0" class="sub_menu">
<ul>
<li><a href="1" title="ASP教程">ASP教程</a></li>
<li><a href="2" title="ASP技巧">ASP技巧</a></li>
<li><a href="4" title="ASP实例">ASP实例</a></li>
</ul>
</div>
<div class="menu_master" >
<img src="http://www.cncms.com/close.gif" alt="close" id="menu_master_1" /> (X)HTML/CSS
</div>
<div id="menu_sub_1" class="sub_menu">
<ul>
<li><a href="http://www.codebit.cn/pub/html/xhtml_css/tutorial/" title="(X)HTML/CSS教程">(X)HTML/CSS教程</a></li>
<li><a href="http://www.codebit.cn/pub/html/xhtml_css/tip/" title="(X)HTML/CSS小技巧">(X)HTML/CSS小技巧</a></li>
</ul>
</div>
<div class="menu_master" >
<img src="http://www.cncms.com/close.gif" alt="close" id="menu_master_2" /> Ajax
</div>
<div id="menu_sub_2" class="sub_menu">
<ul>
<li><a href="http://www.codebit.cn/pub/html/ajax/tutorial/" title="Ajax教程">Ajax教程</a></li>
<li><a href="http://www.codebit.cn/pub/html/ajax/tip/" title="Ajax小技巧">Ajax小技巧</a></li>
</ul>
</div>
<div class="menu_master" >
<img src="http://www.cncms.com/close.gif" alt="close" id="menu_master_3" /> Javascript
</div>
<div id="menu_sub_3" class="sub_menu">
<ul>
<li><a href="http://www.codebit.cn/pub/html/javascript/tutorial/" title="Javascript教程">Javascript教程</a></li>
<li><a href="http://www.codebit.cn/pub/html/javascript/tip/" title="Javascript小技巧">Javascript小技巧</a></li>
</ul>
</div>
</div>
</body>
</html>
Tags：Javascript 制作 折叠式
编辑录入：爽爽 [复制链接] [打 印]
中查找“Javascript制作可折叠式导航菜单 - 栏目, 导航, menu, 菜单, 折叠, 伸缩(好用)”更多相关内容
中查找“Javascript制作可折叠式导航菜单 - 栏目, 导航, menu, 菜单, 折叠, 伸缩(好用)”更多相关内容
赞助商链接
