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