JavaScript和css / html中的树菜单

时间：2014-09-24 08:49:22

标签： javascript html css treeview

我正在使用带有JavaScript的树状菜单。我点击链接并加载链接页面后，我希望菜单中的类别链接保持打开状态 我还想改进代码，因为当我加载页面或刷新它时，我可以看到所有类别打开并立即关闭，我不想看到这个。

css菜单：

/*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}

用于javascript的CSS 

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}

档案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";
        }
    }
}

我会附上.rar。我在本地进行测试，并且使用代码片段进行测试并不起作用 https://www.mediafire.com/?xnzykrm8x8r51p1

这应该是结果：

http://i.stack.imgur.com/bjqkh.png

p.s：身高也存在问题。如果您打开所有类别，菜单将从列溢出，我不知道原因。

＆＃13;
＆＃13; 
/*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";
        }
    }
}
＆＃13; 
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}
＆＃13; 
<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 as $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 as $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 as $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 as $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 a Canicatti",
					"tateo" => "Retsu Tateo",
					"filmvsanime" => "Film Vs Anime"
					);
				foreach($links as $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 as $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 i diritti sono riservati</p></div>
		</div>
</body>
</html>
＆＃13;
＆＃13;
＆＃13;

0 个答案:

没有答案
相关问题
最新问题