JMiur [E]

Este es un menú desplegable muy simple que usa algunas técnicas de CSS3 que lo hacen llamativo en algunos navegadores pero al que podemos modificar un poco para que funcione bien en cualquier navegador.


El HTML no tiene muchos misterios; en un DIV con una clase a la que llamamos drop-menu, colocamos un SPAN que es lo que nos servirá para desplegar y contraer el menú que está en una lista ordenada:
<div class="drop-menu">
<span class="plus">+</span>Seleccione una opción del menú
<ul class="sub-menu">
<li><a href="URL1"><img src="URL_imagen1"/>Texto enlace 1</a></li>
<li><a href="URL2"><img src="URL_imagen2"/>Texto enlace 2</a></li>
<li><a href="URL3"><img src="URL_imagen2"/>Texto enlace 3</a></li>
</ul>
</div>
Como siempre, la clave está en el CSS y allí hay muchas variantes. Este sería el necesario para realizar el ejemplo:
.drop-menu {
background-color: #242F3A;
border: 1px solid #343F4A;
cursor: pointer;
display: block;
font-family: Tahoma;
font-size: 20px;
height: 25px;
letter-spacing: -1px;
margin: 0 auto;
max-height: 25px;
padding: 10px;
position: relative;
text-align: left;
width: 300px;
z-index: 1000;
}
.plus {
display: inline-block;
font-family: Georgia;
font-size: 22px;
font-weight: bold;
margin-right: 10px;
-moz-transition: .3s ease-in-out;
-o-transition: .3s ease-in-out;
-webkit-transition: .3s ease-in-out;
}
.drop-menu:hover {}
.drop-menu:hover .sub-menu {
display: inline-block;
}
.drop-menu:hover .plus {
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
.sub-menu {
background-color: #242F3A;
background:image: -moz-linear-gradient(100% 100% 90deg, #000000, #242F3A);
background-image: -webkit-gradient(linear, left bottom, left top, from(#000000), to(#242F3A));
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#FF242F3A', EndColorStr='#FF000000');
border: 1px solid #343F4A;
display: none;
border-top: none;
margin-left: -11px !important;
margin-top: 5px;
padding: 10px;
width: 300px;
}
.sub-menu li {
display: block;
font-size: 20px;
height: 22px;
list-style-type: none;
padding: 8px 0;
}
.sub-menu li img {
margin-right: 10px;
vertical-align: top;
}
.sub-menu li:hover {}
.sub-menu a {
color: #DDD;
font-size: 20px;
font-family: Tahoma
}
.sub-menu a:hover {
color: #ABC;
}

REFERENCIAS:webstuffshare.com

32 comentarios:

Esteban  

Muy interesante el menú JMiur, gracias por compartirlo ;)

Abrazo.

Responder
JMiur  

Hola Pepiche :D Si, es bueno, muy sencillito.

Responder
Unknown  

Un encanto: delicado y sencillo :)
Buen comienzo de lunes.

Responder
Cendrero (Adm. El Busto de Palas)  

Buenísimo el truco, con un aspecto genial, en cuanto pueda lo aplicaré a mi blog. Pero tengo una duda JMiur, supongo que para ti será algo muy sencillo ;)

Con el HTML tengo algo de práctica, pero respecto al lenguaje CSS soy un completo ignorante. He probado a ponerlo pero he tenido unos cuantos fallos. A causa de ello me ha surgido una duda bastante tonta: ¿Dónde pongo el código CSS? ¿Detrás del HTML? ¿Delante? ¿Dentro? Estoy hecho un lío en ese punto, el resto creo que lo entiendo. Muchas gracias de antemano :D

Responder
Gem@  

Me gusta porque ahorra espacio para las suscripciones :)

Responder
Manuel Alberto  

Bilo, bell'isimo... :P

Responder
JMiur  

Cendrero:
En Blogger pedes ponerlo dentro de <b:skin> </b:skin> y sino, simplemente dentro de etiquetas:

<style>
....... aquí las definiciones y propiedades
</style>

En ambos casos, antes de </head>

Buen lunes martes miércoles y todo el resto, Graciela :D

Gem@:
Es interesante, bastante sencillo de compatibilizar con cualquier otro.

Responder
Cendrero (Adm. El Busto de Palas)  

Muchísimas gracias por la aclaración JMiur, qué ignorancia la mía :( Ya lo he probado en un blog de pruebas y me funciona a la perfección, todo en orden. De nuevo te doy las gracias por el truco.

Responder
Unknown  

The element type "img" must be terminated by the matching end-tag "". :S
Dónde está el error si lo copié y pequé tal cuál? :S

Responder
JMiur  

Fíjate que la etiqueta IMG tenga la barra inclinada de cierre.

Responder
Unknown  

aqui nadamas para felicitarte por el blog y decirte que gracias por el menu desplegable me gusto mucho,saludos.
gdi

Responder
KIRA  

podrias decirme como lo hago para ke salgan los sub menus en vertical?.
o para que pongo varios menus .. y ke los submenus desplazen al menu debajo, para que no se oculte.

Responder
JMiur  

No entiendo la pregunta, muestrame un ejemplo.

Responder
Cendrero (Adm. El Busto de Palas)  

Hola JMiur, vengo de nuevo para una duda sobre la personalización del objeto.

Me gustaría cambiar la imagen que se gira al desplegar el menú (el signo "+" que gira y se convierte en una "x") por otra (por ejemplo, un icono de suscripción de RSS). ¿Se puede hacer eso? ¿Cómo? Muchísimas gracias, esta es mi última duda y no volveré a molestar :S

Responder
JMiur  

Es lo definido en el SPAN de clase plus. Puede cambairse cualquier cosa pero los detalles dependerán de los diseños personales de cada uno, no hay una respuesta general.

Responder
Felipe Calvo Cepeda  

Se ve bastante bien...
He estado pensando... y te pregunto si no sería posible utilizar el efecto slide de Prototype + Scriptaculous para lograr algo similar...
Asi como tenemos el efecto de expandir y contraer partes de un post...
Si cambiamos el onclick por onmouseover o por onfocus... y jugando con algo de css y maquetacion... ¿no se podría lograr algo por el estilo? :)

Responder
JMiur  

Todo es posible. Por ejemplo, los enlaces de la sidebar de este blog, en la parte de Autopromo, funcionan con el efecto toggle de Scriptaculous.

kawsaqi  

hola jmiur, eres una grande en esto,, quisiera hacerte una consulta, cómo logro hacer el efecto como tu sidebar de autopromo. tienes algún tutorial de eso,, mil gracias,, saludos j.jeanpiere

JMiur  

Efectos deslizantes hay muchso. Depende de lo que uses en tu sitio:

con jQuery
con Scriptaculous
sin librerías
más simples

Responder
Felipe Calvo Cepeda  

Ahh bueno... entonces haré pruebitas a ver que cosa bonita sale.. jaja :)

Responder
Capitan Macu  

Muy bueno el blog y excelente el desplegable. Una duda ¿es posible que no funcione con IE6?

Responder
JMiur  

¿En Internet Explorer 6? Vaya uno a saber; tampoco creo que tenga la menor importancia si funciona o no funciona en un navegador que hace rato que pasó a la historia.

Responder
Unknown  

hola, tengo un foro y este menú me ha venido a las mil maravillas, pero tengo un problemilla. Levo buscando un menu como este 2 semanas, y ya lo he encontrado, pero el problema de éste esque ocupa una línea entera, y yo necesitaría un menú y al lado otro. Hay alguna forma de modificar este menú para que solo ocupe el cacho del mismo y asi poder poner varios seguidos en la misma linea? Muchas gracias y enhorabuena por haber creado un grab blog.

Responder
JMiur  

Este en particular no ocupa todo el ancho sin oel ancho definido que en este caso es width: 300px;.

Como utiliza clases, pueden agregarse varios en una misma página y para que uno esté al aldo del otro, bastaría por ejemplo, agregarle la propeidad flaot al contenedor:

.drop-menu {
.......
float:left;
}

Responder
Unknown  

bueno

Responder
@Anabel_Osuna  

Tengo una pregunta ¿Como hago para que el submenu salga hacía arriba en vez de hacía abajo? Gracias de antemano.

JMiur  

Tal vez, agregando
.sub-menu {
.......
position: relative;
top:valorpx;
}
donde el valor de top es un número negativo que dependerá de la altura que tenga ese submenú.

Responder
Lupis G  

Una pregunta JMiur, primero que nada muchas gracias por compartir tu menu, esta muy practico y lindo, ya lo adapte a lo que ocupo (las medidas y todo) pero tengo un detalle ... en IE simplemente no se ve .. yo lo estaba haciendo en chrome, pero queria revisar (porque ya me habia pasado), si no se habia desacomodado algo y zas, que no se ven :L

JMiur  

No ´se cuál es tu ejemplo.

El menú de esta entrada se ve normal en IE.

Responder
Sergio Flores  

Hay veces que me pregunto "¿Qué era de mi vida en ese tiempo?" cada vez que veo un post interesante que fue publicado varios años atrás.
Se agradece, me será útil para una que otra idea.
Gracias JMiur, salu2!

Responder
Anónimo  

how i can make the first one clickeable?

JMiur  

You have to use JavaScript.

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