Menú responsive con HTML y CSS

Menú responsive

Menú responsive con HTML y CSS

Este menú está realizado solamente con HTML y CSS sin ninguna librería. Actualmente, si estás realizando algún proyecto, es más recomendable que utilices frameworks como Bootstrap para realizarlo ya que nos ahorra bastante tiempo pero siempre es bueno saber como funcionan cosas simples como esta.

Para este menú utilicé dos iconos y una imagen de fondo, los materiales junto con el código se encuentran al final de este post. Tendremos un archivo index.html y un archivo styles.css, en el index importaremos en la cabecera nuestro archivo de estilos y en el <body> del documento html incluiremos un encabezado que llevará dentro un <input> de tipo “checkbox” y dos etiquetas <label> con las imágenes de los iconos dentro, cada una con una clase para poder identificar cada icono y también tendremos el menú con cinco items. La etiqueta <label> con el icono para cerrar el menú estará dentro de la lista como su primer item.

    <header>
        <input type="checkbox" id="btn-menu">

        <label for="btn-menu" class="iconMenu">
            <img src="img/iconomenu.png">
        </label>

        <nav class="menu">

            <ul>
                <li>
                    <label for="btn-menu" class="iconClose">
                        <img src="img/cerrar.png">
                    </label>
                </li>
                <li>
                    <a href="#">Item 1</a>
                </li>
                <li>
                    <a href="#">Item 2</a>
                </li>
                <li>
                    <a href="#">Item 3</a>
                </li>
                <li>
                    <a href="#">Item 4</a>
                </li>
                <li>
                    <a href="#">Item 5</a>
                </li>
            </ul>
        </nav>
    </header>

Elegimos una fuente para todo el documento, establecemos el margen y el relleno a cero e incluimos la imagen de fondo junto con unos estilos en el <body> para que ocupe toda la pantalla y este centrada.

* {
    font-family: sans-serif;
    margin: 0;
    padding: 0;
}

body {
    background-image: url(img/fondo2.jpg);
    background-size: 100vw 100vh;
    background-attachment: fixed;
}

Hacemos que el ancho del encabezado ocupe el cien por ciento de la pantalla, le damos una altura y un color de fondo, ocultamos el <input> y los iconos.

header {
    width: 100%;
    background-color: #2240af45;
    height: 55px;
}

#btn-menu,
.iconMenu,
.iconClose {
    display: none;
}

Le sacamos a la lista y a los enlaces el estilo que viene por defecto. Ponemos los elementos de la lista en fila, establecemos un tamaño de fuente y también un color a los enlaces.

ul {
    list-style: none;
    display: flex;
    font-size: 18px;
}

a {
    display: block;
    text-decoration: none;
    color: #957136;
    padding: 20px;
}

Utilizaremos media queries para establecer el comportamiento del menú según el ancho de la pantalla, en este caso establecemos el máximo a unos 799 píxeles.

.Le damos una posición absoluta al menú. Mostramos el icono del menú, al menú le incluimos algunos estilos y le decimos que se traslade por el eje y un -200% para ocultarlo. Pero esto tiene un resultado algo extraño ya que aparece y desaparece al recargar la página por unos segundos. Este problema lo solucionamos con un keyframe para desaparecerlo una sola vez, además le agregamos otros estilos a los elementos del menú para que nos queden .

Ahora como el menú está escondido, le decimos que cuando pulse sobre el icono del menú, haciendo checked sobre nuestro input escondido, que afecte al <nav> con la clase “menu” haciendo que éste se traslade por el eje y en la posición cero y que esto lo haga con un efecto de transición. .

Al final utilizando nth-child le damos un efecto al pasar el cursor por los elementos del menú

@media(max-width: 799px) {
    .iconClose,
    .iconMenu {
        display: block;
        padding: 13px;
        cursor: pointer;
    }
    .menu {
        width: 100%;
        position: absolute;
        transform: translateY(-200%);
        transition: all 1s;
        animation: desaparece 1s 1;
        top: 0;
    }
    @keyframes desaparece {
        0%,
        100% {
            margin-top: -100%;
        }
    }
    ul {
        flex-direction: column;
    }
    li {
        border-bottom: 1px solid rgb(149, 113, 54, 0.6);
        background-color: black;
    }
    #btn-menu:checked~.menu {
        transform: translateY(0);
        transition: all 1s;
    }
    li:nth-child(n+2):nth-child(-n+6):hover {
        background-color: #2240af45;
    }
}

También puedes ver el video de este tutorial:

Código en GitHub
Paola Puchetta Alves
Paola Puchetta Alves

Soy desarrolladora web y programadora de software. Tengo experiencia desarrollando páginas y aplicaciones web. Uno de mis primeros programas que involucraba base de datos (MySQL) fue con Python y Tkinter. He sido colaboradora en la realización de una aplicación en Android. Me gusta bailar, amo a los gatos y soy bastante introvertida.

Deja tu mensaje