Menú para smartphone con HTML5 y CSS3 | Programador Web Valencia

Menú para smartphone con HTML5 y CSS3

2 minutos

HTML5 y CSS3

Según nos vamos adaptado a los móviles, nos resulta más cómodo tener la misma interfaz en otros dispositivos. Insconscientemente buscamos una homogeneidad en usabilidad. Y por ello se hace cada vez más común imitar los menús responsive design al escritorio. En el siguiente ejemplo podrás ver un menú para smartphone sin nada de Javascript. Solo la magia de HTML y CSS.

DEMO

HTML

<!-- Definimos nuestra cabecera -->
<header>
    <!-- Nuestro botón. En el ejemplo uso Font-awesome para mostrar un icono de barras -->
    <button class="botonMenu">
        <i class="fa fa-bars"></i>
    </button>
    <!-- Los links -->
    <nav class="principal">
        <ul>
            <li><a href="#">Lorem.</a></li>
            <li><a href="#">Soluta!</a></li>
            <li><a href="#">Reprehenderit.</a></li>
            <li><a href="#">Nulla!</a></li>
            <li><a href="#">Ipsum.</a></li>
        </ul>
    </nav>
</header>

CSS

/* Boton de menu */
.botonMenu {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 3rem;
    height: 3rem;
    position: fixed;
    top: 1rem;
    right: 1rem;
    background-color: #99B2B7;
    border: 0;
    color: white;
    cursor: pointer;
}
/* Se le quita el borde azul cuando se pulsa en Chrome */
.botonMenu:focus {
    outline: none;
}
/* Cuando es pulsado, se quita el translate que lo ocultaba */
.botonMenu:focus + .principal {
    transform: translateX(0rem);
}
/* Se posiciona y se oculta con translate */
nav.principal {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 15rem;
    background-color: #7A6A53;
    transform: translateX(15rem);
    transition: 1s all;
}
/* Estilos sencillos para decorar los links */
nav.principal ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
nav.principal a {
    display: block;
    color: #D5DED9;
    padding: 1rem;
    transition: .5s all;
}
nav.principal a:hover {
    text-decoration: none;
    background-color: #948C75;
}

Todo agrupado y sin comentarios


<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <style>
        .botonMenu {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 3rem;
            height: 3rem;
            position: fixed;
            top: 1rem;
            right: 1rem;
            background-color: #99B2B7;
            border: 0;
            color: white;
            cursor: pointer;
        }
        .botonMenu:focus {
            outline: none;
        }
        .botonMenu:focus + .principal {
            transform: translateX(0rem);
        }
        nav.principal {
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            width: 15rem;
            background-color: #7A6A53;
            transform: translateX(15rem);
            transition: 1s all;
        }
        nav.principal ul {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        nav.principal a {
            display: block;
            color: #D5DED9;
            padding: 1rem;
            transition: .5s all;
        }
        nav.principal a:hover {
            text-decoration: none;
            background-color: #948C75;
        }
    </style>
</head>
<body>
    <header>
        <button class="botonMenu">
            <i class="fa fa-bars"></i>
        </button>
        <nav class="principal">
            <ul>
                <li><a href="#">Lorem.</a></li>
                <li><a href="#">Soluta!</a></li>
                <li><a href="#">Reprehenderit.</a></li>
                <li><a href="#">Nulla!</a></li>
                <li><a href="#">Ipsum.</a></li>
            </ul>
        </nav>
    </header>
</body>
</html>

Actualización

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

HTML5 CSS3 Web Javascript

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