24 marzo 2013

Menú verticales solo con CSS

menu-vertical

Este es un menú vertical hecho sólo con CSS, no tiene nada de Javascript, así que para aquellos que prefieren las cosas simples esta es una buena opción para organizar las etiquetas del blog o cualquier enlace.

Colocarlo es bastante sencillo, entra en Diseño | Elementos de la página | Añadir un gadget | HTML/Javascript y ahí pegas el código del menú que más te agrade.

Menú 1
<style>#menu8 ul { list-style: none; margin: 0; padding: 0; } #menu8 img { border: none; } #menu8 { width: 200px; margin: 10px; border-style: solid; border-color: #656556; border-size: 1px; border-width: 1px; } #menu8 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu8 li a:link, #menu8 li a:visited { color: #656556 ; display: block; background: url(http://lh4.ggpht.com/_7wsQzULWIwo/Sze73NFcouI/AAAAAAAACrg/jhptyKy73yg/s800/menu8.gif) ; padding: 8px 0 0 20px; } #menu8 li a:hover { color: #474739; background: url(http://lh4.ggpht.com/_7wsQzULWIwo/Sze73NFcouI/AAAAAAAACrg/jhptyKy73yg/s800/menu8.gif) 0 -32px; padding: 8px 0 0 20px; }</style>

<div id="menu8"><ul><li><a href="#1">ENTRADA 1</a></li> <li><a href="#2">ENTRADA 2</a></li> <li><a href="#3">ENTRADA 3</a></li> <li><a href="#4">ENTRADA 4</a></li> <li><a href="#5">ENTRADA 5</a></li> </ul></div>

menu-vertical
Menú 2
<style>
#menu2 ul { list-style: none; margin: 0; padding: 0; } #menu2 img { border: none; } #menu2 { width: 200px; margin: 10px; } #menu2 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu2 li a:link, #menu2 li a:visited { color: #fff; display: block; background: url(http://lh5.ggpht.com/_7wsQzULWIwo/Sze8BFiRUuI/AAAAAAAACsQ/TSV9un0iQfE/s800/menu14.gif) 0 -32px; padding: 8px 0 0 10px; } #menu2 li a:hover { color: #333; background: url(http://lh5.ggpht.com/_7wsQzULWIwo/Sze8BFiRUuI/AAAAAAAACsQ/TSV9un0iQfE/s800/menu14.gif); padding: 8px 0 0 10px; }
</style>

<div id="menu2"><ul><li><a href="#1">Entrada 1</a></li> <li><a href="#2">Entrada 2</a></li> <li><a href="#3">Entrada 3</a></li> <li><a href="#4">Entrada 4</a></li> <li><a href="#5">Entrada 5</a></li> </ul></div>

menu vertical
Menú 3
<style>
#menu1 ul { list-style: none; margin: 0; padding: 0; } #menu1 img { border: none; } #menu1 { width: 200px; margin: 10px; border-style: solid solid none solid; border-color: #000; border-size: 1px; border-width: 1px; } #menu1 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu1 li a:link, #menu1 li a:visited { color: #CCC; display: block; background: url(http://lh3.ggpht.com/_7wsQzULWIwo/Sze7wCsfFbI/AAAAAAAACrA/CQZ7RK4zKgQ/s800/menu4.gif); padding: 8px 0 0 10px; } #menu1 li a:hover { color: #FFF; background: url(http://lh3.ggpht.com/_7wsQzULWIwo/Sze7wCsfFbI/AAAAAAAACrA/CQZ7RK4zKgQ/s800/menu4.gif) 0 -32px; padding: 8px 0 0 10px; }
</style>

<div id="menu1"><ul><li><a href="#1">Entrada 1</a></li> <li><a href="#2">Entrada 2</a></li> <li><a href="#3">Entrada 3</a></li> <li><a href="#4">Entrada 4</a></li> <li><a href="#5">Entrada 5</a></li> </ul></div>

menu vertical
Menú 4

<style>
#menu4 ul { list-style: none; margin: 0; padding: 0; } #menu4 img { border: none; } #menu4 { width: 200px; margin: 10px; } #menu4 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu4 li a:link, #menu4 li a:visited { color: #8D9179; display: block; background: url(http://lh3.ggpht.com/_7wsQzULWIwo/Sze6kFX7HII/AAAAAAAACqI/yAWa9ZgZMPU/s800/menu6.gif); padding: 8px 0 0 10px; } #menu4 li a:hover, #menu4 li #current, #menu4 li a:active { color: #6C7250; background: url(http://lh3.ggpht.com/_7wsQzULWIwo/Sze6kFX7HII/AAAAAAAACqI/yAWa9ZgZMPU/s800/menu6.gif) 0 -32px; padding: 8px 0 0 10px; }
</style>

<div id="menu4"><ul><li><a href="#1">ENTRADA 1</a></li> <li><a href="#2">ENTRADA 2</a></li> <li><a href="#3">ENTRADA 3</a></li> <li><a href="#4">ENTRADA 4</a></li> <li><a href="#5">ENTRADA 5</a></li> </ul></div>

menu vertical
Menú 5
<style>
#menu5 ul { list-style: none; margin: 0; padding: 0; } #menu5 img { border: none; } #menu5 { width: 200px; margin: 10px; } #menu5 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 22px; text-decoration: none; } #menu5 li a:link, #menu5 li a:visited { color: #666; display: block; background: url(http://lh6.ggpht.com/_7wsQzULWIwo/Sze7-X35bvI/AAAAAAAACsA/RWo_eC1a6l8/s800/menu12.gif); padding: 10px 0 0 35px; } #menu5 li a:hover { color: #000; background: url(http://lh6.ggpht.com/_7wsQzULWIwo/Sze7-X35bvI/AAAAAAAACsA/RWo_eC1a6l8/s800/menu12.gif) 0 -32px; padding: 10px 0 0 35px; }
</style>


<div id="menu5"><ul><li><a href="#1">ENTRADA 1</a></li> <li><a href="#2">ENTRADA 2</a></li> <li><a href="#3">ENTRADA 3</a></li> <li><a href="#4">ENTRADA 4</a></li> <li><a href="#5">ENTRADA 5</a></li> </ul></div>

menu vertical
Menú 6
<style>
#menu6 ul { list-style: none; margin: 0; padding: 0; } #menu6 img { border: none; } #menu6 { width: 200px; margin-top: 10px; } #menu6 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu6 li a:link, #menu6 li a:visited { color: #E5E8D4; display: block; background: url(http://lh4.ggpht.com/_7wsQzULWIwo/Sze6w7o9FdI/AAAAAAAACqg/Cg0-bPbIR-k/s800/menu9.gif); padding: 8px 0 0 10px; } #menu6 li a:hover, #menu6 li #current { color: #725033; background: url(http://lh4.ggpht.com/_7wsQzULWIwo/Sze6w7o9FdI/AAAAAAAACqg/Cg0-bPbIR-k/s800/menu9.gif) 0 -32px; padding: 8px 0 0 10px; } #menu6 li a:active { color: #fff; background: url(http://lh4.ggpht.com/_7wsQzULWIwo/Sze6w7o9FdI/AAAAAAAACqg/Cg0-bPbIR-k/s800/menu9.gif) 0 -64px; padding: 8px 0 0 10px; }
</style>


<div id="menu6"><ul><li><a href="#1">ENTRADA 1</a></li> <li><a href="#2">ENTRADA 2</a></li> <li><a href="#3">ENTRADA 3</a></li> <li><a href="#4">ENTRADA 4</a></li> <li><a href="#5">ENTRADA 5</a></li> </ul></div>

Configuración:
width: 200px Anchura del menú (aumentar o disminuir segun sidebar)

<li><a href="#1">Entrada 1</a></li>

#1 Url de la dirección que desees mostrar
Entrada 1 Título de la palabra que desees mostrar


Escrito por:

Mi nombre es Antonio, soy sobre todo Sevillista y apasionado con los blog desde el 2007.

Sígueme en: | Facebook | Twitter | Google+

6 comentarios

Muchas Gracias Antonio , ya esta corriendo y disfrutando en el Cielo , en la Tierra ya estaba viejito.

Un abrazo muy fuerte.

Triana1952

Ya me has ayudado en alguna ocasion asi q aqui m tienes d nuevo molestandote :)
tengo un problema, que en el menu de las secciones tengo un despegable, pero al hacerlo se me oculta con la seccion de abajo o con la portada, te adjunto un pantallazo.

Muchas gracias por tu ayuda

Por cierto, tenemos un perfil asociado @YoSeDelSevilla que igual te gusta.

Un abrazo

YoSiSeDeFutbol, busca este trozo de código:
#nav{font-weight:bold;background-color:#333;height:35px;position:relative;z-index:
tu tienes 1 pues colócale 10.

Saludos.

Gracias por tu respuesta y por avisarme por twitter, se agradece sinceramente.
Siento moletarte d nuevo, he hecho lo q m comentas d ponerlo 10 o incluso mas veces y el error persiste... ya no se que mas probar la verdad, se t ocurre algo mas?

Graicas d nuevo :)
YoSiSeDeFutbol

Te he mandao un email, con los pantallazos de donde esta el dichoso fallo.

Muchasss gracias por tu ayuda

Buenas de nuevo, he conseguido apañarlo metiendo otro menu, gracias igualmente por tu ayuda.

un abrazo


Por favor, comente de acuerdo al tema del artículo.
Serán removidos todos los Comentarios con enlaces.
Si quieres recibir los nuevos comentarios marca "Avisarme"