Cómo hacer un menú vertical reemplazando frames con CSS

Hace poco tiempo les hice un post en el que hablaba sobre las desventajas de usar frames hoy en día, algo que sin duda va contra todas las reglas de los estándares web. Un ejemplo muy recurrido en los frames es cuando se usa para hacer un menú vertical, o un panel a un costado para que siempre se quede estático, y bueno, eso haremos hoy.

A continuación vamos a ver cómo hacer un menú vertical reemplazando frames con CSS, de tal forma de tener el mismo efecto pero usando capas y hojas de estilo :D Espero les guste el tutorial.

Ver Demo

HTML

Algo que debemos notar es que hay mil formas para hacer este procedimiento, pero en este tutorial vamos a usar uno, si ustedes encuentran algún otro pues también es válido.

Entonces, lo que necesitamos son 3 capas:

• Menu: esta es la capa para el menú vertical estático de un lado del sitio web
• Contenedor: sería la capa que va a contener todo lo demás que no sea el menú
• Contenido: en esta capa se coloca la información, la capa Contenedor es para dar estructura, y Contenido para el contenido, literalmente.

Entonces, si hacemos el esqueleto tendremos esto:

CSS

En el ejemplo usé varios estilos para poder darle un formato un poco más decente, por lo que no es necesario usar todos los estilos.

Menu

Para el menú usaremos las siguientes estilos:

• Position: para poder hacer que esté estática la barra
• Float: para alinear la capa a la izquierda o derecha
• Width: para poder darle un ancho definido
• Height: para hacer que el alto cubra toda la altura de la pantalla

Teniendo un código así:

Contenedor:

Para esta capa solo necesitamos definir un espacio para que empiecen desde la posición del ancho de la capa menú, así que sólo necesitamos:

• Padding-left: para que la capa se recorra internamente desde la posición del menú.

Quedando el código así:

Contenido

Realmente no hay nada en esta capa, yo agregué algunos efectos para darle formato, pero pueden usar otros si quieren.

Extras

Para simular un pequeño menú hice una lista con links para que más o menos pudieran ver el efecto.

Entonces, con eso ya tendríamos todo el código listo, les quedaría algo así, incluyendo las partes extras:

¿Qué te pareció el tutorial?