Crear un menú con Flex y CSS3 Parte 1 | Programador Web Valencia

Crear un menú con Flex y CSS3 Parte 1

1 minuto

La forma adecuada de generar un menú correcto actual es utilizando las etiquetas de listas, las etiquetas de nav, y display Flex. A continuación dejo un ejemplo de como realizarlo y como quedaría. Con un ancho de pantalla mayor de 500px quedaría así. menu desplegable Y con menos quedaría responsive design (o adaptado a móvil). Ocupando todo el ancho. menu desplegable En la segunda parte enseño como añadir un botón para conseguir que aparezca el menú. Pensado en móvil.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <style type="text/css">
        nav#main ul {
            display: flex;
            list-style: none;
            margin: 0;
            padding: 0;
        }
        @media only screen and (max-width: 500px) {
            nav#main ul {
                flex-direction: column;
            }
        }
        nav#main li {
            flex-grow: 1;
        }
        nav#main ul li a {
            display: block;
            color: black;
            text-decoration: none;
            height: 100%;
            width: 100%;
            text-align: center;
            background-color: green;
            border: 1px solid black;
        }
        nav#main ul li a:hover {
            color: white;
        }
    </style>
</head>
<body>
    <nav id="main">
        <ul>
            <li>
                <a href="#">Lorem.</a>
            </li>
            <li>
                <a href="#">Commodi.</a>
            </li>
            <li>
                <a href="#">Facere?</a>
            </li>
            <li>
                <a href="#">Impedit!</a>
            </li>
        </ul>
    </nav>
</body>
</html>

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...