Tema: Ocultar y agrupar capas para un menu
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 09/11/2010, 06:23
javihb
 
Fecha de Ingreso: octubre-2004
Mensajes: 230
Antigüedad: 20 años, 4 meses
Puntos: 0
Ocultar y agrupar capas para un menu
Hola, vereis tengo que hacer un menu con capas ocultas y que al pulsar sobre algunos de los 4 enlaces principales se oculte y aparezca la capa que le corresponda.....bien, he hecho el código HTML y CSS de las 4 capas desplegadas que sería este código

Código: 
<!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=iso-8859-1" />
<title>Documento sin t&iacute;tulo</title>
<style type="text/css">
body {
	color:#262626;
	font-family:Arial,Helvetica,Sans-serif;
	font-size:1em;
	font-style:normal;
	font-variant:normal;
	font-weight:normal;
	line-height:normal;
	text-align:center;
}

a {
	color:#262626;
	text-decoration:none;
}

.clearboth{
	clear:both;

}

h1{
	color:#013365;
	font-size:1.2em;
	margin:0.2em 0.5em;
	padding:0;
}

h2{
	color:#013365;
	font-size:1em;
	margin:0;
	padding:0;
}

#menu_general{
	padding:0;
	margin:0 auto;
	text-align:left;
	width:982px;
	/*border:1px solid black;*/
}

#menu_general ul{
	list-style-type: none;
	margin:0;
	padding:0;
	/*border:1px solid black;
	float:left;
	width:100%;*/
}

#contenedor_listas{
	background:url("fondo_menu1.png") no-repeat scroll center top transparent;
	height:108px;
	width:978px;
}

#capa_puerto_de_culturas{
	font-size:0.8em;
}

#capa_puerto_de_culturas ul {
	display:block;
	height:4.5em;
	list-style-type:none;
	margin-left:2em;
	padding:0.9em 0.7em 0 0;
}

#capa_puerto_de_culturas ul li {
	float:left;
	margin-left:0.2em;
	margin-right:5em;
	padding-bottom:0.45em;
	padding-left:1.5em;
	width:16.9em;
	background-image: url(flecha_listados.png);
	background-repeat: no-repeat;
	background-position:0.5em 25%;
}


#capa_conocenos{
	font-size:0.8em;
}

#capa_conocenos ul{
	display:block;
	height:4.5em;
	list-style-type:none;
	margin-left:2em;
	padding:1.4em 0.7em 0 0;		
}

#capa_conocenos ul li{
	float:left;
	margin-left:0.2em;
	margin-right:5em;
	padding-bottom:0.45em;
	padding-left:1.5em;
	width:16.9em;
	background-image: url(flecha_listados.png);
	background-repeat: no-repeat;
	background-position:0.5em 25%;
}

#capa_rutas_actividades{
	font-size:0.8em;
}

#capa_rutas_actividades ul{
	display:block;
	height:4.5em;
	list-style-type:none;
	margin-left:2em;
	padding:1.4em 0.7em 0 0;	
}

#capa_rutas_actividades ul li{
	float:left;
	margin-left:0.2em;
	margin-right:5em;
	padding-bottom:0.45em;
	padding-left:1.5em;
	width:16.9em;
	background-image: url(flecha_listados.png);
	background-repeat: no-repeat;
	background-position:0.5em 25%;
}

#sub_menu_rutas_actividades{
	display:block;
	height:4.5em;
	list-style-type:none;
	margin-left:2em;
	padding:0.2em 0 0 0;
}

#capa_y_tambien{
	font-size:0.8em;
}

#capa_y_tambien ul{
	display:block;
	height:4.5em;
	list-style-type:none;
	margin-left:2em;
	padding:1.4em 0.7em 0 0;
}

#capa_y_tambien ul li{
	float:left;
	margin-left:0.2em;
	margin-right:5em;
	padding-bottom:0.45em;
	padding-left:1.5em;
	width:16.9em;
	background-image: url(flecha_listados.png);
	background-repeat: no-repeat;
	background-position:0.5em 25%;
}

#navlist{
	list-style-type: none;
	padding:5px;
	margin:0 auto;
}

#navlist li{
	display: block;
}

#subnavlist{
	list-style-type: none;
	padding:0;
	margin:5px 25px;
}

#subnavlist li{
	display: inline;
}

.menu_puerto_de_culturas{
	float:left;
}

.menu_conocenos{
	float:left;
}

.menu_rutas_actividades{
	float:left;
}

.menu_y_tambien{
	float:left;
}


</style>
</head>

<body>

<div id="menu_general">
	<ul>
	
			<li class="menu_puerto_de_culturas"><a href="#">
			<h1>Menu1</h1>
			</a>
				<div id="contenedor_listas">
					<div id="capa_puerto_de_culturas">
						<ul>
							<li><a href=""> Item 1 </a></li>
							<li><a href=""> Item 2</a> </li>
							<li><a href=""> Item 3</a> </li>
							<li><a href=""> Item 4</a></li>
							<li><a href=""> Item 5</a></li>
							<li><a href=""> Item 6</a></li>
							<li><a href=""> Item 7</a></li>
							<li><a href=""> Item 8</a></li>
							<li><a href=""> Item 9</a></li>
							<li><a href=""> Item 10</a></li>
							<li><a href="">Item 11</a></li>
						</ul>
					</div>
				</div>
			</li>
		
	
	
		<li class="menu_conocenos"><a href="#">
		<h1>Menu2</h1>
		</a>
			<div id="contenedor_listas">
				<div id="capa_conocenos">
					<ul>
						<li><a href=""> Item 1</a></li>
						<li><a href="#"> Item 2</a></li>
						<li><a href="#"> Item 3</a></li>
						<li><a href="#"> Item 4 </a></li>
						<li><a href="#"> Item 5</a></li>
						<li><a href="#"> Item 6</a></li>
						<li><a href="#"> Item 7</a></li>
						<li><a href="#"> Item 8</a></li>
						<li><a href="#"> Item 9</a></li>
					</ul>
				</div>
			</div>
		</li>
	
	
	
	
		<li class="menu_rutas_actividades"><a href="#">
		<h1>Menu3</h1>
		</a>
			<div id="contenedor_listas">
				<div id="capa_rutas_actividades">
					<ul>
						<li><a href="#"> Item 1</a></li>
						<li><a href="#"> Item 2</a></li>
						<li><a href="#"> Item 3</a></li>
						<li><a href="#"> Item 4</a></li>
						<li><a href="#"> Item 5</a></li>
						<li><a href="#"> Item 6</a></li>
					</ul>
				</div>
			</div>
		</li>
	


	
		<li class="menu_y_tambien"><a href="#">
		<h1>Menu4</h1>
		</a>
			<div id="contenedor_listas">
				<div id="capa_y_tambien">
					<ul>
						<li><a href="#"> Item 1</a></li>
						<li><a href="#"> Item 2</a></li>
						<li><a href="#"> Item 3</a></li>
						<li><a href="#"> Item 4</a></li>
						<li><a href="#"> Item 5</a></li>
						<li><a href="#"> Item 6</a></li>
						<li><a href="#"> Item 7</a></li>
					</ul>
				</div>
			</div>
		</li>
	
	
	</ul>
	
<div class="clearboth"></div>	
</div>
</body>
</html>
y en este otro trozo de código (sin css porque es el mismo que arriba) os pongo como se tendría que ver con las capas plegadas u ocultas o como se haga....me han dicho que se hace con javascript...pero en eso estoy muy flojo a ver si me podeis dar alguna pista de como hacerlo

Código: 
<!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=iso-8859-1" />
<title>Documento sin t&iacute;tulo</title>

</head>

<body>

<div id="menu_general">
	<ul>
	
			<li class="menu_puerto_de_culturas"><a href="#"><h1>Menu1</h1></a></li>
				<li class="menu_conocenos"><a href="#">
		<h1>Menu2</h1>
		</a></li>
		<li class="menu_rutas_actividades"><a href="#">
		<h1>Menu3</h1>
		</a></li>
		<li class="menu_y_tambien"><a href="#">
		<h1>Menu4</h1>
		</a></li>
				<div id="contenedor_listas">
					<div id="capa_puerto_de_culturas">
						<ul>
							<li><a href=""> Item 1 </a></li>
							<li><a href=""> Item 2</a> </li>
							<li><a href=""> Item 3</a> </li>
							<li><a href=""> Item 4</a></li>
							<li><a href=""> Item 5</a></li>
							<li><a href=""> Item 6</a></li>
							<li><a href=""> Item 7</a></li>
							<li><a href=""> Item 8</a></li>
							<li><a href=""> Item 9</a></li>
							<li><a href=""> Item 10</a></li>
							<li><a href="">Item 11</a></li>
						</ul>
					</div>
				</div>
				
			</li>
	</ul>
	
<div class="clearboth"></div>	
</div>
</body>
</html>
Bueno lo dicho a ver si me podeis ayudar.
Un saludo