js二級菜單

06-24

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>js導航菜單左側豎縱向二級導航菜單可點擊展開與收縮子菜單</title><meta name="description" content="用js製作一個js導航菜單，左側縱向二級導航菜單，滑鼠滑過當前選區高亮顯示二級菜單內容，帶點擊展開和收縮按鈕控制。內含js代碼下載。" /><style type="text/css">*{margin:0;padding:0;list-style-type:none;}body{font-family:5B8B4F53,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="展開"; }}</script></head><body> <div class="tjskl-sidebar"> <ul class="tj_submain"> <li class="title"><a href="http://www.jsfoot.com/">jsfoot 網頁特效</a></li> <li onMouseOut="do_list_row_unshow(this);" onMouseOver="do_list_row_show(this);"> <a href="http://www.jsfoot.com/jquery/">jquery 特效</a> <span> <a href="http://www.jsfoot.com/jquery/images/">jquery圖片特效</a> <a href="http://www.jsfoot.com/jquery/menu/">jquery導航菜單</a> <a href="http://www.jsfoot.com/jquery/xxk/">jquery選項卡特效</a> <a href="http://www.jsfoot.com/jquery/letter/">jquery文字特效</a> <a href="http://www.jsfoot.com/jquery/form/">jquery表單特效</a> <a href="http://www.jsfoot.com/jquery/table/">jquery表格特效</a> </span> </li> <li onMouseOut="do_list_row_unshow(this);" onMouseOver="do_list_row_show(this);"> <a href="http://www.jsfoot.com/js/">js特效</a> <span> <a href="http://www.jsfoot.com/js/images/">js圖片特效</a> <a href="http://www.jsfoot.com/js/menu/">js導航菜單</a> <a href="http://www.jsfoot.com/js/xxk/">js選項卡特效</a> <a href="http://www.jsfoot.com/js/letter/">js文字特效</a> <a href="http://www.jsfoot.com/js/form/">js表單特效</a> <a href="http://www.jsfoot.com/js/table/">js表格特效</a> </span> </li> <li onMouseOut="do_list_row_unshow(this);" onMouseOver="do_list_row_show(this);"> <a href="http://www.jsfoot.com/flash/">flash特效</a> <span> <a href="http://www.jsfoot.com/flash/images/">flash圖片特效</a> <a href="http://www.jsfoot.com/flash/menu/">flash導航菜單</a> <a href="http://www.jsfoot.com/flash/letter/">flash文字特效</a> </span> </li> <li onMouseOut="do_list_row_unshow(this);" onMouseOver="do_list_row_show(this);"> <a href="http://www.jsfoot.com/css3/">div+css教程</a> <span> <a href="http://www.jsfoot.com/css3/layout/">div+css布局</a> <a href="http://www.jsfoot.com/css3/menu/">div+css菜單</a> <a href="http://www.jsfoot.com/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.jsfoot.com/html5/">html5教程</a> <span> <a href="http://www.jsfoot.com/html5/tx/">html5特效</a> <a href="http://www.jsfoot.com/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">展開</a></li> </ul> </div> </body></html>
推薦閱讀：

TAG:菜單 |