Tree menus in JavaScript and css/html -
i'm using tree menu javascript. i'd category link in menu remain open after click link , load linked page.
want improve code because when load page or refresh it, can see categories open , close , don't want see this.
css menu:
/*css del menu*/ div#nav{width:230px;background: #00005a;font: 14px arial, helvetica, sans-serif} div#nav h3{font-size: 100%;margin: 0;padding: 4px 10px; border-top: 1px solid #fff;color: #000;background-color: #7ba5e7} div#nav ul,div#nav li{margin: 0;padding: 0;list-style-type: none} div#nav a{display: block;padding-left: 15px;height: 18px;line-height: 18px; border-top: 1px solid #fff;background-color: #bdbdbd;color: #000; text-decoration: none;font-weight: bold} div#nav a:hover{color: #00005a;background-color: #0099ff} div#nav ul ul a{color: #333; background-color: #aecdff;font-weight: normal} css javascript
div.jsenable h3{cursor: pointer} div.jsenable ul ul{display:none} div#nav li.hide ul{display:none} div#nav li.show ul{display:block} div#nav li.show h3{background-color: #ff0} file javascript
/*javascript per menu espandibile*/ window.onload=function(){ if(document.getelementsbytagname && document.getelementbyid){ document.getelementbyid("nav").classname="jsenable"; buildlist(); } } function buildlist(){ var hs=document.getelementbyid("nav").getelementsbytagname("h3"); for(var i=0;i<hs.length;i++){ hs[i].onclick=function(){ this.parentnode.classname=(this.parentnode.classname=="show") ? "hide" : "show"; } } } i'll attach .rar. i'm testing in local , snippet doesn't work https://www.mediafire.com/?xnzykrm8x8r51p1
and should result:
http://i.stack.imgur.com/bjqkh.png
p.s: there's problem height. if open categories, menu overflow column , don't know why.
/*javascript per menu espandibile*/ window.onload=function(){ if(document.getelementsbytagname && document.getelementbyid){ document.getelementbyid("nav").classname="jsenable"; buildlist(); } } function buildlist(){ var hs=document.getelementbyid("nav").getelementsbytagname("h3"); for(var i=0;i<hs.length;i++){ hs[i].onclick=function(){ this.parentnode.classname=(this.parentnode.classname=="show") ? "hide" : "show"; } } }html{ margin:0; padding:0; } body { color:#000; text-align:justify; } .wrap_all{ width:1024px; margin:0px auto; padding:10px; border:1px solid #444444; } .banner{ padding:10px; border:1px solid #444444; } .nav_main{ padding:10px; border:1px solid #444444; } .nav_main ul li{ display:inline-block; } .content{ float:center; padding:10px; border:1px solid #444444; } .footer{ clear: both; padding:10px; border:1px solid #444444; } .left{ height:100%; padding:10px; border:1px solid #444444; float: left; } .center{ height:100%; padding:10px; border:1px solid #444444; } .navig a:link,.navig a:active,.navig a:visited { text-decoration:none; display:block; text-align:center; background-color:#6a875b; width:100%; font-size:11px; color:#000; margin-bottom:2px; padding-bottom:2px; padding-top:2px; font-family:georgia; } /*css del menu*/ div#nav{width:230px;background: #00005a;font: 14px arial, helvetica, sans-serif} div#nav h3{font-size: 100%;margin: 0;padding: 4px 10px; border-top: 1px solid #fff;color: #000;background-color: #7ba5e7} div#nav ul,div#nav li{margin: 0;padding: 0;list-style-type: none} div#nav a{display: block;padding-left: 15px;height: 18px;line-height: 18px; border-top: 1px solid #fff;background-color: #bdbdbd;color: #000; text-decoration: none;font-weight: bold} div#nav a:hover{color: #00005a;background-color: #0099ff} div#nav ul ul a{color: #333; background-color: #aecdff;font-weight: normal} /*css essenziale se javascript è abilitato*/ div.jsenable h3{cursor: pointer} div.jsenable ul ul{display:none} div#nav li.hide ul{display:none} div#nav li.show ul{display:block} div#nav li.show h3{background-color: #ff0}<html> <head> <title>full metal panic italy</title> <link rel="stylesheet" type="text/css" href="template/style.css"> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="config/jsmenu.css"> <link rel="stylesheet" type="text/css" href="config/menu.css"> <script type="text/javascript" src="config/expand.js"></script> <style type="text/css"> html{ margin:0; padding:0; } body { color:#000; text-align:justify; } .wrap_all{ width:1024px; margin:0px auto; padding:10px; border:1px solid #444444; } .banner{ padding:10px; border:1px solid #444444; } .nav_main{ padding:10px; border:1px solid #444444; } .nav_main ul li{ display:inline-block; } .content{ float:center; padding:10px; border:1px solid #444444; } .footer{ clear: both; padding:10px; border:1px solid #444444; } .left{ height:100%; padding:10px; border:1px solid #444444; float: left; } .center{ height:100%; padding:10px; border:1px solid #444444; } .navig a:link,.navig a:active,.navig a:visited { text-decoration:none; display:block; text-align:center; background-color:#6a875b; width:100%; font-size:11px; color:#000; margin-bottom:2px; padding-bottom:2px; padding-top:2px; font-family:georgia; } /*css del menu*/ div#nav{width:230px;background: #00005a;font: 14px arial, helvetica, sans-serif} div#nav h3{font-size: 100%;margin: 0;padding: 4px 10px; border-top: 1px solid #fff;color: #000;background-color: #7ba5e7} div#nav ul,div#nav li{margin: 0;padding: 0;list-style-type: none} div#nav a{display: block;padding-left: 15px;height: 18px;line-height: 18px; border-top: 1px solid #fff;background-color: #bdbdbd;color: #000; text-decoration: none;font-weight: bold} div#nav a:hover{color: #00005a;background-color: #0099ff} div#nav ul ul a{color: #333; background-color: #aecdff;font-weight: normal} /*css essenziale se javascript è abilitato*/ div.jsenable h3{cursor: pointer} div.jsenable ul ul{display:none} div#nav li.hide ul{display:none} div#nav li.show ul{display:block} div#nav li.show h3{background-color: #ff0} li {list-style:none;} </style> </head> <body> <div class="wrap_all"> <div class="banner"><h3>questo è il banner</h3></div> <div class="nav_main"> <ul align="center"> <li><a href="../index.php?page=home">home</a></li> <li><a href="../index.php?page=tutorial">tutorial</a></li> <li><a href="../index.php?page=html">html</a></li> <li><a href="../index.php?page=contatti">contatti</a></li> </ul> </div> <div class="content"> <div class="left"><div id="nav"> <ul> <li><h3>storia</h3> <ul> <?php isset($_get["page"]) ? $page=$_get["page"] : $page="home"; $links=array( "fmp_trama" => "full metal panic!", "fumoffu_trama" => "full metal panic? fumoffu", "fmptsr" => "full metal panic! tsr", "riassunti" => "riassunti episodi", "manga" => "manga", "listamanga" => "lista manga", "lnrecensione" => "romanzo", "romanzi" => "lista romanzi", "sigma" => "sigma", "overload" => "overload", "comicmission" => "comic mission", "another" => "another", "sdnefd" => "sdned", "zero" => "zero", "riassunti_manga" => "riassunti manga", "riassuntiromanzi" => "riassunti romanzi" ); foreach($links $href=>$text){ if($page!=$links){ echo '<a href="?page='.$href.'">'.$text.'</a>'; }else{echo $text;} } ?> </ul> </li> <li><h3>spoiler</h3> <ul> <?php isset($_get["page"]) ? $page=$_get["page"] : $page="home"; $links=array( "infanziasousuke" => "infanzia di sousuke", "infanziatessa" => "infanzia di tessa", "infanziakurz" => "infanzia di kurz", "lemon" => "michel lemon", "origini" => "le origini", "finemithril" => "fine della mirthril", "yamsuk11" => "yamsuk 11" ); foreach($links $href=>$text){ if($page!=$links){ echo '<a href="?page='.$href.'">'.$text.'</a>'; }else{echo $text;} } ?> </ul> </li> <li><h3>gallery</h3> <ul> <?php isset($_get["page"]) ? $page=$_get["page"] : $page="home"; $links=array( "fanart" => "fanart", "wallpapers" => "wallpapers", "animated" => "animated", "avatars" => "avatar", "cosplay" => "cosplay" ); foreach($links $href=>$text){ if($page!=$links){ echo '<a href="?page='.$href.'">'.$text.'</a>'; }else{echo $text;} } ?> </ul> </li> <li><h3>interviste</h3> <ul> <?php isset($_get["page"]) ? $page=$_get["page"] : $page="home"; $links=array( "perla" => "perla liberatori", "lapenna" => "leslie la penna", "intervistavalerio" => "valerio manenti | j-pop" ); foreach($links $href=>$text){ if($page!=$links){ echo '<a href="?page='.$href.'">'.$text.'</a>'; }else{echo $text;} } ?> </ul> </li> <li><h3>other</h3> <ul> <?php isset($_get["page"]) ? $page=$_get["page"] : $page="home"; $links=array( "faq" => "f.a.q. e curiosità", "episodi" => "titoli episodi", "mithril" => "mithril", "merida" => "isola merida", "terroristi" => "terroristi", "personaggi" => "personaggi", "whispered" => "whispered", "bt" => "black tecnology", "mech" => "arm slave", "tdd" => "tuatha de danaan", "palladio" => "palladio", "armi" => "armi", "lambdadriver" => "lambda driver", "gatoh" => "shouji gatoh", "shikidouji" => "shiki douji", "doppiaggio_ita" => "doppiaggio italiano", "doppiaggio" => "doppiaggio", "frasi" => "frasi celebri", "doms" => "d.o.m.s", "luoghi" => "luoghi", "sicilia" => "viaggio canicatti", "tateo" => "retsu tateo", "filmvsanime" => "film vs anime" ); foreach($links $href=>$text){ if($page!=$links){ echo '<a href="?page='.$href.'">'.$text.'</a>'; }else{echo $text;} } ?> </ul> </li> <li><h3>multimedia</h3> <ul> <?php isset($_get["page"]) ? $page=$_get["page"] : $page="home"; $links=array( "soundtrack" => "soundtrack", "testi" => "lyric", "midi" => "videosigle", "trailers" => "trailers", "music_video" => "music video", "winamp" => "skin winamp", "nsliveaction" => "nostro live action", "dvd_vhs" => "dvd/vhs", "shimokawa" => "mikuni shimokawa", "sahashi" => "toshihiko sahashi", "chrome" => "tema google chrome", "firefoz" => "tema firefox", "app" => "app smartphone" ); foreach($links $href=>$text){ if($page!=$links){ echo '<a href="?page='.$href.'">'.$text.'</a>'; }else{echo $text;} } ?> </ul> </li> </ul> </div> </div> <div class="center"> <?php include("$page.php") ?> </div> </div> <div class="footer"><p>tutti diritti sono riservati</p></div> </div> </body> </html>
Comments
Post a Comment