Menú vertical con cajas de información


Ahora vamos a ver cómo poner a nuestro blog, en la sidebar, un menú que nos permitirá poner información sobre cada apartado (qué encontraremos en ésa sección, etc). Vi éste menú hace unos días en la sidebar de Baofeng, una página web dedicada al cine, y me gustó mucho, así que la adapté para que podamos usarla en nuestro blog de blogger.



Bien, vamos a empezar.

♠ Ingresamos a Diseño/ Edición de HTML y con ayuda de CTRL+F buscamos ]]></b:skin>. Encima de éste pegamos lo siguiente:

ul#menutt {
width: 160px;
list-style:none;
font: bold 14px Arial, Verdana, Serif;
}
ul#menutt li{
position:relative;
}
ul#menutt a {
width: 160px;
display: block;
text-align:left;
padding: 5px 10px;
margin-bottom:1px;
text-decoration: none;
color: #fff;
background: #aaa;
border-left: 12px solid #000;
border-right: 3px solid #000;
voice-family: "\"}\"";
voice-family:inherit;
width:110px;
}
>#pagebody>ul#menutt a {
width:100px;
}
/* Fix IE. Hide from IE Mac \*/
* html ul#menutt li { float: left; height: 1%; }
* html ul#menutt li a { height: 1%; }
/* End */
ul#menutt a:hover {
color: #000;
background: #bbb;
border-right: 3px solid #bbb;
border-left: 12px solid #bbb;
}
ul#menutt a span {
display: none;
}
ul#menutt a:hover span {
display: block;
position: absolute;
top:0;
left: 160px;
width: 90px;
padding: 14px;
margin-left:2px;
color: #fff;
background:#aaa;
font-size: 10px;
text-align:center;
border:1px solid #000;
}


Explicación: vamos a ver de qué trata cada parte del código para que podamos personalizar el menú.
» ul#menutt a { nos permitirá personalizar el ancho y alto de las pestañas, color de los bordes izquierdo y derecho,color de letra y fondo de la pestaña. Ésto es para cuando vemos la pestaña tal y como es.
» En ul#menutt a:hover { podremos cambiar colores de letra, fondo y bordes al momento de pasar el mouse sobre la pestaña.
» ul#menutt a:hover span { : aquí modificaremos el estilo de las cajas deinformación, como tamaño de letra, de qué lado se mostrará la caja (izquierda o derecha), el ancho, alto,etc.

♠ Una vez que tengamos listo el menú, damos click en Guardar.
♠ Ahora vamos a Diseño/ Elementos de la página/ Añadir un gadget y escogemos HTML/Javascript.
♠ En el nuevo gadget pegamos lo siguiente:

<ul id="menutt">
<li>
<a href="URL-DEL-ENLACE">Home
<span>
Texto-de-información.
</span>
</a>
</li>

<li>
<a href="URL-DEL-ENLACE">Perfil
<span>
Texto-de-información.
</span>
</a>
</li>

<li>
<a href="URL-DEL-ENLACE">Feed
<span>
Texto-de-información.
</span>
</a>
</li>

<li>
<a href="URL-DEL-ENLACE">Mapa del sitio
<span>
Texto-de-información.
</span>
</a>
</li>

<li>
<a href="URL-DEL-ENLACE">Contacto
<span>
Texto-de-información.
</span>
</a>
</li>
</ul>


» Cambiamos donde dice URL-DEL-ENLACE y Texto-de-información por los enlaces y texto que deseemos; también podemos agregar o quitar pestañas.
♠ Finalmente damos click en Guardar.

Si hay alguna duda, estaré gustosa de ayudarte

5 opinaron:

iRENE

mUY BUENO; ME PARECE MUY ÚTIL Y MUY BONITO. lO APLICARÉ A MI BLOG.

uN BESOTE

Responder
tonny

amm y como o de donde saco la url ??? :D

Responder
Jéssica YK

» iRENE: gracias y me alegra que te haya gustado :)

» tonny: para obtener la URL, debes fijarte en la barra de navegación, la URL es la dirección de la página y siempre empieza con htt://.
Por ejemplo la URL de esta página sería : http://diyva.blogspot.com/2009/01/menu-vertical-con-cajas-de-informacion.html como puedes ver en la barra de navegación.

S@lu2

Responder
Smark

muy bueno gracias :)

Responder
Jéssica YK

Smark: me alegra que te haya sido útil

S@lu2

Responder

Por favor, trata de tener habilitado tu perfil (has click en "Comenta con el antiguo editor" para iniciar sesión) o deja un enlace a tu blog escogiendo la opción "Nombre/URL", procura no dejar comentarios Anónimos.
Nota: Si es que se presenta algún problema con el formulario de comentarios, sólo has click en "Comenta con el antiguo editor"

Gracias por participar en el blog.

inicio