Seguramente haz visto el tipo de menú de una aplicación de smartphone en donde presionas un botón que tiene 3 lineas y aparece un menú por uno de los laterales, en este post te enseñare como hacer un menú de este tipo de navegación.

Este menú que te muestro es totalmente adaptable a todo tipo de dispositivos, como sabrás en un sitio web siempre es común encontrarnos con un sistema de navegación el cual nos permite desplazarnos por las diferentes paginas de dicho sitio, incluso hay menús que son desplegables (esto lo are en el siguiente post), para hacer esto solo haremos uso de HTML y CSS.

Puedes hacer uso de editores de texto como los siguientes:
Este código va dentro de una archivo con extensión .HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Menu en HTML</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link rel="stylesheet" href="estilos/menu.css">
</head>
<body>
<header>
<input type="checkbox" id="btnMenu">
<label for="btnMenu"><span><img src="Imagenes/icon-menu.png" width="40px" height="40px" alt="Menu"></span></label>
<nav class="menu">
<ul> <li><a href="#">Item 1</a></li> <li><a href="#">Item 2</a></li> <li><a href="#">Item 3</a></li> <li><a href="#">Item 4</a></li> <li><a href="#">Item 5</a></li> <li><a href="#">Item 6</a></li> </ul>
</nav>
</header>
<main>
<h1>Menu Responsive en HTML y CSS</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil, sequi, placeat. Labore officia, harum! Nemo fugit esse minima, placeat ullam rem illo consequatur expedita cupiditate explicabo dolor, accusamus tempora porro.</p>
<p>Blanditiis magni quo consequatur ipsum veniam hic pariatur omnis, laudantium similique quam nesciunt beatae sit illum sint amet, fugiat atque tempora nobis. Quod vel deserunt aliquid culpa neque asperiores doloribus!</p>
</main>
</body>
</html>

Estilo CSS
El siguiente código va dentro de la carpeta de estilo CSS

* {
padding:0;
margin:0;
box-sizing: border-box;
}

body {
background-image: url(../Imagenes/fondo.jpg);
background-size: 100vw 100vh;
background-attachment: fixed;
}

header {
width: 100%;
background: #4E94AB;
position: fixed;
top: 0;
transition: all 1s;
}

#btnMenu {
display: none;
}

header label {
display: none;
}

.menu {
transition: all 1s;
}

.menu ul {
list-style: none;
display: flex;
}

.menu li {
padding: 10px;
text-align: center;
border-right: 1px solid #FFF;
flex-grow: 1;
}

.menu li:hover {
background: rgba(0,0,0,0.5);
}

.menu a {
color: #FFF;
text-decoration: none;
padding: 10px 30px;
}

main {
width: 95%;
background: rgba(0,0,0,0.5);
color: #FFF;
margin: auto;
max-width: 1000px;
padding: 20px;
margin-top: 50px;
}

@media (max-width: 768px) {

header {
width: 100%;
position: fixed;
top: 0;
height: 50px;
}

header label {
display: block;
float: right;
padding: 7px;
margin-right: 20px;
}

header label img {
cursor: pointer;
transition: all 1s;
}

header label img:hover {
border-radius: 50%;
}

.menu {
background: #E6344A;
position: absolute;
top: 50px;
overflow: scroll;
width: 50%;
height: calc(100vh - 60px);
transform: translateX(-100%);
transition: all 1s;
}

.menu ul {
flex-direction: column;
}

.menu li {
border: none;
border-top: 1px solid #FFF;
text-align: left;
}

.menu a {
padding-left: 0;
transition: all 1s;
}

.menu a:hover {
padding-left: 10%;
}

#btnMenu:checked ~ .menu {
transform: translateX(0%);
}

main {
margin-top: 80px;
}
}

Resultado Final

Así se muestra en un móvil (480px)
Así se muestra en una tableta (768px)


Así se muestra en un navegador de escritorio (1024px)