JMiur [E]

Este es un menú vertical creado por SOHtanaka; muy simple de armar y no necesita ningún script. Ideal para colocar en una sidebar pero, puede adaptarse para utilizarlo en cualquier parte.



El HTML es similar a casi todos, una lista ordenada con enlaces donde, en una etiqueta SPAN, agregaremos la parte oculta que se expandirá al pasar el cursor por encima:
<ul class="sidenav">
<li>
<a href="#">Titulo 1
<span> ... el contenido oculto que se desplegará ...</span>
</a>
</li>
<li>
<a href="#">Titulo 2
<span> ... el contenido oculto que se desplegará ...</span>
</a>
</li>
.......
</ul>
Y el CSS que ponemos en alguna parte antes de </head>:
<style type="text/css">
ul.sidenav {
/* el rectángulo contenedor */
list-style: none;
margin: 0 auto;
padding: 0;
width: 250px;
/* propiedades optativas */
background-color: #CD853F;
border: 1px solid #300;
outline: 1px solid #FFF;
}
ul.sidenav li a {
/* el enlace de cada item */
display: block;
text-decoration: none;
/* propiedades optativas */
background: transparent url(URL_imagen_icono) no-repeat 5px 7px;
border-bottom: 1px solid #AD651F;
border-top: 1px solid #300;
color: #FFF;
font-size: 18px;
padding: 15px 10px 10px 45px;
width: 195px;
}
ul.sidenav li a:hover {
/* propiedades optativas */
background: #CD853F url(URL_imagen_icono) no-repeat 5px 7px;
border-top:1px solid #300;
}
ul.sidenav li span {
/* el contenido permanece oculto por defecto */
display: none;
}
ul.sidenav li a:hover span {
/* el contenido se muestra al pasar el cursor encima */
display: block;
/* propiedades optativas */
font-size: 12px;
padding: 10px 0;
margin: 0 0 0 -30px;
}
</style>

39 comentarios:

Unknown  

Precioso! se me ocurre por ejemplo, en lugar de etiquetas ésto :)

Responder
Genio en Potencia  

hola amigo muy interesante tu entrada.

me gustaria que dieras algunas pautas de como hacer un menu como el que tiene en la parte vertical derecha donde dice (AUTOPROMO) opcion banner.

espero me puedas ayudar.

Responder
JMiur  

Graciela:
Es buena idea :D

Genio en Potencia:
Usando los efectos de Scriptaculous; fundamentalmente, el llamado Toggle.

Responder
Dyatlov  

Hola GMiur, me estoy volviendo loco y no puedo desplazar el menu horizontal hacia el lado izquierdo, o es como que le falta una parte para completar y cubrir el ancho de la plantilla, si puedes pasar a verlo.

Como siempre gracias

Responder
JMiur  

Imagino que es porque tiene un margen:
#header-column-bottom ul {
margin:0 0 0 30px;
padding:0;
}

Responder
Lluís Hoffman  

muchas gracias esta tarde lo pruebo, saludos =)

Responder
Unknown  

Hola JMiur,

Es posible que el contenido oculto sea una relación de enlaces? como tendria que hacerlo? gracias.Rafael

http://lescalaesport.blogspot.com/

Responder
Anónimo  

Adoro suas dicas, são sempre muito fáceis de se aplicar!
Mas gostei mesmo do seu método de "responder" comentários...eu até tinha um parecido no meu blog mas não estava mais a funcionar...

Você tem um tutorial explicando o "reply" igual ao do seu blog?

Desde já, agradecida! (e desculpa postar em português...)

Responder
Dyatlov  

Hola JMiur, la verdad que el que sabe sabe.
muchas gracias por la ayuda.
Quedo muy bien el menu.

Responder
JMiur  

Rafael:
No se si es posible con este esquema ya que el contenido ya es un enlace. Deberías hacer pruebas y ver si puedes cambair eso.

Gizaa Veiga
Gracias por el comentario; por el idioma, no hay problema :D
En esta entrada hay una explciación de ese truco del reply que es una traducción de esta otra entrada hecha por MamaNunes.

Responder
Anónimo  

@JMiur

Obrigado!!
Vou ver agora mesmo seu tutorial, depois aviso como me "sai" hehehe

bjão

Responder
DarkSeratul  

muy bueno a un que me quedo con flash saludos

Responder
XiC Nou Barris  

hola JMiur, perfecto el menú que nos brindas y de paso le puse un icono que me descargue gracias a tu entrada, solo por curiosidad ... el icono que pones en el ejemplo los puedo ver en alguna página?? lo digo porque el efecto que hace al abrirse es una pasada.
gracias a ti, voy aprendiendo un poco mas.
saludos
núria

Responder
JMiur  

La verdad, no recuerdo de donde son los íconos, probablemente, de alguno de los paquetes que he publicado pero no sabría decirte cual.

Responder
Dr CJ  

hola JMiur, esto no tiene nada que ver con el post, es que encontre una plantilla que me gusto mucho y no lo encuentro en internet, la plantilla lo utiliza este sitio http://www.peliculas-flv.com la pregunta es la siguiente ¿como puedo extraer el codigo de esta plantilla para colocarlo en mi sitio? gracias y saludos cordiales.

Responder
JMiur  

No hay ningún método para eso. Puedes mirar l codigo fuente e intentar entender como funciona y como aplicarlo a una plantilla que no es lo mismo.

Responder
Luis Reyes  

esta genial JMiur, lo utilizare junto con unos iconos que tienes aqui en vagabundia.
gracias

Responder
JMiur  

Suerte, lerh :D

Responder
Anónimo  

Espero que siga activo esto :)
Una pregunta.. Si quisiera poner un icono diferente para cada categoria, seria posible?

Responder
JMiur  

Todo es posible. Deberías probar y ver.

Para empezar, colocacno esa imagen como fondo en alcada item de la lista:

ul.sidenav li a {}

Responder
Pacheta  

Buenas !
Me ha servido muchísimo esto, pero me gustaría saber si puedo poner un link en el texto que se muestra al pasar el ratón porque lo intento pero no me deja.

Gracias.

Responder
JMiur  

Lo que se despliega es un enlace por lo tanto, no puedes poner otro dentro de él. Para que funcione de ese modo, deberías cambair todo y uilizar etiquetas distintas.

Responder
Pacheta  

Gracias !
¿Alguna idea?

Responder
JMiur  

Esa que te dije.

Por ejemplo, cambia todas las etiquetas:
<a href="#"> y </a>

por:
<div> y </div>

y los estilos de:
ul.sidenav li a {.......}
ul.sidenav li a:hover {.......}
ul.sidenav li a:hover span {.......}

por:
ul.sidenav li div {.......}
ul.sidenav li div:hover {.......}
ul.sidenav li div:hover span {.......}

de ahí en adelante, dentro de las etiquetas SPAN puedes colocar enlaces.

Responder
Pacheta  

MUCHAS GRACIASSSS !!!!!!!!!

Responder
jome  

Gracias!!! como siempre genial.

Responder
chichotas  

se puede cambiar el codigo para utilizar la propiedad active, en lugar de la de hover, para desplegar los submenus con un click en vez de posicionarse encima???, muchas gracias

JMiur  

:active funciona de manera similar a un onclick pero se ejecuta cuando pulsamos el botón del ratón y se desactiva cuando lo soltamos así que el menú no permanecerá abierto

Puedes usarlo si cambias:
ul.sidenav li a:hover span {} por ul.sidenav li a:active span {}

y además, deberás evitar que los enlaces se ejecuten poniendo:
<a href="javascript:void(0);">
o bien usar otro tipo de etiqueta en lugar de enlaces.

Responder
Anónimo  

JMiur, me pasarias los iconos del folio y la caja?

Responder
Evi Modelados  

Hola JMiur! Ante todo muchas gracias por la ayuda que brindas a todos tus lectores. Necesito consultarte algo que espero puedas responderme. Estoy buscando menus verticales para mi blog de temática básicamente infantil y necesito implementar dos de diferentes colores para diferenciar las entradas de varones y mujeres. Hay manera de hacer ésto? Si quisiera implementar el menú de éste post qué pasos debería seguir para colocar dos menús iguales pero de diferentes colores? Mil Gracias anticipadas! Evi...

JMiur  

No hay problema alguno en usar este menú repetidas veces en una misma página ya que usa clases por lo tanto, puede haber varios.

En todo caso, si quieres que uno sea estéticamente distinto del oto, deberás indicarlo; por ejemplo, si uno dice:

<ul class="sidenav"> ......

el otro podría decir:

<ul class="sidenav rojo"> ......

le agregué una segunda clase (podría ser un ID o cualquier cosa que lo identifique y ahora el CSS de ese otro puede cambiar:

ul.sidenav.rojo {background: red;}

Lo mismo con cualquier otra regla:

ul.sidenav.rojo li a { ......... }

Responder
Evi Modelados  

Ante todo mil gracias por tu atención, sobre todo un día domingo. Creo no haber entendido bien tu explicación porque no me sale el nuevo menú... Lo que yo hice fue copiar el código completo del menú que ya tengo probando en mi blog y pegarlo debajo ya que lo quiero exactamente igual solo de diferente color y con diferentes íconos, luego al que pegué le hice los cambios como me indicaste pero algo hago mal porque me repite exactamente el mismo primer menú sin siquiera respetar los cambios de las url de los archivos de imagen..... Serías tan amable de especificarme exactamente dónde debo hacer las agregados? (abajo pego el código), se me hace que es algo muy simple pero yo soy novata en ésto y temo que hay algo que no estoy entendiendo......Mil gracias una vez más por tu paciencia. Evi....

style type='text/css'
ul.sidenav {
/* el rectángulo contenedor */
list-style: none;
margin: 0 auto;
padding: 0;
width: 220px;
/* propiedades optativas */
background-color: #F5BCA9;
border: 2px solid #B40404;
outline: 1px solid #FFF;
}
ul.sidenav li a {
/* el enlace de cada item */
display: block;
text-decoration: none;

background: transparent url(Archivo imagen1) no-repeat 5px 2px;
border-bottom: 2px solid #B40404;
border-top: 1px solid #300;
color: #3104B4;
font-size: 16px;
padding: 23px 4px 10px 0px;
width: 220px;
}
ul.sidenav li a:hover {
background: #FA8258 url(Archivo imagen2) no-repeat 5px 9px;
border-top:2px solid #B40404;
}
ul.sidenav li span {
display: none;
}
ul.sidenav li a:hover span {
display: block;
font-size: 12px;
padding: 1px 10;
margin: 1 10 0 -2px;
}

JMiur  

Paraque se vea un menú igual, basta copair el contenido:
<ul ..........>
.......
</ul>

Luego, se personaliza uno de ellos ¿Dónde está tu ejemplo para poder verlo onlne?

Responder
Evi Modelados  

LO LOGREEEÉ JMIUR!!!! Quiero agradecerte enormemente tu atención desinteresada. Creo que estaba el error en algún punto que me comí, no lo sé, porque a pesar de re revisarlo el menú no salía.... Te dejo el link del blog de prueba para que cuando puedas y sin apuro me digas cómo solucionar el texto del botón que se posisiona sobre la imagen. Cómo hago para alinearlo a la derecha??? Ahora sí me voy a dormir, mañana "puliré" los menús nuevos. Saludos y que descanses!

http://pruebo1979.blogspot.com.ar/2013/02/pista-de-autos-cars-pista-de-autos-para.html

JMiur  

Eso es un tema de espacio. De ancho, del tamaño de la fuente del texto, del padding; por ejemplo, puedo cambiar y poner algo así:

ul.sidenav.azul li a {
background: url(http://i188.photobucket.com/albums/z62/evadecicco/BLOG%20NUEVO/icononene_zpsa7978516.png) no-repeat 0 5px transparent;
border-bottom: 2px solid #F6CEF5;
border-top: 2px solid #F6CEF5;
color: #3104B4;
display: block;
font-size: 12px;
font-weight: bold;
padding: 15px 0 20px 45px;
text-align: left;
text-decoration: none;
width: 165px;
}
ul.sidenav.azul li span {
display: none;
font-weight: normal;
}

pero si el texto del título es muy largo, se descompaginará y lo mismo si en el hover usas una imagen que tiene un ancho superior a la original, tal como ocurre con esos gifs animados.

Responder
Evi Modelados  

JMiur, me encantó!!!! Ya lo probé, quedó muy bien y muchísimo más estético!! Observando atentamente los valores que colocaste me doy cuenta que no entiendo nada de ésto, nunca lo hubiera hecho yo sola!!!...Te agradezco mil veces por todas tus atenciones... Un saludo cordial!!! Evi...

JMiur  

Me alegra que sirviera, Evi; todo es cosa de paciencia y probar :-)

Responder
SENA Putumayo  

amigo me puedes decir como pusistes la imagen dentro del contenido oculto

Responder
SENA Putumayo  

compa ya lo tengo de = gRACIAS

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR