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>