Menú con hamburguesa o con botón desplegable sin Javascript

Es fácil recurrir a Javascript o a JQuery cuando queremos realizar ciertas acciones dinámicas. Como, por ejemplo, hacer un botón que muestre un menú en smartphone (o móvil). Pero olvidamos el potencial que hay detrás de CSS3. Con un poco de Flex, CSS3 y usando un truco con focus, podremos conseguirlo sin usar nada de Javascript. Sin Plugins, totalmente nativo.

HTML5

Primero definimos un menú sencillo con listas desordenadas y la etiqueta nav.

<button id="menu">menu</button>
<nav id="superior">
    <ul>
        <li><a href="#">Lorem</a></li>
        <li><a href="#">Lorem</a></li>
        <li><a href="#">Consectetur.</a></li>
        <li><a href="#">Elit</a></li>
        <li><a href="#">Elit.</a></li>
    </ul>
</nav>

CSS3

Y realizamos nuestro CSS. Aquí dejo la Versión comentada, para que podáis entender porque funciona.

button#menu {
    /* Ocultamos el boton en escritorio */
    display: none;
}

button#menu:focus + nav#superior {
    /* Si es pulsado el boton, mostramos el nav.
    Esto lo puedo hacer porque adquiere el foco.
    Solo funcionará, si el botón y el menú esta a la misma altura. */
    display: block;
}

nav#superior ul {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}

nav#superior ul a {
    display: block;
    width: 8em;
    text-decoration: none;
    border: 1px solid #BE353D;
    padding: .3em 0;
    text-align: center;
    color: #FA453B;
    background: #EF8E76;
    transition: 1s all;
}

nav#superior ul a:hover {
    background: #ec7b5f;
}

@media all and (max-width: 700px) {
    /* En smartphone mostramos el botón */
    button#menu {
        display: block;
    }
    nav#superior {
        display: none;
    }
    nav#superior ul {
        flex-direction: column;
    }
}

Ahora sin comentar, para que podáis copiarlo.

button#menu {
    display: none;
}

button#menu:focus + nav#superior {
    display: block;
}

nav#superior ul {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}

nav#superior ul a {
    display: block;
    width: 8em;
    text-decoration: none;
    border: 1px solid #BE353D;
    padding: .3em 0;
    text-align: center;
    color: #FA453B;
    background: #EF8E76;
    transition: 1s all;
}

nav#superior ul a:hover {
    background: #ec7b5f;
}

@media all and (max-width: 700px) {
    button#menu {
        display: block;
    }
    nav#superior {
        display: none;
    }
    nav#superior ul {
        flex-direction: column;
    }
}

Extra: con SASS

Si usáis un generador como SASS, os dejo una replica adaptada.

$color_limon: #EF8E76;
$color_pear: #BE353D;
$color_rumi: #FA453B;
$media_tablet: 700px;

button#menu {
    display: none;
    @media all and (max-width: $media_tablet) {
        display: block;
    }
    &:focus + nav#superior {
        display: block;
    }
}

nav#superior {
    @media all and (max-width: $media_tablet) {
        display: none;
    }
    ul {
        display: flex;
        list-style: none;
        margin: 0;
        padding: 0;
        @media all and (max-width: $media_tablet) {
            flex-direction: column;
        }
        a {
            display: block;
            width: 8em;
            text-decoration: none;
            border: 1px solid $color_pear;
            padding: .3em 0;
            text-align: center;
            color: $color_rumi;
            background: $color_limon;
            transition: 1s all;
            &:hover {
                background: darken($color_limon, 5%);
            }
        }
    }
}

¡Suerte!