Foros del Web » Creando para Internet » CSS »

Personalizar menu vertical...

Estas en el tema de Personalizar menu vertical... en el foro de CSS en Foros del Web. Buenas compañeros, Estoy intentando personalizar un menu vertical... pero no consigo lo que quiero... El efecto final que busco es un menu vertical que tenga ...
  #1 (permalink)  
Antiguo 26/05/2008, 16:59
Avatar de neodani  
Fecha de Ingreso: marzo-2007
Mensajes: 1.811
Antigüedad: 10 años, 9 meses
Puntos: 20
Personalizar menu vertical...

Buenas compañeros,

Estoy intentando personalizar un menu vertical... pero no consigo lo que quiero...

El efecto final que busco es un menu vertical que tenga por ejemplo 5 categorias y que alguna de esas tenga subcategorias y que a su vez alguna de esas tenga sub-subcategorias.

Pero no me interesa que queden abiertas dos categorias de primer nivel... Es decir que solo puede haber una categoria de primer nivel abierta.

Me explico... como mucho habrá 3 niveles.

categoria1
categoria2
categoria3
categoria4
categoria5

Pulsas en categoria2 y se desplega:
categoria1
categoria2
categoria2.1
categoria2.2
categoria2.3

categoria3
categoria4
categoria5

Pulsas en categoria2.2 y se desplega otra sublista:
categoria1
categoria2

categoria2.1
categoria2.2
categoria2.2.1
categoria2.2.2

categoria2.3

categoria3
categoria4
categoria5

Un ejemplo de lo que digo lo podéis ver en www.paddypower.com el menu de la izquierda de deportes.

Lo más parecido que he encontrado buscando en muchas páginas de ejemplos de menus es esto!


Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Vertical expanding menu in CSS</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<script type="text/javascript">
<!--
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
	for (var i = 1; i<=10; i++) {
		if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
	}
if (d) {d.style.display='block';}
}
//-->
</script>


<style type="text/css">
<!-- 
/* CSS issu des tutoriels www.alsacreations.com/articles */
body {
margin: 0;
padding: 0;
background: white;
font: 80% verdana, arial, sans-serif;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
position: absolute;
top: 0;
left: 0;
}
dl#menu {
width: 15em;
}
dl#menu dt {
cursor: pointer;
margin: 2px 0;;
height: 20px;
line-height: 20px;
text-align: center;
font-weight: bold;
border: 1px solid gray;
background: #9EC5E5 ;
}
dl#menu dd {
border: 1px solid gray;
}
dl#menu li {
text-align: center;
background: #fff;
}
dl#menu li a, dl#menu dt a {
color: #000;
text-decoration: none;
display: block;
border: 0 none;
height: 100%;
}

dl#menu li a:hover, dl#menu dt a:hover {
background: yellow ;
}

#mentions {
font-family: verdana, arial, sans-serif;
position: absolute;
bottom : 200px;
left : 10px;
color: #000;
background-color: #FFDFB2;
}
#mentions a {text-decoration: none;
color: #222;
}
#mentions a:hover{text-decoration: underline;
}

-->
</style>
</head>

<body>

<dl id="menu">

		<dt onclick="javascript:montre();"><a href="#">Menu 1</a></dt>
			
		<dt onclick="javascript:montre('smenu2');">Menu 2</dt>
			<dd id="smenu2">
				<ul>
					<li><a href="#">Sous-Menu 2.1</a></li>
					<li><a href="#">Sous-Menu 2.2</a></li>

					<li><a href="#">Sous-Menu 2.3</a></li>
				</ul>
			</dd>	

		<dt onclick="javascript:montre('smenu3');">Menu 3</dt>
			<dd id="smenu3">
				<ul>
					<li><a href="#">Sous-Menu 3.1</a></li>
					<li><a href="#">Sous-Menu 3.1</a></li>
					<li><a href="#">Sous-Menu 3.1</a></li>
					<li><a href="#">Sous-Menu 3.1</a></li>
					<li><a href="#">Sous-Menu 3.1</a></li>
					<li><a href="#">Sous-Menu 3.1</a></li>
				</ul>
			</dd>

		<dt onclick="javascript:montre('smenu4');">Menu 4</dt>
			<dd id="smenu4">
				<ul>
					<li><a href="#">Sous-Menu 4.1</a></li>
					<li><a href="#">Sous-Menu 4.1</a></li>
				</ul>
			</dd>

</dl>

</body>
</html> 
Pero solo tiene 2 niveles y no se añadirle el 3r nivel.

Acepto propuestas si conocéis alguno de este tipo os lo agradecería. Porque he intentado sacar el de la página anterior pero no veo por donde pillarlo...

Gracias de antemano
  #2 (permalink)  
Antiguo 27/05/2008, 12:47
Avatar de neodani  
Fecha de Ingreso: marzo-2007
Mensajes: 1.811
Antigüedad: 10 años, 9 meses
Puntos: 20
Respuesta: Personalizar menu vertical...

Nadie me puede indicar otras paginas que utilicen un menu similar? o ayudarme a retocar el propuesto en el primer post?

Desconozco si hay alguna libreria en js ya montada... tipo mootols que lo haga...

Gracias de antemano
  #3 (permalink)  
Antiguo 27/05/2008, 16:50
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Personalizar menu vertical...

Con mootools puedes mirar algo como el acordeón vertical, que te puede servir porque cada vez que muestra una opción desplegada oculta las demás.

http://demos.mootools.net/Accordion

Mikel.
  #4 (permalink)  
Antiguo 28/05/2008, 00:33
Avatar de neodani  
Fecha de Ingreso: marzo-2007
Mensajes: 1.811
Antigüedad: 10 años, 9 meses
Puntos: 20
Respuesta: Personalizar menu vertical...

Cita:
Iniciado por Mikmoro Ver Mensaje
Con mootools puedes mirar algo como el acordeón vertical, que te puede servir porque cada vez que muestra una opción desplegada oculta las demás.

http://demos.mootools.net/Accordion

Mikel.
Uff veo difícil la adaptación de eso en un menu lateral con 3 niveles de "acordeon"
  #5 (permalink)  
Antiguo 28/05/2008, 01:15
 
Fecha de Ingreso: mayo-2008
Mensajes: 9
Antigüedad: 9 años, 6 meses
Puntos: 0
Respuesta: Personalizar menu vertical...

la verdad yo prefiero Jquery para ese tipo de menus.

http://www.dynamicdrive.com/dynamicindex17/ddaccordionmenu.htm

o algo mas simple como :

http://www.dynamicdrive.com/dynamicindex1/switchmenu.htm

Saludos
  #6 (permalink)  
Antiguo 29/05/2008, 01:06
Avatar de neodani  
Fecha de Ingreso: marzo-2007
Mensajes: 1.811
Antigüedad: 10 años, 9 meses
Puntos: 20
Respuesta: Personalizar menu vertical...

Cita:
Iniciado por LockeAG Ver Mensaje
la verdad yo prefiero Jquery para ese tipo de menus.

http://www.dynamicdrive.com/dynamici...ordionmenu.htm

o algo mas simple como :

http://www.dynamicdrive.com/dynamici...switchmenu.htm

Saludos
Estan chulos, pero se pueden adaptar para que dentro de una categoria aparezca otra subcategoria desplegable¿?
  #7 (permalink)  
Antiguo 29/05/2008, 11:08
 
Fecha de Ingreso: agosto-2007
Ubicación: Puerto Rico
Mensajes: 48
Antigüedad: 10 años, 3 meses
Puntos: 0
Respuesta: Personalizar menu vertical...

bueno creo q lo usare en uno de mis web un poco mas personalizado
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 19:31.