Curso | HTML, CSS, JQuery | Varias

Menú desplegable para tu web

Por

En entradas anteriores veíamos como podíamos crear un menú sencillo para nuestra web, en este caso vamos a crear un menú desplegable para nuestro sitio web.

Un menú desplegable es aquel que al situarnos encima de alguna opción del menú salen más opciones de este menú o bien hacia abajo o bien hacia un lado, en este caso vamos a hacer que al situarnos en una opción del menú salgan el resto de opciones (o submenu) hacia abajo.

Lo primero que vamos a hacer es crearnos nuestro menú mediante una lista desordenada e indicarle las opciones del menú que tendrán un «submenu», para hacer esto dentro de la opción del menú volvemos a crear una lista desordenada, pudiendo quedar de la siguiente forma:

<ul class="menu">
    <li> <a href="index.html" >Inicio</a></li>
    <li> <a href="acercade.html">Acerca de</a>
        <ul>
        	<li> <a href="historia.html">Historia</a></li>
            <li> <a href="trabajos.html">Trabajos</a></li>
            <li> <a href="sede.html">Sede</a></li>
        </ul> 
    </li>
    <li> <a href="contacto.html" >Contacto</a>
    	<ul>
        	<li> <a href="telefono.html">Telefono</a></li>
            <li> <a href="correo.html">Correo</a></li>
            <li> <a href="oficinas.html">Oficinas</a></li>
        </ul> 
    </li>
</ul>

A continuación vamos a poner el estilo para que nuestro menú tenga un aspecto similar al siguiente:

menu sencillo desplegable

Como vimos en las entradas anteriores tendremos que añadir el código CSS necesario para que nos ponga la lista en una línea, nos quite los puntos de la lista y todas las opciones tengan el mismo tamaño, quitar los margenes, que al situarnos en una opción cambie de color, etc.. pudiendo ser un código similar al siguiente:

.menu{
    list-style:none;
	padding:0px;
	margin:0px;
}
.menu li{
	margin:0px;
	padding:0px;
	float:left;
	position:relative;
	box-shadow: 2px 2px 4px 1px #000;	
}
.menu li a{
	display: block;
	width: 100px;
	height: 30px;
	padding: 6px;
	line-height:30px;
	text-decoration: none;
	text-align: center;
	color: #FFF;
	background-color: #063;
	position: relative;
	border-left: 2px solid #333;
 
}
.menu li a:hover{
	color:#CF3;
	background-color:#603;
}

A continuación debemos indicarle como queremos que se vean las opciones del «submenu» o del menu desplegable, indicándole el ancho el alto, los colores, bordes, etc… también pondremos un efecto de transición a la opacidad para que cuando se muestren las opciones no salgan de golpe. Quedando algo similar a:

.menu ul{
    position:absolute;
	left:10px;
	top:36px;
	margin:0px;
	list-style:none;
	padding:0px;
	opacity:0;
	transition:opacity .35s ease .2s;
	-webkit-transition:opacity .35s ease .2s;
	-moz-transition:opacity .35s ease .2s;
	-o-transition:opacity .35s ease .2s;
	visibility:hidden;	
}
.menu ul li a{
	border-bottom:2px solid #333;
	border-left:none;
	display:block;
	text-align:left;
}

Por último nos quedaría por indicarle que cuando se sitúe el ratón en una opción del menú nos muestre el submenu, si tiene, esto se hace añadiendo :hover al elemento de la lista del menú.

.menu li:hover ul{
    opacity:1;
	visibility:visible;
}

Con esto ya tendríamos nuestro menú desplegable funcionando como podemos ver en el siguiente ejemplo.

 

Comparte en tus redes sociales

ENTRADAS RECIENTES

30 Respuestas

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *