|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www./1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>js導(dǎo)航菜單左側(cè)豎縱向二級(jí)導(dǎo)航菜單可點(diǎn)擊展開(kāi)與收縮子菜單</title> <meta name="description" content="用js制作一個(gè)js導(dǎo)航菜單，左側(cè)縱向二級(jí)導(dǎo)航菜單,，鼠標(biāo)滑過(guò)當(dāng)前選區(qū)高亮顯示二級(jí)菜單內(nèi)容，帶點(diǎn)擊展開(kāi)和收縮按鈕控制,。內(nèi)含js代碼下載。" /> <style type="text/css"> *{margin:0;padding:0;list-style-type:none;} body{font-family:\5B8B\4F53,Arial Narrow,arial,serif;background:#FFFFFF;color:#000;font-size:12px;line-height:20px;text-align:left;} a{color:#03c;text-decoration:none;} a:hover{color:#f60;text-decoration:none;} /* tjskl-sidebar */ .tjskl-sidebar{width:183px;margin:100px auto;} .tjskl-sidebar #submain_hidden{border-top:0;display:none;} .tjskl-sidebar .bsb{border-bottom:1px solid #c8d2e5;border-top:0;} /* tj_submain */ .tj_submain{border:1px solid #c8d2e5;border-bottom:0;width:181px;font-weight:normal;} .tj_submain .title{background:url("images/bg_01.gif") repeat-x 0 -38px;height:24px;line-height:24px;font-size:12px;font-weight:bold;width:161px;padding-left:20px;} .tj_submain li{width:181px;height:30px;border-bottom:1px solid #E7F3FF;position:relative;} .tj_submain li a{width:141px;display:inline-block;padding:0 20px;height:30px;line-height:30px;} .tj_submain li a.on{background:url("images/bg_01.gif") no-repeat scroll 0 -9px;border-top:1px solid #FFC83D;width:161px;height:29px;line-height:29px;padding:0px 0px 0px 20px;position:relative;z-index:90;} .tj_submain span{position:absolute;top:0;left:180px;z-index:1;background-color:#FFFAE2;border:#FFC83D solid 1px;display:none;} .tj_submain span a{display:block;height:26px;line-height:26px;} .tj_submain span a:hover{background:#FFFAE2;background:#ebf0f5;text-decoration:none;} .tj_submain ul li{float:left;margin-right:10px;display:inline;} .tj_submain ul li span a{text-decoration:none;} .tj_submain ul li span a:hover{color:#f60;} .tj_submain #more_submenu a{background:url("images/subh_bg.gif") no-repeat;text-align:right;display:block;width:125px;padding-right:19px;cursor:pointer;} .tj_submain #more_submenu a.show{background-position:100% 2px;} .tj_submain #more_submenu a.less{background-position:100% -25px;} </style> <script type="text/javascript"> function do_list_row_show(strid){ strid.getElementsByTagName('a')[0].className='on'; strid.getElementsByTagName('span')[0].style.display="block"; strid.style.position="relative"; } function do_list_row_unshow(strid){ strid.getElementsByTagName('a')[0].className=''; strid.getElementsByTagName('span')[0].style.display=""; strid.style.position=""; } submenu = function(box,div){ var div_classname = document.getElementById(div).getElementsByTagName('a')[0]; if(div_classname.className=='show'){ with(document.getElementById(box).style){ height='auto';display='block'; } div_classname.className='less';div_classname.innerHTML='收縮'; }else{ with(document.getElementById(box).style){ height='0';display='none'; } div_classname.className='show';div_classname.innerHTML='展開(kāi)'; } } </script> </head> <body> <div class="tjskl-sidebar"> <ul class="tj_submain"> <li class="title"><a href="http://www./">jsfoot 網(wǎng)頁(yè)特效</a></li> <li onMouseOut="do_list_row_unshow(this);" onMouseOver="do_list_row_show(this);"> <a href="http://www./jquery/">jquery 特效</a> <span> <a href="http://www./jquery/images/">jquery圖片特效</a> <a href="http://www./jquery/menu/">jquery導(dǎo)航菜單</a> <a href="http://www./jquery/xxk/">jquery選項(xiàng)卡特效</a> <a href="http://www./jquery/letter/">jquery文字特效</a> <a href="http://www./jquery/form/">jquery表單特效</a> <a href="http://www./jquery/table/">jquery表格特效</a> </span> </li> <li onMouseOut="do_list_row_unshow(this);" onMouseOver="do_list_row_show(this);"> <a href="http://www./js/">js特效</a> <span> <a href="http://www./js/images/">js圖片特效</a> <a href="http://www./js/menu/">js導(dǎo)航菜單</a> <a href="http://www./js/xxk/">js選項(xiàng)卡特效</a> <a href="http://www./js/letter/">js文字特效</a> <a href="http://www./js/form/">js表單特效</a> <a href="http://www./js/table/">js表格特效</a> </span> </li> <li onMouseOut="do_list_row_unshow(this);" onMouseOver="do_list_row_show(this);"> <a href="http://www./flash/">flash特效</a> <span> <a href="http://www./flash/images/">flash圖片特效</a> <a href="http://www./flash/menu/">flash導(dǎo)航菜單</a> <a href="http://www./flash/letter/">flash文字特效</a> </span> </li> <li onMouseOut="do_list_row_unshow(this);" onMouseOver="do_list_row_show(this);"> <a href="http://www./css3/">div+css教程</a> <span> <a href="http://www./css3/layout/">div+css布局</a> <a href="http://www./css3/menu/">div+css菜單</a> <a href="http://www./css3/css3/">css3教程</a> </span> </li> </ul> <ul class="tj_submain" id="submain_hidden"> <li onMouseOut="do_list_row_unshow(this);" onMouseOver="do_list_row_show(this);"> <a href="http://www./html5/">html5教程</a> <span> <a href="http://www./html5/tx/">html5特效</a> <a href="http://www./html5/tb/">html5圖表</a> </span> </li> </ul> <ul class="tj_submain bsb"> <li id="more_submenu"><a onClick="submenu('submain_hidden','more_submenu'); return false;" class="show">展開(kāi)</a></li> </ul> </div><!--tjskl-sidebar end--> </body> </html> |
|
|
來(lái)自： ccqi_哈哈 > 《菜鳥(niǎo)的問(wèn)題集》
