JMiur [E]

Este es un menú desplegable que usa las características del CSS3 y que sólo requiere de una imagen. Lo interesante es que funcionará tambien en navegadores como Internet Explorer, aún cuando estos no soporten las nuevas propiedades; la única diferencia es que no se verán ni sombra ni bordes redondeados ni sombras.

Como siempre, el estilo hay que ponerlo antes de </head> y allí, podremos cambiar los detalles.





El HTML es una serie de listas anidadas y alli, sólo debemos tener cuidado para que las etiquetas queden correctamente cerradas. El código del ejemplo es el siguiente:
<ul id="nav">
<li class="current"><a href="javascript:void(0);">Inicio</a></li>
<li>
<a href="javascript:void(0);">Menu 1</a>
<ul>
<li>
<a href="javascript:void(0);">Sub Menu 1.1</a>
<ul>
<li><a href="javascript:void(0);">Sub Menu 1.1.1</a></li>
<li><a href="javascript:void(0);">Sub Menu 1.1.2</a></li>
<li><a href="javascript:void(0);">Sub Menu 1.1.3</a></li>
<li><a href="javascript:void(0);">Sub Menu 1.1.4</a></li>
</ul>
</li>
<li>
<a href="javascript:void(0);">Sub Menu 1.2</a>
<ul>
<li><a href="javascript:void(0);">Sub Menu 1.2.1</a></li>
</ul>
</li>
<li><a href="javascript:void(0);">Sub Menu 1.3</a></li>
<li><a href="javascript:void(0);">Sub Menu 1.4</a></li>
</ul>
</li>
<li>
<a href="javascript:void(0);">Menu 2</a>
<ul>
<li>
<a href="javascript:void(0);">Sub Menu 2.1</a>
<ul>
<li><a href="javascript:void(0);">Sub Menu 2.1.1</a></li>
<li><a href="javascript:void(0);">Sub Menu 2.1.2</a></li>
<li><a href="javascript:void(0);">Sub Menu 2.1.3</a></li>
</ul>
</li>
<li><a href="javascript:void(0);">Sub Menu 2.2</a></li>
<li><a href="javascript:void(0);">Sub Menu 2.3</a></li>
<li>
<a href="javascript:void(0);">Sub Menu 2.4</a>
<ul>
<li><a href="javascript:void(0);">Sub Menu 2.4.1</a></li>
<li><a href="javascript:void(0);">Sub Menu 2.4.2</a></li>
<li><a href="javascript:void(0);">Sub Menu 2.4.3</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="javascript:void(0);">Menu 3</a></li>
<li><a href="javascript:void(0);">Menu 4</a></li>
</ul>

95 comentarios:

Unknown  

Qué impresionante se vé!

Responder
Diego M  

Excelente pagina, estoy iniciando con esto de las paginas web y aqui he encontrado bastante información importante y muy bien explicada. Muchas gracias y te felicito por este excelente trabajo.

Responder
Unknown  

Precioso Jmiur, delicatéz de menú :D

Responder
Maite  

Uy! este me encanta hasta en IE! en Fire es espectacular y eso que es CSS, comodísimo para modificar si queremos! Qué facil "parece" todo contigo :D
Gra, nos volvemos locas como un día queramos poner todo lo que nos gusta jajaja

Responder
EM2.0  

Elegante a la par que discreto, me gusta.

Responder
Gem@  

Todo lo que trabaja con CSS es una gran ventaja. Me gusta :)

Responder
Josep  

Muy interesante.Dos comentarios:

Una observación: en el código, hay que modificar el final para cerrar: /style

Y una pregunta: para poder ajustarlo a la derecha de la página, acortándolo, ¿hay que jugar con line-height * % ?¿O debo jugar con margin?

Gracias.

Responder
Mun2  

Excelente Amigo Mucha gracia es bastante Atractivo el diseño

Responder
Unknown  

Lo hace fácil, algunas cabezas duras como io lo molestan y molestan :) todo nooo dice Jmiur, estas chicas me vuelven loco :$

Paso a buscarte el fin de semana Minimimo?

Responder
JMiur  

Muy elegante, esa es la palabra.

Josep: Se dimensiona con width y se posiciona con float pero, dependerá del resto de la plantilla:

#nav {
.......
float:right;
width:VALORpx;
}

Graciela: "Moleste" nomás :D

Responder
Unknown  

Vamos a dejar tus neuronas tranquilas por unos días, ya tengo qué preguntarte:P

Responder
Maite  

Pasame a buscar! sisisi! Dios las cría y ellas se juntan jajaja
Ah... hola JMiur, qué tal, tú por aquí... :D

Responder
José GDF  

Algo así quiero hacer con el menú. Me voy a basar en tu idea, a ver si hago el menú de una vez, que el único quebradero de cabeza que quiero tener con él es "qué enlazar en él"...

Responder
JMiur  

Graciela, Maite:
Si vienen de a dos, no vale :D

Suerte, José :)

Responder
Unknown  

"Dios las cría, Ellas, se Juntan" las andanzas de mujeres en un blog de un chico con paciencia para aguantarlas. jajaja

Te paso a buscar por la tarde, nos vamos sabe el Cielo donde! ya que parece que la gente de la Bolsa lo hace por la noche, trataremos de investigar ;) :P

Responder
JMiur  

Oh sí, somo aves de hábitos nocturnas :D

Responder
Boris Vasquez  

WTF que buena pagina

Responder
Carlos Martínez  

Hola... como esta? estoy implementando esto en un nuevo blog que estoy haciendo pero ocurre algo interesante, desde que lo aplique la plantilla se desfaso por completo, no he cambiado sus colores ni nada puesto que es primero deberia solucionar este pequeño detalle, no se como resolverlo por eso pido ayuda.... Este es el blog... De antemanos gracias!!

PD: lo de la imagen con zoom ya resolvi, segui con fancyzoom, aunque para php utilizo lightwindow.

Responder
JMiur  

No sé a qué te refieres exactamente con eso del desfasaje. Lo que le falta, es definir propiedades CSS para ubicarlo, depende de donde quieras que se vea. Eso lo puedes hacer en #nav {} o en el DIV contenedor donde lo has insertado #crosscol-wrapper {}.

Responder
Carlos Martínez  

Veras, a lo que me refiero es que la plantilla se esta repitiendo, no termina donde deberia terminar, el menú esta bien y ya lo ubique donde va, solo que desde que lo tengo la plantilla no termina donde debe, como si se repitiera y no llegara a su fin

Responder
JMiur  

No comprendo la explicación porque no conozco el diseño original; así, a simple vista, la única diferencia es que el menú está sobre una parte de la imagen del header y la tapa.

También veo que tienes una etique de </style> antes de &/b;skin> y eso hace que arriba de todo se vea un símbolo: --<

Responder
Carlos Martínez  

Sabes, extrañamente se ha arreglado, no he tocado la plantilla y se acomodo el problema, era que se repetía el contenido de la página al final de la plantilla pero ya se arreglo.... este blogger es un mar de enigmas poco comunes... gracias de igual forma, de verdad gracias por tener un blog de estos de ayuda muy útil :)

Responder
BM  

Hola! Gema me pasó el link a esta entrada porque tengo problemas con un menú dropdown, y vió que esto puede ayudarme. Si podés por favor orientame un poco en lo siguiente: quiero agregar mas niveles al menú, lo que vos marcaste como submenú 1.1.1 por ejemplo, pero el que implementé solo tiene dos. Probé guiandome con este ejemplo pero no me sale, espero puedas ayudarme. Tenía ganas de conservar el que puse! El blog es www.bmeni-web.blogspot.com
Mil gracias.

Filigrana.

Responder
JMiur  

Podrías copiar y pegr el ejemplo del post para ver el esquema que siempre es el mismo. Difícil de mostrar en un comentario. Cada item es una etiqueta LI. Dentro e esa etiqueta se puede abrir otra lista:

<li> sin abrir </li>

<li> se abre
<ul>
<li> primer nivel </li>
</ul>
</li>

<li> se abre
<ul>
<li> primer nivel
<ul>
<li> segundo nivel </li>
</ul>
</li>
</ul>
</li>

Responder
BM  

Sos un genio mil mil gracias! Por fin entiendo como funciona eso ahora voy a poder, gracias! :D

Responder
JMiur  

Es fácil de entender si usas TABs o algo así para ir anidando las etiquetas y viendo como es que una está dentro de la otra. En estos menus, es muy pero muy fácil equivocarse.

Responder
Brixton Records  

Hola JMiur: Estoy probando este menú desplegable y veo que:

a) si se despliega sobre un texto o imagen (por ejemplo de la entrada situada inmediatamente bajo el menú) todo va bien

b) pero si la entrada comienza con un vídeo incrustado de YouTube, el menú se despliega por debajo dél reproductor de video (y no puede verse en su totalidad)

¿Hay alguna manera de solucionar esto? Gracias.

Responder
JMiur  

Eso va a ocurrir siempre que se use el código que da YouTube y que incluye la etiqueta EMBED; sin embargo, un código válido que no la utilice, solucionaría el problema. Por ejemplo:

<object width="640" height="385" data="http://www.youtube.com/v/mXATtUVvPSk">
<param name="movie" value="http://www.youtube.com/v/mXATtUVvPSk"/>
<param name="allowFullScreen" value="true"/>
<param name="allowscriptaccess" value="always"/>
<param name="wmode" value="transparent" />
</object>

Responder
Brixton Records  

No puede decirse más claro: "Los objetos de Flash se posicionan por encima de cualquier otro y eso provoca que en ciertos casos, algo que debería estar "arriba" quede oculto por el video mismo". Recuerdo que al leer la entrada pense en utilizar el Código Válido pero por pereza lo dejé para más adelante. Ahora no tengo excusas. Muchas Gracias.

Responder
Unknown  

Hola JMiur, aqui de nuevo molestandote una vez mas. Gracias por las aclaraciones, ya pude implementar los bordes redondeados en los extractos de Magazine compatible con IE8, ahora me preguntaba como podia utilizar el mismo Script para este menu con CSS y mi dificultad esta en reconocer las clases, por ejemplo.

/* el menú es una lista */
#nav {
background: #678 url(URL_gradient.png ) repeat-x 0 -110px;
line-height: 100%;
margin: 0;
padding: 7px 6px 0;
border-radius: 13px;
-webkit-border-radius: 13px;
-moz-border-radius: 13px;
-webkit-box-shadow: 0 1px 3px rgba(0,0,0, .4);
-moz-box-shadow: 0 1px 3px rgba(0,0,0, .4);
}

Dentro del codigo anterior, cual seria la clase, para aplicar el script


DD_roundies.addRule('.Aqui-Clase', '13px');


Espero me comprendas. SALUDOS y GRACIAS ...!

Responder
JMiur  

No tiene clases así que deberás agregarlas en cada etiqueta que quieras "curvar":

<ul id="nav" class="nav">

<li class="navLI">

<a class="navLINK">

Usa cualquier nombre para definir esas clases y luego usas ese nombre en el script.

Responder
Unknown  

Hola JMiur, por favor podrias darme un ejemplo con la clase ya agregada podrias utilizar la etiqueta anterior que te mencione. Ya que al tratar de agregar lo estoy haciendo mal y lo que genero es que desaparesca el menu. Por favor, solo un ejemplo me seria de mucha ayuda. SALUDOS y GRACIAS GRACIAS ...!

Responder
JMiur  

No. No es tan simple como eso; hay que probar caso por caso. Deberás ir viendo cada etiqueta e incluso, es posible que sea imposible compatibilizar con algo como este menú o deebría rehacerse por completo.

Responder
Unknown  

Es lo que me temia ya que hice varias pruebas y nada, de todos modos gracias por tus consejos y si me pudieras recomendar un menu que se bonito(de preferencia bordes redondeados) y compatible con internet explorer 8 te lo agradeceria mucho. SALUDOS ....!

Responder
Kelly  

Genial, muy bueno, pero tengo un problema que cuando pongo el cursor sobre cada pestaña, las subpestañas no se me aparecen, es como si algo estuviera delante de ellas y no me las dejaran ver. ¿Podrías ayudarme con esto?

Responder
JMiur  

Si tienes un ejemplo que pueda ver, me fijo.

Responder
Kelly  

Ok dale.
Bueno siguiedo la forma que se publicó en este blog obtuve esto:

http://img823.imageshack.us/img823/1422/50798439.jpg

La supestaña está allí pero está como tapada por la entrada. La cambié de lugar y obtuve esto:

http://img822.imageshack.us/img822/7650/22385630.jpg

Así parece mejorar un poco pero hay ciertas subpestanas a las que ni siquiera puedo colocar el cursor sobre él.

Una forma más clara de la siguiente:

http://img812.imageshack.us/img812/6311/67508851.jpg

Ahí se ve bien claro. entonces yo preguntaba si me podrías ayudar.

PD: Soy medio nueva en esto de los blogs, así que te dejé las imágenes de esta manera. Ojalá me puedas ayudar, me volví loca intentado saber el por qué ocurre esto xD

Responder
JMiur  

En esas nuevas plantillas de Blogger no sabría decirte porque son infernales. Muy confusas y llenas de cosas pred-definidas cuya utilidad es un misterio.

Responder
necron58  

Una pregunta, se puede hacer esto en un menu lateral? Me imagino que si, pero solo poniendo un codigo a la vez por separado, aunque pueda estar equivocado, ya que no se mucho de codigos.

Responder
necron58  

Es posible hacer esto con un menu lateral hacia abajo? o es mejor usar la opcion que hay en "Otro menu desplegable con con CSS"?

Responder
JMiur  

Puede ser colocado en cualquier parte del blog lo que ocurre es que para que se vea de manera vertical, deberías cambiar bastantes cosas. En ese sentido, el otro al que te refieres es más fácil porque ya está pensado para que se vea de modo vertical.

Responder
emu  

Soy bastante nuevo en esto y estoy haciendo pruebas para hacer un blog.
El menú queda muy bien y es lo que buscava, pero yo tengo un par de problemas.
El primero es que sólo puedo seleccionar el primer submenú. Al intentar apretar el segundo desaparece.
Y segundo, al abrir el menú se ve lo que hay debajo, con lo cual no se puede leer bien el menú.
Gracias de antemano.

Responder
JMiur  

Desaparece porque estás usando las nuevas plantillas de Blogger que están llenas de propiedades y reglas de estilo automáticas que sólo perturban. Agrega esto:
#nav {
.......
position: relative;
z-index: 1000;
}

Lo de abajo lo ves porque estás usando imágenes transpaentes o semitrasnparentes como fondos.

Responder
emu  

Gracias genio!!! Funciona!!!!!

Responder
emu  

Otra cosita, para que quede perfecto.
Cuando te pones encima del menú 1, 2,... se resalta el botón pero las letras no se leen bien.

Responder
JMiur  

Eso es algo que deberás adatar a tu gusto; en este caso, depende de las propeidades text-shadow que hayas usado y de los colores que hayas elegido.

Responder
emu  

OK, no sabía donde tocar.
Solucionado.

Muchisimas gracias por todo.

Responder
Shalo  

hola!...
yo pongo este menu pero me sale como todo feo, de pronto no estoy haciendo algo bn
te dejo el link del blog para que veas
http://ensayoiraka.blogspot.com/

Responder
emu  

Ostras, Shalo, ¿como lo has puesto de punta a punta? Si lo pongo así no se me ve. Yo lo he tenido que poner encima de las entradas.

Supongo que lo que dices que te pasa es lo que me pasaba a mi. Con permiso de Vagabundia te explico lo que he hecho:

En el codigo que has pegado, buscas "efecto hover en el Nivel Principal", un poco más abajo cambias el "text-shadow" por este otro "text-shadow: 0 1px 1px rgba(255,255,255, .3);"

Espero que te vaya bien.

Responder
Shalo  

bueno... ya le puse las imagenes de degradado, pero otra preguntica... como hago para separarlo de la sidebar y la otra cosa (donde salen las entradas)... y que se vea un poco mas junto del titulo

Responder
JMiur  

Shalo :
No veo nada malo en lo que está en tu blog. No sé qué es l oque ves tú.

Responder
Shalo  

Gracias emu! puse un HTML encima de las entradas y eso ocupa todo el espacio

Jmiur! es q tenia q poner una imagen donde estaba esto
background: #678 url(URL_gradient.png ) repeat-x 0 -110px;
pero no me había dado cuenta, y se veía raro... osea no como el de aquí

la otra cosa creo q ya te lo comete... separar el menú de las entradas... q la sombra se ve cortada... y de pronto juntarla a la imagen del titulo

Responder
JMiur  

La posición la puedes controlar con:

#nav {
.......
margin-top: VALORpx;
margin-bottom: VALORpx;
}

colocando un VALOR en margin-bottom se separa de lo que está abajo.

Hacia arriba no puede subirse salvo qe uses márgenes negativos. En todo caso, busca y agrega esto:

#header-wrapper {
.......
display: none;
}

Ya que ese, es un elemento que no está usando pero, ocupa un espacio. También, si quieres, simplemente puedes eliminarlo.

Responder
Shalo  

Gracias JMiur

Responder
Amador López Criado  

Gracias de nuevo, maestro. Y también por el botón de Beatlemanía. No sé cuánto tiempo lleva, pero acabo de descubrirlo ahora. ¡Una gozada!

Responder
JMiur  

Gracias, Amador.

Ese botón sólo llva apenas unas horas puesto allí :-)

Responder
emu  

Hola de nuevo, JMiur.
Estoy intentando hacer algun cambio en el blog. Quiero poner el menú arriba del todo, pero no se me despliega. Donde estaba antes funciona perfectamente (encima de las entradas). Y sólo lo he arrastrado.
He intentado tocar algo pero como no tengo ni idea...
Dejo en el blog los dos menús, el que funciona y el que no, por si quieres ver lo que te digo.
http://emuzcar.blogspot.com/
Mil gracias.

Responder
JMiur  

Eso pasa porque está en otro DIV que queda tapado por el inferior pero, en esas plantillas nuevas, no sabría decirte cuál es la solución. Tienen propiedades CSS muy estrafalarias.

Responder
emu  

Vaya, tendré que dejarlo como antes. Iré haciendo pruebas, a ciegas por que no tengo ni idea, a ver qué pasa.
Gracias de todas maneras, y también gracias por tener éste blog. Sirve de mucha ayuda.

Responder
JMiur  

No digo que no sea posible solucionarlo. Sólo que no se me ocurre forma de hacerlo. Todo lo que he podido probar no funciona pero, en alguna parte debe estar la solución.

Responder
Zeodas  

Hola que tal. el menu esta superbueno! hace tiempo vengo tratando de agregar un menu asi. Estoy haciendo pruebas en un nuevo blog y tengo un problema visual con el menu, pareciera que las imágenes de la sombra quedaron por arriba, o algo así, no estoy seguro. Si pudieras mirarlo te estaría muy agradecido! http://cinezeodas.blogspot.com/

Responder
JMiur  

Es probable que eso ocurra porque te falta la imagen del fondo; debes descargarla, alojarla en alguna parte y luego reemplazar esto: URL_gradient.png por la URL de la imagen real.

Responder
Zeodas  

Era eso! ya se ve correctamente! mil gracias

Responder
JMiur  

Perfecto, Zeodas.

Responder
Zeodas  

hola que tal. disculpa la molestia pero tengo una duda, hay manera de que la opción del menu haga referencia a mas de 1 tag? dirblog/search/label/tag1+tag2 o algo así?

Responder
JMiur  

No que yo sepa, Zeodas.

Responder
pvillegasy  

Hola Jmiur, lo implmenté en mi blog de prueba, inclusive he probado varioas alternativa, pero no se porque el menú cuando se despliega queda detrás del contenido de mi blog o no pasa del gadget que lo contiene, por favor si puedes mira mi blog de prueba http://pvillegasy.blogspot.com, te agradezco tu ayuda...

Responder
JMiur  

Con esas plantillas de nuevo estilo, no sabría decirte. están llenas de propiedades y divs por defecto que son demasiado engorrosos para analizar.

Responder
legolas_bilbao  

Copiando el código, no se me despliega en mi página preparada el submen, ¿cuál puede ser problema?

Responder
JMiur  

No sé cuál es tu ejemplo.

Responder
legolas_bilbao  

mi código es el siguiente

ul id="menus"
li clas ="current"
a href="index_nuevo.php" clas="enlaces" Inicio
li
li
a href="#" Club Norteño
ul
li>a href="origenClubNortenyo.php" Origen li
li>a href="colaboradores.php" Colaboradores li
li>a href="./foro" Foro li
li>a href="./noticias" Noticias li
/ul
li
li
a href="#" Liga Norteña
/li
li
a href="#" Eventos
/li
/ul


código CSS

#menus{
position:absolute;
position:absolute; color:#FFF; font-weight:bold;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-top-radius: 5px;
border: 1px solid #030;
cursor : pointer;
padding:5px 19px 0px;
background:-webkit-linear-gradient(#033,#036D2E);
background: -moz-linear-gradient(#033,#036D2E);
background: -o-linear-gradient(#033,#036D2E);
font-size:14px;
margin-left:10px;
top:-5px;
}

#menus li{
float:left;
position:relative;
list-style:none;
margin:0 10px;
padding:0 0 8px;

}

#menus a{

font-weight: bold;
color: #e7e5e5;
text-decoration: none;
display: block;
padding: 0px 5px;
margin: 0;
-webkit-border-radius: 1.6em;
-moz-border-radius: 1.6em;
text-shadow: 0 1px 1px rgba(0, 0, 0, .3);

}

#menus .current a, #menus li:hover > a {

background: #090; /* for non-css3 browsers */
border-top: solid 1px #f8f8f8;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
box-shadow: 0 1px 1px rgba(0, 0, 0, .2);

}

#menus ul li:hover a, #menus li:hover li a {
background: none;
border: none;
color: #666;
-webkit-box-shadow: none;
-moz-box-shadow: none;
}

#menus ul a:hover {

}
/* level 2 list */
#menus ul {


display: none;
margin: 0;
padding: 0;
width: 185px;
position: absolute;
top: 35px;
left: 0;
border: solid 1px #b4b4b4;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;


}
/* dropdown */
#menus li:hover > ul {
display: block;
}

/* rounded corners for first and last child */
#menus ul li:first-child > a {
-webkit-border-top-left-radius: 9px;
-moz-border-radius-topleft: 9px;
-webkit-border-top-right-radius: 9px;
-moz-border-radius-topright: 9px;
}
#menus ul li:last-child > a {
-webkit-border-bottom-left-radius: 9px;
-moz-border-radius-bottomleft: 9px;
-webkit-border-bottom-right-radius: 9px;
-moz-border-radius-bottomright: 9px;
}



Pero no me funciona el evento para mostrar el submenu

he modificado el codigo para que sea aceptado en el formulario

Responder
JMiur  

Me refiero a un ejemplo online, caso contraio, es imposible probar algo fuera de contexto. Así tal cual, si coloco los caracteres < y > que imagino y corrijo el atributo erróneo que dice clas="xxx en lugar de class="xxx, se vería correctamente aunque faltaría establecer el ancho o detalles que tienen que ver con el resto de las propiedades que posee la pagina web donde estará ubicado..

Responder
legolas_bilbao  

Aqui tienes el ejemplo online.

http://www.clubnorteñodegolf.es/xcxlxuxbx/index_nuevo.php

gracias por todo

Responder
JMiur  

Me da la impresión que, por el esquema de esa pagina, deberias hacer dos cosas, cambiar el valor de top y agregarle z-index; ambas propeidades en esta regla:

#menus ul {
.......
top: 20px;
z-index: 100;
}

Responder
legolas_bilbao  

Ya se despliega pero me surgen 2 problemas.

El primero, en cuanto quito el ratón hacia el submenu este desaparece y el otro que no se rellena el contenido de lso submenus.

gracias por la ayuda

Responder
JMiur  

En la misma regla de estilo, agregas un color de fondo para que no sea transparente y para que no se cierre, debes modificar la posición de top, sino, queda un "agujero" entre las etiquetas y se ocultará; por ejemplo:

#menus ul {
.......
top: 25px;
background-color: #FFF;
}

Responder
Fredy  

HOLA... muy buena guía y resulta un excelente menú, tengo eso si una dudita.. ¿que propiedad o cual de las lineas del CSS3 es la que hace que en tu ejemplo siempre el "inicio" este resaltado? No la encuentro y me gustaría que el menú no estuviera simple resaltando esa sección.

¡Gracias de nuevo!

Responder
Fredy  

Eso me pasa por apresurado.. ya encontré la respuesta a mi pregunta, el asunto no era del CSS3 sino el ID "current" que tenia el incio en el html

Responder
Jorge  

Hola, tengo 2 problemas. El primero es que el Menú no se ve completo en mi blog.. http://futbol-paraguay.blogspot.com/

Al desplegarse no se ven los Sub Menúes (..) ya que quedan debajo de las entradas. Como podría solucionar eso?

Y otra duda, dónde coloco los enlaces a donde debe ir al hacer clic en un Menú? Si en el código aparece: Sub Menu 2.1
Y si quiero que me enlace al sitio mipagina.com, debería quedar así?
Sub Menu 2.1

Gracias

Responder
JMiur  

En esas plantilas neuvas de Blogger, las cosas son muy complciadas y engorrososa. Podrías probar agregando esta regla:

.tabs .widget ul, .tabs .widget ul {
overflow: visible !important;
z-index: 100;
}

Lo segundo no lo comprendo, imagino que estás habando del enlace final así que esos van allí donde se termina la estructura, en el último enlace. Por ejemplo si es en Clubes | Cerro Porteño

<li>
<a href="ACA_VA_EL_ENLACE">Cerro Porteño</a>
</li>

Responder
Jorge  

Gracias por la respuesta, pero dónde inserto esa regla? en la plantilla o en el gadget html? Dedicaré el día en buscar una solución, quizás otra plantilla u otro Menú.

Gracias

Responder
JMiur  

Da igual, si usas esasnuevas plantilalas, alí hay una opción de agregar CSS personalizado asi que lo pones de ese modo.

Sino, con el resto del CSS que veas en la plantilla, dentro de <b:skin> </b:skin> o donde hayas colcoado el estilo de ese menu.

Responder
Jorge  

Gracias, aunque probé y no me resultó así que tuve que dejar. Quizás después le aplique con no más de 3 sub-menúes, por el diseño que tiene ahora funcionaría.

Saludos

Responder
Pacheta  

Buenas de nuevo JMiur.
Me preguntaba si es posible que el contenido del menú se desplegase, en lugar de hacia la derecha, hacia la izquierda. ¿Cómo se hace?

Muchas gracias.

JMiur  

Tal vez, agregando reglas como:
#nav ul ul {left: -200px;}
pero, tendrás que probar y ver.

Responder
FUJOMA  

Puedes colocar el enlace de la imagen(url grandiant.png), porque he intentado crearla y darle la misma tonalidad y no he conseguido lograr el mismo efecto.

Gracias de Antemano

JMiur  

Descarga esta imagen o usa la propiedad linear-gradient.

Responder
Anónimo  

Mira logre obtener un codigo para generar el player, pero necesito obtener el titulo del post de alguna manera para remplazarlo en var-videoID="titulo del post" ¿ debería poderse usando pero realmente no se como.
function _run() {
/*
* Simple player embed
*/

// The video to load.
var videoID = "sankarea"
// Lets Flash from another domain call JavaScript
var params = { allowScriptAccess: "always" };
// The element id of the Flash embed
var atts = { id: "ytPlayer" };
// All of the magic handled by SWFObject (http://code.google.com/p/swfobject/)
swfobject.embedSWF("http://www.youtube.com/v/videoseries?listType=search&list=" + videoID + "?&autoplay=1&controls=0&rel=0&showinfo=0&autohide=1&color=white&version=3",
"videoDiv", "480", "295", "9", null, null, params, atts);

}
google.setOnLoadCallback(_run);

JMiur  

Tal vez algo así:

var videoID = &#39;<data:blog.pageName/>&#39;;

pero eso no debe estar estar dentro de etiquetas CDATA lo que haria muy engorroso el código así que podría hacerse esto:

<script>
var videoID = &#39;<data:blog.pageName/>&#39;;
</script>
<script>
//<![CDATA[
function _run() {
// la variable videoID ya esta definida antes así ique no hay que leerla otra vez
.......
}
//]]>
</script>

Responder
Anónimo  

Perfecto y muchas gracias ... despues te dejo el codigo completo para quien lo necesite. ya va quedando como quiero el blog :D

Responder
Pacheta  

Buenas, ¿por qué hay veces que el contenido no se despliega bien? En mi caso, en la página principal el menú se muestra perfectamente http://pruebasdelamierdaperruna.blogspot.com.es/
Pero luego en las entradas individuales o en las categorías no......
http://pruebasdelamierdaperruna.blogspot.com.es/2012/01/primera-guerra-mundial-historia.html

¿Cuál es el problema?

Gracias !!!

JMiur  

No veo problema alguno. Eventualmente, si debajo el menú que se despliega, hay alguna etiqueta que tiene ciertas propiedades, puede ser que estas sean privilegiadas sobre las del menú y este se cierre al llegar a cierta posición.

Si se trata de algo así, se resolvería agregando z-index: con un valor alto pero habría que ver exactamente donde o colocarlo globalmente; por ejemplo:

#nav li {
.......
z-index:1000;
}

Pacheta  

MUCHÍSIMAS GRACIAS, es justo lo que me ocurrió pero no sé cómo lo llegué a solucionar de otra manera, pero para la próxima ya la sé :) :)
Gracias genio!

Responder
Unknown  

Hola, me gusta mucho este menú, pero no logro obtener la imagen del mismo menú para que se vea 100% igual al que están presentando en este post.
Me podrían ayudar por favor.
De antemano muchísimas gracias y felicidades por la página.

JMiur  

Descárgala desde la página del autor o usa gradientes:
http://www.webdesignerwall.com/demo/css3-dropdown-menu/css-gradient-dropdown.html

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