Crear un menú lateral en CSS puede variar dependiendo de la flexibilidad y funcionalidad que deseas en tu menú. Aquí está un ejemplo simple de cómo puedes hacerlo:
HTML:
```html
```
CSS (styles.css en este caso):
```css
body {
margin: 0;
font-family: Arial, sans-serif;
}
.sidebar {
height: 100%; /* Full-height */
width: 0; /* 0 width */
position: fixed; /* Stay in place */
z-index: 1; /* Above everything else */
top: 0; /* Stay at the top */
left: 0; /* Move to the left */
background-color: #111; /* Black or other preferred color */
overflow-x: hidden; /* Don’t scroll horizontally */
padding-top: 60px; /* Added padding between sidebar and top of the page */
transition: 0.5s; /* Transition effect on sidebar (optional) */
}
.sidebar a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 20px;
color: #818181;
display: block;
transition: 0.3s; /* Transition effect on sidebar links (optional) */
}
.sidebar a:hover {
color: #f1f1f1; /* Change color on hover */
}
.main {
transition: margin-left .5s; /* If you want movement transition on the content when you toggling the sidebar (optional) */
padding: 20px;
}
```
Esto proporciona una estructura básica para un menú lateral, pero seguramente deberás ajustarlo de acuerdo a tus necesidades. Si quieres un menú que se desplace hacia adentro y hacia afuera, eso implicaría agregar algo de JavaScript o jQuery para manejar el ancho del div del sidebar en respuesta a la interacción del usuario.
