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.

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?

No te sientas obligado a realizarme una donación, pero cada aportación me ayuda a mantener el sitio en activo para que continúe existiendo y me motiva a continuar creando nuevo contenido.

Comprame un café
Pulsa sobre la imagen
  • 1 café: Se mantiene el dominio durante 4 meses.
  • 2 cafés: Se liquida 1 mes del Servidor Web.
  • 3 cafés: Se paga 1 mes de Newsletter.

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