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
2 comentarios:
me gusto tu estilo de menús horizontales... después de buscar muchos el tuyo fue el que mas me gusto por lo fácil... mis felicitaciones.
Gracias, muy didactico sin tantas dudas.
Publicar un comentario