Menú sencillo y profesional con Flex | Programador Web Valencia

Menú sencillo y profesional con Flex

2 minutos

css

La estructura para realizar un menú moderno en web ha evolucionado. Debemos usar todo el potencial de HTML5 con sus etiquetas semánticas y CSS3 con su versatilidad de Flex. Si queremos tener un buen SEO, o posicionamiento online, debemos tener un HTML con la jerarquía muy estricta: nav > ul > li > a. Y un CSS que nos decore nuestro diseño. A continuación dejo un ejemplo.

Demo

HTML

 <nav class="principal">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">FAQ</a></li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">Informacion</a></li>
        <li><a href="#">Contacto</a></li>
    </ul>
</nav>

CSS

nav.principal ul {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
}
nav.principal ul li a {
    display: block;
    padding: 1rem;
    text-decoration: none;
    color: black;
}
nav.principal ul li a:hover {
    background-color: black;
    color: white;
}

Si utilizas SASS se vuelve más compacto.

nav.principal
    ul
        display: flex
        list-style: none
        padding: 0
        margin: 0
        a
            display: block
            padding: 1rem
            text-decoration: none
            color: black
            &:hover
                background-color: black
                color: white

Completo

Todo junto quedaría de la siguiente forma.

    <!DOCTYPE html>
    <html lang="es">
    <head>
        <meta charset="UTF-8">
        <title>Ejemplo de menu</title>
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <style>
            nav.principal ul {
                display: flex;
                list-style: none;
                padding: 0;
                margin: 0;
            }
            nav.principal ul li a {
                display: block;
                padding: 1rem;
                text-decoration: none;
                color: black;
            }
            nav.principal ul li a:hover {
                background-color: black;
                color: white;
            }
        </style>
    </head>
    <body>
        <nav class="principal">
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">FAQ</a></li>
                <li><a href="#">Blog</a></li>
                <li><a href="#">Informacion</a></li>
                <li><a href="#">Contacto</a></li>
            </ul>
        </nav>
    </body>
    </html>

Actualización

Dispones de otros ejemplos de menús con otras configuraciones.

HTML5 CSS3

Esta obra está bajo una Licencia Creative Commons Atribución-NoComercial-SinDerivadas 4.0 Internacional.

Atribución/Reconocimiento-NoComercial-SinDerivados 4.0 Internacional

¿Me ayudas?

Comprame un café
Pulsa sobre la imagen

No te sientas obligado a realizar una donación, pero cada aportación mantiene el sitio en activo logrando que continúe existiendo y sea accesible para otras personas. Además me motiva a crear nuevo contenido.

Comentarios

{{ comments.length }} comentarios

Nuevo comentario

Nueva replica  {{ formatEllipsisAuthor(replyComment.author) }}

Acepto la política de Protección de Datos.

Escribe el primer comentario

Tal vez también te interese...

Razones para NO usar Tailwind CSS

Técnica CSS para mostrar una imagen de baja de calidad mientras se descarga la final

Cómo formatear una etiqueta HTML