Menu desplegable html y css sin JavaScript
En este post crearemos un menu desplegable con html y Css.Un menu desplegable con html no es mas que el uso de listas una dentro de otras
osea listas anidadas y es el css el que da el efecto de menu desplegable.
Css.-Es un lenguaje usado para web que crea y da estilo a las fuentes, listas ,encabezados etc ...
Este ejemplo lo he hecho con colores vistosos para su mejor compresión.
Aqui un ejemplo de listas anidadas en html sin css .
Su codigo en html seria el siguiente:
<body>
<div id="contenedor">
<ul class="menu">
<li><a href="apart">Apartado A </a> </li> <!--primer nivel-->
<li><a href="apre"> Apartado B </a> <!--primer nivel-->
<ul>
<li> <a href="primero"> Primero </a> </li><!--Segundo nivel-->
<li><a href="segundo">Segundo </a></li>
<li><a href="tercero"> Tercero </a>
<ul>
<li> <a href="cuarto">Cuarto </a> </li><!--tercer nivel-->
<li><a href="quinto">Quinto </a></li>
<li><a href="sexto">Sexto </a>
<ul>
<li> <a href="Septimo">Septimo </a> </li><!--cuarto nivel-->
<li><a href="Octavo">Octavo </a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li> <a href="apartadoc">Apartado C </a></li><!--primer nivel-->
<li> <a href="apartadod">Apartado D </a>
<ul>
<li> <a href="f">despues </a> </li>
<li> <a href="r"> entrada </a></li>
<li> <a href="f"> salida </a> </li>
</ul>
</li>
<li> <a href="apartadoe"> Apartado E </a> </li>
</ul>
</div>
</body>
Como vemos el codigo de arriba hay un <div> tambien tenemos <ul class="menu"> esto lo usaremos en el codigo Css tambien cabe destacar que el codigo esta comentado y vemos primer ,segundo tercer y cuarto nivel nos enfocaremos en estos niveles para programar nuestro Css.
La hoja de estilo o Css se puede hacerse separado en otro documento y guardarlos con la extension Css o en el mismo html en el head dentro de la etiqueta <Style>
Este seria nuestro codigo Css:
*{
list-style:none;/*Aqui digo que para todas las listas no se muestren viñetas ni decoracion*/
margin:0px;
text-decoration:none;
}
#contenedor{
text-align:center;
margin:50px;
background-color:blue;
border-radius:15px;
box-shadow: 12px 12px 3px #888888;
}
.menu{
font-family:Comic Sans MS;
display:inline-block;
}
/*Primer Nivel------------------------------------------------------------------------------*/
.menu li{
float:left; /*para que todos los menus del primer nivel
se vean en horizontal*/
box-shadow:0px 0px 1px 0px;
}
.menu li a{ /*para que todas las cajas con etiqueta "a"
ya sean de (1,2,3,4 nivel)tengan un alto y un ancho */
background-color:green;
color:white;
width:200px;
height:40px;
display:block;
}
.menu li a:hover{ /*para cuando pase el mouse por la etiqueta
"a" cambie de color la caja*/
background-color:yellow;
color:red;
}
/*Segundo nivel-----------------------------------------------------------------------------*/
.menu li ul{
visibility:hidden;/* Aqui para que todos los submenus osea (segundo tercer y cuarto
nivel) esten ocultos */
position:absolute;/* Aqui para que todos los submenus no ocupen todo el ancho y alto del contenedor */
padding:0px;
}
.menu li:hover >ul{
visibility:visible; /*para cuando pase el mouse por los "ul" se vean todos los
submenus*/
}
.menu li ul
li {
float:none;
/*para que el menu del segundo nivel se abra en vertical*/
}
/*Tercer
nivel-----------------------------------------------------------------------------*/
.menu li ul
li ul {
right:-200px;/*para que el menu del tercer nivel se desplegue a la derecha*/
top:80px; /*Esto es para que la caja no se vea abajo acuerdense que la
caja tiene de alto 40px por eso ponemos 80px*/
}
/*Cuarto nivel*-----------------------------------------------------------------------------*/
.menu li ul
li ul li ul {
top:80px;
left:-200px;/*para que se desplegue a la izquierda*/
right:200px;/*para que no se vea la caja por que el de arriba le afecta*/
}
Y este seria nuestro resultado html y Css
 |
| Menu desplegable |
El codigo completo seria :
<!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=utf-8" />
<title>Menu</title>
<style type="text/css">
*{
list-style:none;/*Aqui digo que para todas las listas no se muestren viñetas ni decoracion*/
margin:0px;
text-decoration:none;
}
#contenedor{
text-align:center;
margin:50px;
background-color:blue;
border-radius:15px;
box-shadow: 12px 12px 3px #888888;
}
.menu{
font-family:Comic Sans MS;
display:inline-block;
}
/*Primer Nivel------------------------------------------------------------------------------*/
.menu li{
float:left; /*para que todos los menus del primer nivel
se vean en horizontal*/
box-shadow:0px 0px 1px 0px;
}
.menu li a{ /*para que todas las cajas con etiqueta "a"
ya sean de (1,2,3,4 nivel)tengan un alto y un ancho */
background-color:green;
color:white;
width:200px;
height:40px;
display:block;
}
.menu li a:hover{ /*para cuando pase el mouse por la etiqueta
"a" cambie de color la caja*/
background-color:yellow;
color:red;
}
/*Segundo nivel-----------------------------------------------------------------------------*/
.menu li ul{
visibility:hidden;/* Aqui para que todos los submenus osea (segundo tercer y cuarto
nivel) esten ocultos */
position:absolute;/* Aqui para que todos los submenus no ocupen todo el ancho y alto del contenedor */
padding:0px;
}
.menu li:hover >ul{
visibility:visible; /*para cuando pase el mouse por los "ul" se vean todos los
submenus*/
}
.menu li ul
li {
float:none;
/*para que el menu de segundo nivel se abra en vertical*/
}
/*Tercer
nivel-----------------------------------------------------------------------------*/
.menu li ul
li ul {
right:-200px;/*para que el menu del tercer nivel se desplegue a la derecha*/
top:80px; /*Esto es para que la caja no se vea abajo acuerdense que la
caja tiene de alto 40px por eso ponemos 80px*/
}
/*Cuarto nivel*-----------------------------------------------------------------------------*/
.menu li ul
li ul li ul {
top:80px;
left:-200px;/*para que se desplegue a la izquierda*/
right:200px;/*para que no se vea la caja por que el de arriba le afecta*/
}
</style>
</head>
<body>
<div id="contenedor">
<ul class="menu">
<li><a href="apart">Apartado A </a> </li> <!--primer nivel-->
<li><a href="apre"> Apartado B </a> <!--primer nivel-->
<ul>
<li> <a href="primero"> Primero </a> </li><!--Segundo nivel-->
<li><a href="segundo">Segundo </a></li>
<li><a href="tercero"> Tercero </a>
<ul>
<li> <a href="cuarto">Cuarto </a> </li><!--tercer nivel-->
<li><a href="quinto">Quinto </a></li>
<li><a href="sexto">Sexto </a>
<ul>
<li> <a href="Septimo">Septimo </a> </li><!--cuarto nivel-->
<li><a href="Octavo">Octavo </a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li> <a href="apartadoc">Apartado C </a></li><!--primer nivel-->
<li> <a href="apartadod">Apartado D </a>
<ul>
<li> <a href="f">despues </a> </li>
<li> <a href="r"> entrada </a></li>
<li> <a href="f"> salida </a> </li>
</ul>
</li>
<li> <a href="apartadoe"> Apartado E </a> </li>
</ul>
</div>
</body>
</html>
Bueno espero que les sea de ayuda y empiecen a jugar con el Css este código se puede mejorar esto es solo un ejemplo de como usar Css
