JMiur [E]

Este es el modelo de un menú desplegable que sólo requiere CSS y fue publicado por aex.net. Allí, podemos descargar los archivos necesarios para reproducir el demo online.

Con muy pocas modificaciones, podemos adaptarlo a cualquier página; por ejemplo, en este caso, le he quitado la parte de las transparencias para que sea más visible:





Como en la mayoría de los casos, hay dos partes; el HTML es muy simple y se basa en una serie de listas donde, los items con la clase drop son desplegables:
<ul class="menu">

<!-- este es un item simple -->
<li><a href="URL_enlace">ITEM SIMPLE</a></li>

<!-- así, construimos un item desplegable -->
<li class="drop">
<a href="#">ITEM DESPLEGABLE</a>

<!-- este es el ícono que puede ser cualquiera -->
<span class="toggle">&nbsp;</span>

<!-- el submenú que se despliega -->
<ul>
<li><a href="URL_enlace1">TEXTO ENLACE 1</a></li>
<li><a href="URL_enlace2">TEXTO ENLACE 2</a></li>
<li><a href="URL_enlace3">TEXTO ENLACE 3</a></li>
</ul>
</li>

</ul>
EL CSS tampoco es complicado aunque es un poco engorroso y es la clave de todo:
ul.menu { /* es la lista principal */
background-color: #A9A9A9;
float: left;
list-style-type: none;
margin: 0;
padding: 0 20px;
}

ul.menu li { /* cada item de la lista principal */
border: 2px solid #A9A9A9;
display: block;
float: left;
height: 30px;
margin: 0;
padding: 0;
position: relative;
}
ul.menu li:hover { /* efecto hover sobre los items de la lista principal */
-moz-border-radius: 4px;
background-color: #000;
border:2px solid #A9A9A9;
}
ul.menu li a { /* cada item de la lista principal es un enlace */
color: #FFF;
display: block;
float: left;
font-weight: bold;
line-height: 18px;
padding: 6px 15px 5px;
text-decoration: none;
}

/* el ícono para desplegar el menú */
ul.menu li a span {
font-weight: normal;
padding-left: 3px;
}
ul.menu li.drop a {
padding-right: 7px;
}
ul.menu li.drop:hover li {
border: none;
}
ul.menu li.drop span.toggle {
background: transparent url(URL_toggle.png) no-repeat scroll 0 -20px;
display: block;
float: left;
height: 26px;
margin: 0 5px;
padding: 0;
width: 20px;
}

/* los efectos al pasar el ratón que desplegarán el submenú */
ul.menu li.drop:hover {
-moz-border-radius-bottomleft: 0;
-moz-border-radius-bottomright: 0;
-moz-border-radius-topleft: 4px;
-moz-border-radius-topright: 4px;
}
ul.menu li.drop:hover ul {
display: block;
padding: 0 0 10px 0;
z-index: 1;
}

ul.menu li ul { /* la lista con el submenú */
background-color: #555;
display: none;
left: 0;
list-style-type: none;
margin: 0;
padding: 0;
position: absolute;
top: 30px;
width: 100%;
}
ul.menu li ul li { /* cada item del submenú */
border: none;
float: none;
height: auto;
margin: 0;
padding: 0;
}
ul.menu li ul li a { /* cada item del submenú es un enlace */
background-color: transparent;
color: #DDD !important;
display: block;
float: none;
font-size: 13px;
font-weight: normal;
height: auto;
margin: 0;
padding: 5px 15px;
}

/* efectos sobre los items del submenú */
ul.menu li:hover ul {
-moz-border-radius-bottomleft: 4px;
-moz-border-radius-bottomright: 4px;
border: none;
background-color: #555;
}
ul.menu li:hover ul * {
-moz-border-radius: 0;
background-color: transparent;
}
ul.menu li ul li:hover {
background-color: #000;
}

25 comentarios:

Ciberwing  

ojo que por usar li:hover no funciona en IE6... no sé si en 7 funke.

Responder
JMiur  

Ahhh ni idea si funciona en IE6, es hora que actualicen un navegador que tiene demasiados años. No tiene ningún sentido brindar soporte para el IE6 y de hecho, ya son muchos los sitios que no lo dan. No hay motivos valederos para seguirlo utilizando.

Responder
Gem@  

¿Pero todavía hay personas que usan IE6? ¿saben que ya salió la versión IE8?

Responder
La Dueña  

Gracias!!!! voy a usarlo en el blog de mi negocio para hacerlo parecer más profesional.

Responder
Prof. Cristian E. Moyano  

Aunque me agrade éste menú, yo prefiero el menú desplegable que posteaste hace bastante ya, que también era sólo con CSS y se podía hacer de manera online, personalizable, a gusto y con varios submenúes y links..sin embargo éste no está mal para entender el funcionamiento del mismo.

Responder
JMiur  

Gem@: Pués así es. Creo que hay que darle un corte definitivo a eso y simplemente, ignorarlo. Quien quiera, puede usarlo pero, deberá saber que estará limitado, que habrá cosas que verá mal. Los sitios deberían eliminar cualquier hack para IE6. Es como tener hacks para que las paginas se vean bien en Mosaic :D

La Dueña: Verás que es simple de hacer, el CSS es largo pero nada más. De lo mejor que he visto.

Malina: ¡¡¡¡¡¡¡ Feliz Navidad para ti !!!!!!!!!! :D
Claro, el script no funcionará porque sólo sirve para sitios de Blogger, cada RSS tiene su propio esquema. Ahora bien, ¿ese índice lo quieres leer desde Blogger? Ahí las cosas se complican. Algo que se me ocurre es Google AJAX Feed API. Pero noes un tema sencillo porque hay que usar JavaScript; si tuvieras la posibilidad de usar PHP, sería más sencillo aunque, en todos los casos, la cantidad de entradas a ser mostradas, siempre es limitada.

Responder
Chary Cirujano  

Estos días son muy complicados para mi, no por nada, si no por exceso de trabajo, así es que, por si no me da tiempo, quiero enviarte mis mejores deseos para ti y a los tuyos ¡Felices Fiestas!
Un abrazo enorme

Responder
Bonzu Pipinpadaloxicopolis III  

Me gusta es menú, tal vez lo use, pero por ahora me quedo con el que tengo.

Responder
JMiur  

Garcias, laMar. Muy felices fiesta para ti también :D

Bonzu: hay para todos los gustos :)

Responder
La Dueña  

Te hago una consulta de pura inexperta: ¿el código CSS se pega antes de /head?

Responder
JMiur  

Sería lo mejor, La Dueña. Puedes hacerlo dentro la parte general, con el resto, entre <b:skin> y </b:skin> o bien entre etiquetas style:

<style>
..........aqui pones el CSS
</style>

Responder
Esteban  

Excelente post JMiur, justo estaba usando un template con menú arriba que me permitirá hacerlo desplegable, pero no aún porque mi blog está nuevito y tengo que poner más categorías (y por ende, posts).

Abrazo!

Responder
JMiur  

Me alegro que sirviera, Esteban. Suerte con el blog :)

Responder
JMiur  

Feliz Año, Malina :D

Responder
Bilosony2™  

Jmiur te cuento que e instalado ya hace un tiempo un menu desplegable con Jquery lo personalise todo hiba muy bien en todos los navegadores hasta hace pocos dias que en IE cuando pones "vista de compativilidad" el fondo del menu ya no aparece, intente de todo pero nada no me permite poner ningun tipo de fondo, que crees que pueda ser??


Saludos!!!

Responder
JMiur  

Si la Vista de Compatibilidad es con IE7, es posible que no funcione porque, simplemente, no está pensado para versiones inferiores a la 8.

Responder
Bilosony2™  

Pasa que el menu supuestamente funciona corectamente asta con IE6 y e podido comprobarlo, hasta ase unos dias andava perfecto noce que sucedio que de un dia para el otro todo empeso. Es mas me fijado en otros sitios que utilisan el mismo menu aver si tenian el mismo problema, y les anda perfecto, realmente noce que sera y me tiene de cabeza el problema te dejo unos link de las paginas que usan el mismo menu para que puedas comprobar.

http://www.dynamicdrive.com/dynamicindex1/ddsmoothmenu.htm

http://ciudadbloggerpruebas2.blogspot.com/


Saludos!!

Responder
JMiur  

Como nunca lo he usado, no sabría decirte cuál es el problema.

Responder
Unknown  

Hola, buenos dias, primero felicitar JMiur por el excelente blog que tiene, y segundo comentar mi pequeño problema, estoy diseñando una pagina web en dreamweaver 8 y he colocado un menu desplegable con Java, el problema es que cuando pruebo todo el sitio Web en modo LOCAL, al principio me abre las paginas pero no se porque despues me abre la carpeta donde tengo los ficheros, estoy algo perdido. Gracias por la colaboracion de antemano.

Responder
JMiur  

Trabajando en modo local, desconozco las URLs a las que apunta cada enlace ni cómo esta armado el sitio.

Responder
Mega  

oye pero como go para agregarlo a mi web?

Responder
JMiur  

Es lo que explica el post.

Responder
Loli  

Hola:
Acabo de probar el código y funciona perfectametne en Firefox, en cambio en ie9 me aparece toda la pantalla en blanco. Si alguien pudiera ayudarme, lo agradecería muchísimo. Si tengo que poner el código que he utilizado, por favor indicarme donde he de ponerlo.
Gracias y saludos.

Responder
JMiur  

No puedo verificar nada en IE9 porque no tengo ese navegador. Culpa de Microsoft que se a encaprichado en no permitir instalarlo en XP.

Responder
Gem@  

Yo puedo mirar Loli pero no tienes el perfil activado y es imposible :S

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