lunes, julio 26, 2021

Ejemplo sencillo de menu desplegable desde cero

Deberías leer

Antonio García Pratshttp://antoniogarciaprats.eu/
Estudios de Licenciatura en CC Quimicas e Ingeniería Técnica en Informática de Gestión por la Universidad de Jaén. Social Media autodidacta. Siempre en búsqueda de nuevos retos que proporcionen algún sentido a mi existencia.

Obvio que ya con los modernos framework como bootstrap, estos menús ya están disponibles. Solo es necesario copiar y pegar. Pero no está de más aprender los fundamentos de la programación con este sencillo ejemplo para ver como funciona.

Vamos a crear un pequeño menu desplegable usando sólo HTML5 Y CSS3. Comenzamos con un código de una página simple en la que incluimos una lista que nos servirá de menú. En una de las etiquetas <li> añadiremos una sublista. Este será nuestro menú desplegable. Es código que muestro a continuación probablemente no tenga ningún secreto, aún para los iniciados al desarrollo web. Por esta razón no voy a extenderme en este apartado. En cualquier caso, si tenéis alguna duda, las contestaré en la sección de comentarios.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <header>
        <nav class="navegacion">
            <ul class="menu">
                <li><a href="#">Inicio</a></li>
                <li><a href="#">Quienes Somos</a></li>
                <li><a href="#">Servicios</a></li>
                    <ul class="submenu">
                        <li><a href="#">Servicios 1</a></li>
                        <li><a href="#">Servicios 2</a></li>
                        <li><a href="#">Servicios 3</a></li>
                    </ul>
                <li><a href="" #="">Contacto</a></li>
            </ul>
        </nav>
    </header>
</body>
</html>

Código CSS para el menú principal

Comenzamos por eliminar todos los margenes y padding, asignándoles el valor cero. A continuación vamos a personalizar el espacio que ocupará el menu con la clase .navegación. El siguiente paso será disponer la lista principal del menu en línea con la opción inline-block. Esto no afectará a la lista secundaria.

También personalizaremos los enlaces de la lista principal del menú. Sin embargo, cuando pasemos el ratón sobre cada una de las opciones del menu y el submenu, estás se modificarán de la misma forma.

*{
    margin: 0;
    padding: 0;

    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

body {
    background: #FFFFFF;
}

.navegacion {
    width: 1000px;
    margin: 30px auto;
    background: #CCCCCC;
    border-radius: 10px;
}

.navegacion ul {
    list-style: none;
}

.menu > li {
    display: inline-block;
    position: relative;
}

.menu > li > a {
    display: block;
    padding: 15px 20px;
    color: #333333;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-weight: 900;
    text-decoration: none;
}

.menu li a:hover {
    color: #CE7042;
    transition: all .9s;
}

Codigo CSS para el submenu

Para el submenu, deberá tener una position con el valor absolute. Puesto que queremos que se abra cuando pase por encima el cursor, deberemos asignar a la propiedad visibility el valor hidden. Para darle algún efecto, le daremos una transición cuando se visualice el submenu.

.submenu {
    position: absolute;
    background: #fc7444;
    width: 150%;
    visibility: hidden;
    opacity: 0;
    transition: opacity 1.5s
}

.submenu li a {
    display: block;
    padding: 15px;
    color: #FFFFFF;
    text-decoration: none;
    font-family: monospace;
}

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

Tenéis este código a vuestra disposición en mi cuenta de github por si queréis descargarosla y utilizarla en vuestros desarrollos web.

- Advertisement -spot_img

Más publicaciones

Dejar respuesta

Please enter your comment!
Please enter your name here

- Advertisement -spot_img

Últimas publicaciones