Este es un menú vertical con subpestañas hecho sólo con CSS, no tiene nada de Javascript o de alguna librería, así que para aquellos que prefieren las cosas simples esta es una buena opción para organizar las etiquetas del blog o cualquier enlace.
Colocarlo es bastante sencillo, sólo entra en Diseño | Edición de HTML y antes de
]]></b:skin> pega los estilos siguientes:
/* Menú vertical con subpestañasAhora entra en Diseño | Elementos de la página | Añadir un gadget | HTML/Javascript y ahí pega lo siguiente:
----------------------------------------------- */
#menuvertical {
text-align: center;
width:100%;
}
#menuvertical ul { list-style-type: none; padding:0;}
#menuvertical ul li.nivel1 {
width: 162px; /* Ancho de las pestañas */
}
#menuvertical ul li.primera {
border-top: solid 1px #FFF; /* Borde superior de la primera pestaña */
}
#menuvertical ul li {padding:0;}
#menuvertical ul li a {
display: block;
text-decoration: none;
color: #fff; /* Color del texto */
background-color: #045FB4; /* Color de fondo */
border: solid 1px #fff; /* Borde de las pestañas */
border-top: none;
padding: 8px;
position: relative;
}
#menuvertical ul li:hover {
position: relative;
color: #000; /* Color del texto al pasar el mouse */
}
#menuvertical ul li a:hover, #menuvertical ul li:hover a.nivel1 {
background-color: #6E6E6E; /* Color de fondo al pasar el mouse */
color: #000;
position: relative;
}
#menuvertical ul li a.nivel1 {
display: block !important;
display: none;
position: relative;
}
#menuvertical ul li ul {
display: none;
}
#menuvertical ul li a:hover ul, #menuvertical ul li:hover ul {
display: block;
position: absolute;
left: 161px;
top: -1px;
}
#menuvertical ul li ul li a {
width: 160px;
background-color: #045FB4; /* Color de fondo subpestañas */
color: #fff; /* Color del texto subpestañas */
}
#menuvertical ul li ul li a:hover {
position: relative;
background-color: #6E6E6E; /* Color de fondo al pasar el mouse subpestañas */
color: #000; /* Color del texto al pasar el mouse subpestañas */
}
<div id="menuvertical">Agrega la URL de los enlaces donde se indica y listo. Si quieres agregar otra pestaña SIN subpestañas entonces añade antes de </ul> una línea como esta:
<ul>
<li class="nivel1 primera"><a href="#" class="nivel1">Pestaña 1</a>
<ul>
<li class="primera"><a href="URL del enlace">Pestaña 1.1</a></li>
<li><a href="URL del enlace">Pestaña 1.2</a></li>
</ul>
</li>
<li class="nivel1"><a href="#" class="nivel1">Pestaña 2</a>
<ul>
<li class="primera"><a href="URL del enlace">Pestaña 2.1</a></li>
<li><a href="URL del enlace">Pestaña 2.2</a></li>
<li><a href="URL del enlace">Pestaña 2.3</a></li>
<li><a href="URL del enlace">Pestaña 2.4</a></li>
<li><a href="URL del enlace">Pestaña 2.5</a></li>
</ul>
</li>
<li class="nivel1"><a href="#" class="nivel1">Pestaña 3</a>
<ul>
<li class="primera"><a href="URL del enlace">Pestaña 3.1</a></li>
<li><a href="URL del enlace">Pestaña 3.2</a></li>
<li><a href="URL del enlace">Pestaña 3.3</a></li>
</ul>
</li>
<li class="nivel1"><a href="#" class="nivel1">Pestaña 4</a>
<ul>
<li class="primera"><a href="URL del enlace">Pestaña 4.1</a></li>
<li><a href="URL del enlace">Pestaña 4.2</a></li>
<li><a href="URL del enlace">Pestaña 4.3</a></li>
<li><a href="URL del enlace">Pestaña 4.4</a></li>
</ul>
</li>
<li class="nivel1"><a href="#" class="nivel1">Pestaña 5</a>
<ul>
<li class="primera"><a href="URL del enlace">Pestaña 5.1</a></li>
<li><a href="URL del enlace">Pestaña 5.2</a></li>
</ul>
</li>
</ul>
</div>
<li class="nivel1"><a href="URL del enlace" class="nivel1">Pestaña 6</a></li>Si quieres agregar una pestaña CON subpestañas entonces añade igual antes de </ul> lo siguiente:
<li class="nivel1"><a href="#" class="nivel1">Pestaña 6</a>No es un menú fuera de lo normal pero sí es bastante útil para organizar los enlaces del blog.
<ul>
<li class="primera"><a href="URL del enlace">Pestaña 6.1</a></li>
<li><a href="URL del enlace">Pestaña 6.2</a></li>
<li><a href="URL del enlace">Pestaña 6.3</a></li>
<li><a href="URL del enlace">Pestaña 6.4</a></li>
</ul>
</li>
Hola gracias x el aporT
ResponderEliminarsalu2 y q stes muy bien ^^
Holaaa!!! Buenisimooo!!! graciasssss Potro ,como siempre espectacular!! un beso :D
ResponderEliminarHola Potro xD, yo de nuevo pues he publicado 2 nuevas entradas despues de la paginacion que ise, y no aparecen en google, cres que la paginacion haiga hecho que todas las entradas que haga nuevas ya no aparescan en google? :/
ResponderEliminarLady Pink, gracias a ti por tu visita!
ResponderEliminarGenerofem, sencillo pero funcional ¿no? Otro beso para ti.
TutoGeek, no tiene que ver en lo absoluto. Tienes que darle un poco de tiempo a los robots de Google para que pasen a tu blog e indexen el contenido nuevo.
Gracias por tu respuesta rápida, ya estaba llorando x'D
ResponderEliminar:alabenapotro:
:potrorey:
oie potro hablando de entradas...desde hace un par de dias mis visitas bajaron muy extremo..:/ se me iso muy raro porq llevava un promedio de minimo 120 visitas diarias pero derrepente amaneci yo muy contento entro a blogger y tan taaaan ya casi terminaba el dia y nisiquiera habia revasado las 50 visitas..:/ que cres que pueda ser.? estoi bastante preocupado..:S quiero llorar..jeje bueno no...pro ayudam no... www.tumultitec.blogspot.com
ResponderEliminarPozo+10™, de cualquier forma te dejo el enlace con la información que buscabas ;)
ResponderEliminarCómo crear vínculos dentro de la misma entrada
TuMultitec, no lo sé, que las visitas suben y bajen es normal, a todos nos sucede, sobre todo cuando es temporada de vacaciones, días de descanso, fines de semana, etc.
Potro Me pasarias tu correo? xD
ResponderEliminarpersonal no gmail ni nada de esas cosas(:
el_porta_Valenciana@hotmail.com
Buenos dias Potro.
ResponderEliminarSe podria poner fjo , "usease" flotante en el lado derecho ( tambien me vale en el izquierdo) o deslizante como el Menú vertical desplegable , que hicistes en dias pasados.
Es que me gusta mas este que el anterior.(bastante mas )
Muy agradecido de antemano , Recibe un saludo
Victorino Redondo
Potro sos un genio amigo,Saludos
ResponderEliminarhola amigo tu pagina es una de las mejores, y estuve buscando un slider similar al que sale en esta pagina http://cr.tuhistory.com//home.html sera que me puedes ayudar para hacer algo similar a ese slider que esta muy bonito para mostrar videos y fotos en un shadowbox. aqui te dejo una imagen para que veas el slide que te digo.
ResponderEliminarhttp://dl.dropbox.com/u/17721279/Shadowbox/Dibujo.JPG
gracias de antemano.
TutoGeek, si es por una consulta de algún tema deja la pregunta en la entrada que corresponde, si es por un tema no explicado en el blog entonces usa el formulario de contacto que se encuentra en el menú superior. Saludos!
ResponderEliminarMaG@S RaDioMuSiC, gracias a ti por pasar :)
Buen día VRedondoF,
ResponderEliminarEl código que iría en el elemento HTML/Javascript ponlo antes de </body>
Luego debajo de esta línea:
#menuvertical {
Agrega lo siguiente:
right:0;
top:250px;
position:fixed;
Saludos.
Juvinao, no lo soy pero te agradezco tu comentario :)
ResponderEliminarhenry Jason, exactamente como ese no lo sé, pero hay un carrusel de imágenes que tiene incorporado un sistema de ventanas modales (ThickBox), aunque no es Shadowbox puedes cambiarlo por ese para que te permita poner videos en las ventanas modales.
gracias potro pero ese ya lo habia visto antes.
ResponderEliminarsi algun día haces algo parecido a el que te dije me puedes avisar mi blog es http://www.descargagratis.co.cc/ ahi me puedes dejar un mensaje.
Hola, una pregunta que no viene en esta Entrada., ¿Como puedo saber la altura y el ancho, de mi cabecera de mi blog?
ResponderEliminarPotro, tengo una duda acerca de otro de los menús que pusiste por aquí.
ResponderEliminarMira, lo metí en el blog http://desesperatecats.blogspot.com pero si te fijas los gadgets me medio solapan con el menú, así que querría saber como evitarlo. Y también como quitar ese trozo sobrante de la derecha.
Muchas gracias de antemano.
Antonio, depende, en algunas plantillas no tiene especificada la altura sino que se adapta a la imagen que le pongas, eso varía de plantilla en plantilla. ¿En cuál blog quieres saber su medida?
ResponderEliminarmartinyfelix, si es otro menú entonces deja el comentario en la entrada que corresponde para no dispersarnos del tema de este menú, y pon el blog como público para que pueda ver el problema que tienes. Saludos.
Esto está espectacular, vengo organizando el blog, así que me guardo esta publicación, cuando tenga listo lo hago, saludos
ResponderEliminarHola majo y gracias de antemano.
ResponderEliminartengo en mi blog un menu de un estilo como el k dices pero no se porque motivo me sale detras de los videos sin poder verse cuando se habre.No se si me podrias hechar un cable.Gracias .
Hola Potro, estoy probando este menu en mi blog de pruebas y no consigo que se me vean las subpestañas del menu, se cortan y no se ven, a ver si puedes mirar por que es. Gracias.
ResponderEliminarhttp://ssfpruebas.blogspot.com
Urko, necesitas hacerle una modificación a los videos para que no se sobrepongan.
ResponderEliminarJesús Gómez, busca esta parte de tu plantilla y elimina lo que está en negrita:
#sidebar-leftwrap{width:200px;float:left;margin-top:10px; margin-right:5px; margin-left:5px;font-size:97%;line-height:1.5em;word-wrap:break-word;overflow:hidden;
Gracias Potro, ya me funciona.
ResponderEliminarOtra cuestión, ¿se puede poner un fondo a los botones en vez de que sean de un color sólido? Gracias.
Hola buenas tardes. Mi plantilla es de 3 columnas pero quiero poner el menú en la columna de la derecha de mi blog, se puede poner que el menú despliegue a la derecha. gracias.
ResponderEliminarEN EL MIO QUIERO SABERLO PARA EL LOGO DE MI BLOG, MI BLOG: WWW.PEQUEMUNDOSSIMS.BLOGSPOT.COM
ResponderEliminarHola Jesús Gómez,
ResponderEliminarPara ponerle una imagen de fondo sólo cambia donde se indica el color de fondo de las pestañas, o sea, esto:
background-color: #045FB4;
Por esto:
background: url(URL de la imagen);
Eso lo tienes que hacer en todos los fondos que se indica.
Hola RELOJES JT,
ResponderEliminarPara cambiar la posición en la que se despliegan las subpestañas cambia esto:
left: 161px;
Por esto:
right: 161px;
Hola Antonio,
ResponderEliminarLa altura de tu cabecera es de 125px, sin embargo puedes modificarla para hacerla más grande si lo deseas:
#header-wrapper {
height:125px;
margin:0 auto;
width:960px;
}
protro como anda genio, el menu al desplegar me queda abajo del contenido de la entrada, hasta por debajo del texto, realice lo de borrar overflow:hidden; pero se comporta igual
ResponderEliminarPotro que pasa con Blogger, en las nuevos escritorios no se puede cambiar el codigo html?? que haremos cuando desaparezcan los antiguos??
ResponderEliminarperdon potro aca te dejo mi blog que me olvide de ponerlo en el comentario anterior
ResponderEliminarwww.moriatisapleno.com.ar
abrazo
Hernan, ¿dónde lo has puesto que no lo veo? o.O
ResponderEliminarJavier, pues esperemos que no sea una decisión definitiva de Blogger y que permitan la opción de Edición de HTML, o bien, que al menos nos dejen la interfaz antigua de forma indefinida para que podamos usarla quienes queramos hacer uso de esa opción.
potro ahi lo puse en la columna izquierda.
ResponderEliminarabrazo
si borro overflow:hidden; se ve pero por debajo del contenido de la entrada
ResponderEliminarEn las plantillas hechas con Aristeer no sé decirte muy bien pues casi no las conozco por lo complicadas que son. Quizá tengas que quitarle el overflow:hidden que está debajo de esta área:
ResponderEliminar.art-contentLayout .art-sidebar1, .art-contentLayout .art-sidebar2 {
Aunque quizá e resultado no sea muy bueno y el menú se esconda detrás del contenido, pero como te digo, de esas plantillas no sé mucho :(
Oye Potro una pregunta, ya has probado el Cloud Experience?... jeje ya vi en "cyberbloggero"
ResponderEliminarMe gusto para probar con los archivos .mp3 para el reproductor que haré. Pero primero quiero tu aprobacion jeje.
Saludos!!
Saludos desde Venezuela, en especial a Potro quien ha sido un gran colaborador. Vean mi blog! Esta de lujo!: http://orlandoalvarezitc.blogspot.com / acepto criticas ya que se que todavia le faltan algunos detalles y me gustaria mejorarlos. Potro si hay alguna recomendacion que me puedas hacer sera bien recibida.
ResponderEliminarSaludos hermano tengo un detallito a ver si me puedes ayudar, el menu principal de mi blog se retrasa un poco cuando cambio a otra opcion, por ejemplo cuando paso de Servicios a Chat se tarda un poco y eso no se ve nada bien, la plantilla base que use fue "dominate" de btemplates. Habra alguna forma de corregir esto. Mi blog es: Http://orlandoalvarezitc.blogspot.com.
ResponderEliminarSaludos Potro, ya logre corregir el problema, lo que hice fue reemplazar el script del menu por el de otra pagina que si funcionaba perfecto y listo!, solucionado el problema. Disculpa tanta molestia. Gracias igualmente por todo tu apoyo.
ResponderEliminarjavi_anubis, quedé de probarlo pero hasta ahorita no he podido hacerlo, a ver si después con más tiempo lo checo, pero si tú lo pruebas antes ya nos platicarás ;)
ResponderEliminarOrlando A., qué bueno que ya lo has resuelto :)
Hola Potro:
ResponderEliminarPorque cada vez que abro mi blog cuando llevo un tiempo sin abrirlo sale una paguina emergente de publicidad. He buscado la direccion de esta y no lo tengo confirudado para ello.
Un Saludo
Hola FRANCISCO,
ResponderEliminarEs algún gadget de un servicio externo el que ingresa esa publicidad, regularmente se da en los contadores Web. FeedJit es uno de ellos, así que probablemente sea éste el causante de esa publicidad intrusiva.
Saludos.
Hola Potro,
ResponderEliminarTengo este blog de pruebas y no me funciona.
http://lalazooooooooo.blogspot.com/
porque no sale el menú correcto si ya he hecho todo lo de arriba? Lo quiero corregir primero en ese blog de pruebas para luego pasarlo a mi blog verdadero www.fotohansr.com
Espero que pueda ayudarme. Le estaría eternamente agradecido. Un saludo
Hola Fotohans S.R.,
ResponderEliminarLo que sucede es que cuando agregaste los estilos del menú eliminaste la llave de cierre de los stilos que estaba arriba. Lo tienes así:
.red #slatenav ul li a.current {
color: #fff;
background: transparent url(url-de-imagen-HOVER.gif) no-repeat top center;
/* Menú vertical con subpestañas
----------------------------------------------- */
#menuvertical {
text-align: center;
width:100%;
}
Y debe ser así:
.red #slatenav ul li a.current {
color: #fff;
background: transparent url(url-de-imagen-HOVER.gif) no-repeat top center;
}
/* Menú vertical con subpestañas
----------------------------------------------- */
#menuvertical {
text-align: center;
width:100%;
}
Como se eliminó esa llave de cierre inhabilita los demás estilos de abajo y es por eso que el menú no funciona, pero corrigiéndolo deberá funcionar sin problemas.
Saludos.
Hola Potro;
ResponderEliminarMuchas gracias. La verdad que eres un fenómeno. Funcionó perfectamente. Mil gracias un saludo
Hola de nuevo,
ResponderEliminarSiento ser pesado, pero me ha surgido otro problemilla. Ahora no se porque me sale cuando paso el mouse por encima no salen las pestañas al mismo nivel y al lado de la otra sino un poco montada encima de la pestaña y no en la misma linea. Como puedo ponerlo como lo tienes en el ejemplo tuyo? http://lalazooooooooo.blogspot.com/
Muchas gracias
Prueba modificando esta parte:
ResponderEliminarleft: 161px;
top:-31px;
El primer puedes ponerle un valor más alto y al otro uno más pequeño, o bien, juega con albos valores hasta que quede a la medida.
buenos dias potro tengo un inconveniente el menu en fire y chrome se ve bien pero en internet explorer se daña ...colaborame www.facetv.co.cc
ResponderEliminarGracias Potro. Funcionó perfectamente.
ResponderEliminarpotro ayudame a colocara este menu en mi blogger... aqui te dejo el link: http://net.tutsplus.com/tutorials/javascript-ajax/how-to-create-a-mootools-homepage-inspired-navigation-effect-using-jquery/
ResponderEliminarPotro el Menu esta excelente, pero sabes una cosa, tengo un pequeño problema. Cuando lo pongo en el blog, lo puse en la sidebar de la derecha, es el unico que tengo, y queda muy hacia la izquierda, nose como centrarlo. Me ayudas porfavor Potro
ResponderEliminarQuizá sea más conveniente que hagas más anchas las pestañas del menú para que se extienda a la derecha. Eso puedes hacerlo en esta parte del menú:
ResponderEliminarwidth: 162px; /* Ancho de las pestañas */
Con un 234px se verá bien.
Hola Potro!!!
ResponderEliminarQue pasa si el gadget lo pongo arriba, reemplazando al del traductor de Google???
Ando buscando algo así, porque ya me quedaron demasiadas etiquetas, y no me gusta mucho. Sé que si las agrupo quedará más ordenado.
http://sueniosypasteles.blogspot.com
Gracias desde ya!!!
Hola Smart Girl,
ResponderEliminarEn realidad lo puedes poner donde sea, siendo un gadget HTML/Javascript lo puedes arrastrar hasta la ubicación que desees.
Potrooo!!!
ResponderEliminarMe podrías ayudar?? Hice este menú, pero creo q le falta una configuración xq no se ve bien, podrías checarlo y ayudarme? PORFAAA!!
http://blogprueba-investigacion.blogspot.com/
Hola LiLiS,
ResponderEliminarCuando has puesto el código de los estilos has omitido una diagonal al principio, en esta parte:
* Menú vertical con subpestañas
Y debe ser así:
/* Menú vertical con subpestañas
Después de eso, cambia el width:100%; por un valor más pequeño, por ejemplo 80%, eso hará que las pestañas sean más reducidas y eso evitará que se encimen con las otras.
Muchas gracias!! si me quedó bien... bueno, sólo hay un detallito en el sub-índice de "asociaciones y sociedades"... lo puedes checar xfa??
ResponderEliminarSaludos!!
potro subpestaña de una subpestaña no es posible ?
ResponderEliminarotra cosa, no encuentro la parte de content wrapper, quiero achicar un poco
LiLiS, revisa la estructura del código de esa parte, verás que has puesto de más unos UL que no debían ir. Saludos!
ResponderEliminarTorneo Morumbi, no queda muy bien pues al pasar el cursor se queda mostrada siempre la subpestaña de la subpestaña ya sea que se quiera ver o no. Quizá con otro menú puedas tener mejores resultados.
Gracias Potro!!! Aunque creo que me voy a arriesgar por otro menú, aunque tenga que toquetear la plantilla, que es lo que no quiero...
ResponderEliminarUn beso y gracias!!!
Suerte entonces y gracias por el beso :)
ResponderEliminarHola pues mira resulta que estoy haciendo un blog de pruebas y estoy averiguando la cabecera y me acuerdo que me diste esto:
ResponderEliminar#header-wrapper {
height:125px;
margin:0 auto;
width:960px;
}
y lo he buscado pero no me sale nada.
te dejo mi blog de prueba: http://plantilladepequemundossims.blogspot.com/
Hola Antonio,
ResponderEliminarEn esa plantilla, el contenedor de la cabecera es este:
#header {
width: 960px;
height: 110px;
color: #ffffff;
font-size: 16px;
font-weight: normal;
margin: 0px auto 0px;
padding: 0px;
overflow: hidden;
}
Hola de nuevo, he hecho la imagen a igual de la anchura y de la altura y se me come una parte... y no sale la otra.
ResponderEliminarBueno lo puedes mirar en el blog; te lo dejo por si te se ha olvidado...
http://plantilladepequemundossims.blogspot.com/
Como puedo solucionar el problema?
La imagen puede ser que se haya cortado por la otra imagen de publicidad ¿puede ser eso?
ResponderEliminarLo que te di es el contenedor de la cabecera general, pero tú tienes dividida la cabecera en dos. Esa parte la que le corresponde es esta:
ResponderEliminar.headerleft {
width: 350px;
float: left;
margin: 0px;
padding: 0px;
overflow: hidden;
}
No te entiendo :(
ResponderEliminarPotro seria así?
ResponderEliminarhttp://2.bp.blogspot.com/-8KyOmV1y5l8/Ti2zODkiiII/AAAAAAAAAYM/d02IMQCZ8gE/s1600/Logo%2Bpara%2Bel%2Bblog.png
Así es. La cabecera que contiene el logotipo es de 350px
ResponderEliminar¿No se puede hacer un poco mas ancho la imagen?
ResponderEliminarSí, cambia ese width: 350px; por el ancho que quieres, luego, busca esta parte:
ResponderEliminar.headerright {
width: 600px;
A ese width: 600px; restale lo que le aumentaste al otro.
Ok ya he solucionado el problema Gracias Potro xDD!
ResponderEliminarMuy buenas, felicidades con la pàgina, me a servido muchisimo al crear un blog para una entidad cultural.
ResponderEliminarEl menu de blogger lo cambie por este, me iva de puta madre hasta que lo abri con el IE , al pasar el mouse por encima, solo se activa el boton encima de la letra, por lo que es imposible abrir las pestañas...
no se como cambiar eso, y que funcione igual que con mozilla o chrome.
Me puedes decir algo??
Gràcias por tu blog, es una joia!!!! XD
Se me olvido, otra cosa es que sale una linea discontinua encima de cada botón, encima de cada boton, eso no me molesta demasiado, pero si se puede quitar pos mejor…
ResponderEliminarHasta luego!!!!
Hola Jordi,
ResponderEliminarEl menú como tal funciona en IE, al menos en la versión 8 que es en la que lo he podido probar funciona sin problemas.
No mencionas con cuál versión lo has probado ni en cuál blog lo tienes puesto. Pero sin duda debe ser un problema, o de la versión del navegador, o de la plantilla que usas.
Saludos.
Uff Primero de todo muchisimas Gracias!!! Tengo el proyecto de blogger mas serio de mi vida jeje y tu me has salvado el pellejo en muchas ocaciónes... Haber si me puedes ayudar.. estaria genial..
ResponderEliminarAcabo de poner tu menu... y todo esta correto... lo unico que tengo dos problemas... 1.. que los botones del menu salen muy separados... como 50px una de otra :S.. y no tengo ni idea por donde empesar a mirar donde esta el problema...
Bueno y segundo que las sub-pestañas me salen cortadas... es normal eso? O hay alguna manera de sacarlas adelante.. para que se puedan ver enteras?
Bueno compañero! Seguire buscando menus como este... ya que es lo que mas necesito en este momento.. Si puedes ayudarme te estare muy agradecido!! Y te te are un Ancor Text en un Blog que tengo de PR3..
un Saludo y de nuevo GRACIAS por tu material! Buenisimo!
(Blog del problema: VerTiendas.com)
Hola NE,
ResponderEliminarMuchas gracias por tu comentario.
Parece que tiene que ver los estilos de tu plantilla, pero sobre todo que hay espacios que se agregaron cuando colocaste el menú.
Primero vamos a solucionar lo de los espacios, ya que quede bien, vemos lo demás.
Primero edita el menú y busca todos los códigos como este:
<br/>
Elimínalos todos, eso deberá reducir ese espacio, ya que lo hagas me dices para ver cómo ha quedado ;)
¡Saludos!
Compañero! Mil Gracias!!! Vales ORO!
ResponderEliminarSeguramente sea la plantilla... ya que me ha llevado muchos problemas...
En tu Maravilloso Blog encontre un Menu de imagenes que es perfecto para mi proyecto... lo probe y va realmente genial! Entonces me quedo con ell..
Dime que ancor text te pongo o banner o lo que sea! Y te lo dejo en blog de PR3 como te prometi! :) sin etiqueta no follow ^^
Deverias dejar un boton abajo de "dejar propina" de esos de paypal! Ya que mas de uno te dejariamos! ;)
Espero tu ancor text ;)
Olvide decirlo... soy usuario "NE"
ResponderEliminarMuchas gracias!
ResponderEliminarEl anchor text que tú quieras :)
Del botón de PayPal sí hay uno, está al final de la sidebar, pero creo que nadie lo ve :(
¡Saludos!
De anchor text te puesto: Tutoriales blogger
ResponderEliminaren el blog: srivas.com.ar
un Saludo :)! (borra el comentario por que no aporta nada XD)
Gracias Niko :)
ResponderEliminarGracias por la respuesta, efectivamente era un tema de la plantilla, por ahora he dejado un menu más simple, a ver si cuando tenga tiempo puedo cambiarla, si lo hiciera ahora me quitaría todas las modificaciones y no tengo el tiempo para hacerlo. Hasta luego
ResponderEliminarSuerte Jordi ;)
ResponderEliminarEl Potro... al no encontrar un menu como dios manda.. cogi un menu de web y lo adapte a blogger... es un menu vertical con doble submenu... esta al lado derecho: www.VerTiendas.com
ResponderEliminarEl caso es que si quieres! Estare encantado para pasartelo por email para que lo postees ! Un Saludo ;)
Gracias Niko, a ver si después te lo pido. El resultado te ha quedado fabuloso en el blog :)
ResponderEliminarMuchisimas Gracias compañero! :D Cuando quieras ;)
ResponderEliminarhola potro estoy utilizando este menú pero chrome se ve bien, pero en Internet explorer no, espero me puedas ayudar gracias
ResponderEliminarhttp://imss-ayuda.blogspot.com/p/zona-de-descargas.html
es aquí donde lo aplique para que lo veas
ptt. creo que hice este comentario en una entrada equivocada. ofrezco una disculpa
Ahhhh, qué trabajo es con IE... supongo que el problema es que se generan muchos espacios y al tratar de pasar a la otra pestaña encuentra ese espacio y se cierra el menú.
ResponderEliminarPrueba agregar antes de ]]></b:skin> esto:
.widget .post-body li {
margin-bottom: 0 !important;
padding: 0 !important;
}
Muchas Gracias potro, espero que hayas disfrutado tus vacaciones, quedo perfecto, lo mismo sucede con este menu:
ResponderEliminarhttp://ciudadblogger.com/2011/04/menu-horizontal-con-subpestanas-hecho.html
que puedo hacer en este caso??
y si es un lió IE, pero que se puede hacer.
gracias nuevamente
Ese sí te lo voy a deber pues no sé ni por dónde empezar. No sé si sea el mismo caso (no lo parece), o sea una incompatibilidad general :/
ResponderEliminarmuchas gracias potro.
ResponderEliminarsaludos lerh!!
hola potro espero que estes bien. a este menú le podemos agregar sub-subpestañas??
ResponderEliminarHola lerh,
ResponderEliminarSe tendría que modificar varios aspectos, pero aquí hay uno de Dynamicdrive que ya los tiene incluidos:
http://www.dynamicdrive.com/style/csslibrary/item/suckertree-menu-vertical/
Buenas Potro, ¿Como puedo buscar los códigos de color para modificar colores de las pestañas? Se le podrían agregar imágenes a este menú? y por último... ¿Como puedo colocar las pestañas un poco más a la izquierda? Un saludo!
ResponderEliminarHola AlejandroLopez,
ResponderEliminarEn el menú de arriba hay un enlace que dice 'Colores', ahí podrás obtener el código de los colores.
Para cambiar el color por una imagen cambia esto:
background-color: #045FB4; /* Color de fondo */
Por esto:
background: url(URL de la imagen);
El menú se pega completamente a la izquierda, habría que ver si donde lo has puesto hay una separación o algo y así ver cómo se puede mover.
Saludos.
Buenas Potro,
ResponderEliminarTe he copiado otro de los menús que tienes en tutoriales, pero me queda muy despegado del margen izquierdo, ¿Cómo podría desplazarlo un poco para cuadrarlo con el espacio?
Te dejo la URL
www.israelcornejosanchez.blogspot.com
Buen día AnticuarioReligioso,
ResponderEliminarDeja la pregunta en esa entrada para no desviarnos del tema de este post ;)
Saludos.
Buenas Potro, gracias por la respuesta anterior, tengo uan ultima duda, porque el menu me pisa un poco el borde donde se situaran las entradas y necesito desplazarlo un poco a la izquierda, a ver si tuviera solucion!
ResponderEliminarwww.alejandrolopezaraguez.blogspot.com
gracias por adelantado!
hola potro me podrias decir porque mi menu queda asi,ya lo he aplicado en otro blog y queda bien. pero no se que ocurra en este:
ResponderEliminarhttp://limpiezareyher.blogspot.com/
saludos lerh
AlejandroLopez, porque el ancho del menú es más grande que el ancho de tu sidebar. Reduce el ancho de las pestañas donde se indica en color verde.
ResponderEliminarSi los submenús te quedan muy separados agrega debajo de:
#menuvertical ul li ul {
Esto:
margin-left: -25px;
lerh, parece que en algunas plantillas se comporta diferente. Agrega debajo de:
ResponderEliminar#menuvertical ul li ul li a {
Esto:
margin-left: 35px;
Si te queda un borde salido elimina esta parte:
#menuvertical ul li.primera {
border-top: solid 1px white;
}
Saludos.
gracias potro lo intentare salduos lerh!!
ResponderEliminarhola potro, perdón por tantas molestias, como quito puedo reducir el espacio que ha entre las pestañas de este menú, en las paginas estáticas de blogger.
ResponderEliminarmuchas gracias potro
¿En cuál página lo has puesto que te genera ese problema?
ResponderEliminarhttp://limpiezareyher.blogspot.com/p/quienes-somos.html
ResponderEliminaresta es mi pagina.
el problema sucede en IE
El problema es que IE siempre interpreta los espacios de una manera distinta, y si corriges los espacios para ese navegador entonces en los demás se verá mal. Yo no le daría mucha importancia dado que es un pixel extra de separación.
ResponderEliminarsi mejor asi, gracias potro por la ayuda
ResponderEliminarLa verdad es que esto está genial, nosotras lo hemos probado, pero nos pasa que dependiendo de qué ordenador accedamos, no podemos acceder a la subpestaña, cuando nos movemos a la drcha para escoger la opcion, la subpestaña desaparece. ¿por qué? ademas es curioso porque no nos pasa desde todos los ordenadores, será una opcion solo funcional con los nuevos ordenadores o programas?
ResponderEliminarHola Nerea,
ResponderEliminarEl ordenador no tiene que ver con la forma como se muestran las cosas, sino con el navegador que se use y la versión de éste.
Si es Internet Explorer entonces es posible que haya algunos problemas, como todo lo que se ve en ese navegador.
Habría que ver en cuál blog y plantilla lo has puesto, así como en qué navegador lo has visto para mirar si es posible arreglarse.
Saludos.
Hola, muy buena explicación e ideal para los blogs. No tengo experiencia en el tema, pero se entiende cada paso para realizar las modificaciones. Mi duda está en que yo he creado en blogger páginas independientes con el gadgets que ellos ofrecen ¿éstas páginas se podrían enlazar al menú vertical y eliminarlas de la barra horizontal? ¿se pierde el enlace al realizar este procedimiento?
ResponderEliminarSaludos.
Hola Sandra,
EliminarPor supuesto que puedes enlazar tus páginas no sólo a este menú, sino a cualquier otro.
Tus páginas no se pierden. El gadget lo puedes eliminar y si después quieres ponerlo de nuevo lo podrás hacer sin problemas, tus páginas no se verán afectadas con eso.
Para enlazar tus páginas con este u otro menú sólo pon donde dice "URL del enlace" la dirección de tu página.
Saludos.
En primer lugar, muchas gracias por los consejos. Hemos utilizado muchos de ellos en los distintos blogs de los centros de información y educación ambiental del Ayuntamiento de Madrid.
ResponderEliminarAunque sean blogs "oficiales", son elaborados por los propios equipos de los centros, y nuestros conocimientos informáticos son básicos, por lo que nos viene muy bien cualquier ayuda para intentar darles un toque de profesionalidad.
Estamos incorporando estos menus verticales en algunas de las páginas y funcionan muy bien, sin embargo nos preguntabamos si sería posible añadir un subnivel adicional. Hemos hecho varias pruebas con el código, estudiando como se incorpora el subnivel 1, pero algo tenemos que estar haciendo mal porque no conseguimos un código válido.
Muchas gracias de nuevo por este trabajo desinteresado y de excelente calidad.
Saludos
Hola La Cabaña del Retiro,
EliminarMuchas gracias por tu comentario, es un gusto saber que estén usando estos recursos para armar sus blogs :)
Con este menú es bastante complicado el asunto, sobre todo porque podría no verse bien en todos los navegadores.
Lo más recomendable es que entres a http://purecssmenu.com/ ahí tienen un par de menús verticales que sí tienen esa característica. Cuando descargues el menú te aparecerá un documento HTML, abre ese archivo, ahí verás el menú, luego mira el código fuente de esa página.
Ahí, en el código fuente verás todo el código del menú. Copia todo lo que hay desde:
<!-- Start PureCSSMenu.com STYLE -->
Hasta:
<!-- End PureCSSMenu.com STYLE -->
Y pégalo antes de </head>
Luego, en un elemento HTML/Javascript pega todo lo que hay desde:
<!-- Start PureCSSMenu.com MENU -->
Hasta:
<!-- End PureCSSMenu.com MENU -->
Y con eso tendrás tu menú con esas características que buscas.
Saludos.
Buenas,
ResponderEliminarQuisiera saber si a este menu se le puede agregar algun decorativo para que cuando uno se posa sobre el mismo aparezco el dibujo, ya sea una imagen chica o algun otra cosa.
muchas gracias.
Hola Candela & Inés,
EliminarDonde dice:
background-color: #6E6E6E; /* Color de fondo al pasar el mouse */
Puedes poner un color de fondo distinto. O si prefieres que sea una imagen entonces cambia eso por esto:
background: url(URL de la imagen);
portro, puse el menu en mi blog pero las pestañas desplegadas se ven detras de cualquier objeto, e inmediatamente desaparecen al cruzar el mouse con uno de los otros objetos,
ResponderEliminarcomo hago para corregir el error? mi blog es
http://violinorquestasinfonicaamadeus.blogspot.com/
Hola john, pon el menú exactamente como está el código de la entrada, porque lo has modificado y eso ha hecho que las subpestañas no se muestren como deberían.
EliminarSaludos.
Hola Potro,
ResponderEliminartengo este menu instalado en mi blog, pero al usar una subpestaña no me deja que el cursor la pinche, desaparece antes ¿Cual sería el problema?
www.alejandrolopezaraguez.blogspot.com
Gracias!
Hola Alejandro, cambia lo que está en negrita:
Eliminar#menuvertical ul li a:hover ul, #menuvertical ul li:hover ul {
display: block;
position: absolute;
left: 161px;
top: -1px;
}
Por 149px
Saludos.
Gracias, como siempre solucionado!
Eliminarhola, disculpa tengo un problema con una plantilla que diseñé con artisteer, y es que se sobreponen los gadget y cuando estoy en el editor de paginas se ve así http://i850.photobucket.com/albums/ab67/higaku/c8ba363b.jpg no se si puedes decirme como arreglarlo, tambien hice un menu con ese programa pero a la hora de subir la palntilla en mi blog y visualizarlo ya no se ve, podras ayudarme, saludos
ResponderEliminarhola, disculpa tengo un problema con una plantilla que diseñé con artisteer, y es que se sobreponen los gadget y cuando estoy en el editor de paginas se ve así http://i850.photobucket.com/albums/ab67/higaku/c8ba363b.jpg no se si puedes decirme como arreglarlo, tambien hice un menu con ese programa pero a la hora de subir la palntilla en mi blog y visualizarlo ya no se ve, podras ayudarme, saludos
ResponderEliminarNunca he usado ese programa Luis Angel, pero sí se que esas plantillas dan muchos problemas, sobre todo cuando se quieren personalizar fuera del programa.
EliminarNo lo sé, podría ser que no usas la última versión de IE, o hay algo que no es compatible con ese navegador.
ResponderEliminarOk, ok, gracias por avisar ;)
ResponderEliminarBuenas noches,me gustaría saber como poner las pestañas redondeadas en sus bordes derechos. Gracias por tus ayudas. Muchas Gracias.
ResponderEliminarlapicerossinpunta@blogspot.com
Buenas noches Darío. Debajo de #menuvertical ul li a { agrega:
Eliminarborder-radius: 0px 10px 10px 0px;
Hola Potro, estoy acabando ya la apariencia del blog y, lo primero, me gustaría darte las gracias porque ha sido gracias a tu inestimable ayuda.
ResponderEliminarLo segundo quería preguntar un par de cosillas acerca de este menú.
1.¿Se puede cambiar la fuente y el tamaño del texto de las pestañas?
2.¿Se puede redondear los bordes de las pestañas, algo parecido a lo que pudimos hacer en linkwithin?
Gracias, muchas gracias.
Hola Bastida, para los bordes mira el comentario #124.1
EliminarLa fuente la puedes poner debajo de #menuvertical ul li a {
Por ejemplo:
font-size:14px;
font-family:Arial;
Saludos.
Hola Potro, acabo de colocar el menu vertical pero necesito q de las subpestañas salgan otras subpestañas... como en el caso del menú horizontal, se puede hacer?
ResponderEliminarSalu2
Con este menú no Gustavo, es mejor que consigas uno que ya tenga esas características.
EliminarNo he visto ningúno... otra cosa, no quiero q salga ninguna entrada en la pagina principal. Eso se hace en "configuracion" pero se puede quitar la frase "no hay entradas". Porque si hay entradas solo q hay que dar a las pestañas para verlas. Cómo se puede hacer eso?
EliminarCon estos pasos se elimina también ese mensaje:
Eliminarhttp://ciudadblogger.com/2009/07/ocultareliminar-el-mensaje-mostrando.html
Hay alguna manera de hacerlo horizontal?
ResponderEliminarEs mejor si consigues uno que ya sea horizontal, mira la categoría "Menús".
EliminarAh, gracias! Voy a ver si me sale :)
EliminarPorfavor potro, porque me sale el menu horizontal si es vertical,gracias
ResponderEliminarhttp://ladyruss.blogspot.com.es/
Parece que cuando has pegado el último código se fueron los estilos que tengo en la entrada. Elimina el código dentro del gadget y cópialo de nuevo desde esta entrada, pero, cuando lo pegues, verás que en la ventanita del gadget hay arriba un texto con un enlace, dale click y luego pega el código.
EliminarLo he hecho, pero no se puede seleccionar la subpestaña 1.1, se oculta de todas formas no sale en vertical como yo quiero.
EliminarY otra cosa podria posicionarla en el lado izquierdo donde esta "Moda" por que los gadget estan situados en el centro.
Gracias por todo y tu empeño.
Ya no veo este menú en tu blog.
EliminarHola Potro, he querido insertar 4 subpestañas en la ultima pestaña del menú vertical y sólo me inserta una más. ¿qué estoy haciendo mal? O no se pueden poner más.
ResponderEliminarSalu2
http://mispadressonprimerizos.blogspot.com
Hola Gùde, en el código fuente sólo ve tres, "APRENDIENDO A DORMIR", "Subpestaña 2" y "Subpestaña 3", no veo la cuarta.
EliminarNo se a q codigo fuente te refieres ya q "aprendiendo a dormir" no está en esa pestaña q digo yo.
EliminarLa última pestaña a la q me refiero es "a los padres" y tiene ya 4 subpestañas completas. Ahora quiero insertar 4 más ya q quiero poner 4 temas más. El blog es http://mispadressonprimerizos.blogspot.com
Tienes razón Gùde, estaba viendo el otro menú.
EliminarVeo 4 subpestañas, pero no veo indicios de que hayas añadido otras más. Sólo tienes que poner debajo del LI titulado "FIEBRE", esto:
<li><a href="URL del enlace">Pestaña 6.2</a></li>
<li><a href="URL del enlace">Pestaña 6.3</a></li>
<li><a href="URL del enlace">Pestaña 6.4</a></li>
<li><a href="URL del enlace">Pestaña 6.5</a></li>
Potro, solo veias 4 subpestañas porq ya hice eso mismo q me has mandado y no salian las 4 subpestañas así q lo borré hasta esperar tu respuesta, ahora lo he vuelto a añadir y ocurre lo mismo... solo sale 1 subpestaña, qué pasa?
EliminarSiempre hay que dejar puesto el código aunque no funcione, porque si no yo entro y no me enteró de cuál pueda ser la causa :/
EliminarEl problema es que el contenido de ese gadget de presentación es más reducido que lo que necesita todo el menú para poder mostrarse completo. Si el contenido de ese gadget fuera más extenso entonces habría más espacio a lo largo, y por lo tanto se podrían mostrar las nuevas subpestañas que agregaste.
Gracias x la explicación pero, debido a mi ignorancia, no se lo q debo hacer para ampliar el "contenido" del gadget... creí entender, como explicas al final del post, que si deseamos añadir una pestaña agregaramos simplemente un código. Por eso creí que para añadir una subpestaña sería igual de simple y no se que debo hacer ahora, entonces.
EliminarEn el caso de q fuera el menú horizontal, tendría q hacer lo mismo para ampliar ese gadget?
Salu2
Si es horizontal no habrá problema, a menos que las subpestañas se vuelvan demasiado extensas.
EliminarCon lo anterior me refería a esto, tu gadget de texto mide aproximadamente 450px de alto, el menú vertical con las nuevas subpestañas que agregaste mide más que eso. Como el contenido del primero es menor, entonces las nuevas subpestañas no tienen espacio para mostrarse, a menos que el gadget de texto mida más, ¿cómo hacer para que mida más? puedes ponerle más contenido a ese gadget, más texto por ejemplo, o bien, si ya no quieres agregarle más texto podrías añadir saltos de línea al final, eso puedes hacerlo agregando después de "Editor:" varias etiquetas como esta:
<br/>
Perfecto, ya entendí, apliqué y salieron más subpestañas. Gracias de nuevo.
ResponderEliminarHola yo tengo que poner este menu en el lado derecho, habria algun modo de que se desplegara hacia la izquierda en vez de a la derecha?
ResponderEliminarNo se decirte, nunca he hecho uno que se despliegue de esa manera :(
Eliminarpero se podria? alomejor solo hay que cambiarle algun codigo de los de despliegue no? yo es que de esto de html ccs y java estoy mas que pegado por lo que no se que es cada cosa y modifico las cosas toqueteando, pero ya codigos no se escribirlos, haber si me podeis ayudar es que por ningun lado hay barras laterales que desplieguen hacia la izquierda y no se porque que forma de discriminar a los zurdos! :P bueno espero respuesta
ResponderEliminarLa verdad es que nunca he visto alguno que se despliegue de esa manera, si me entero de algo lo publico ;)
EliminarHola Potro,
ResponderEliminarHe utilizado este menú para mi página web pero no logro que me despliegue los elementos, de hecho sólo despliega el primer elemento del menú y el resto nada, esto para IE explorer 9.
Pongo el menú css como lo tengo ahora por si me puedes echar una mano, lo q sea, una luz sobre q puedo estar haciendo mal.
Gracias.
#menuvertical {
text-align: left;
width:180px;
position: absolute;
top:190px;
left: 3px;
position: relative\9;
top:175px\9;
/*opacity: .9;*/
z-index: 99;
border: 2px solid #ffc82b;
list-style-type: none\9;
}
#menuvertical_location {
position: absolute;
top:11px;
left: 170px;
position: relative\9;
top:11px\9;
left: 170px\9;
}
#menuvertical ul {
list-style-type: none;
padding:0;
}
#menuvertical ul li.nivel1 {
width: 180px; /* Ancho de las pestañas */
}
#menuvertical ul li.primera { /*Líneas división celdas*/
border-top-width: thin;
border-top-style: solid;
border-top-color: #e0d9aa;
}
#menuvertical ul li {
padding:0;
background-image: url(../images/flecha_categoria.png);
background-repeat: no-repeat;
background-position: right center;
/*display: block;
width: 40%;
float: left;*/
}
#menuvertical ul li a {
display: block;
text-decoration: none;
color: #9c503b; /* Color del texto */
background-color: #fff3d6; /* Color de fondo */
border: solid 0px #fee; /* Borde de las pestañas */
border-top: none;
padding: 10px; /*Ancho celda*/
position: relative;
font-family: Verdana, Geneva, sans-serif;
font-size: 12px;
font-weight: bolder;
}
#menuvertical ul li:hover {
position: relative;
color: #000; /* Color del texto al pasar el mouse */
}
#menuvertical ul li a:hover, #menuvertical ul li:hover a.nivel1 {
background-color: #FFF; /* Color de fondo al pasar el mouse */
color: #000;
position: relative;
list-style-type: none;
border: 1px solid #d6d6e6;
}
#menuvertical ul li a.nivel1 {
display: block !important;
display: none;
position: relative;
}
#menuvertical ul li ul {
display: none;
border: 1px solid #d6d6e6;
}
#menuvertical ul li a:hover ul, #menuvertical ul li:hover ul {
display: block;
position: absolute;
left: 179px;
top: -1px;
position: absolute\9;
left: 179px\9;
top: -1px\9;
/*border: 1px solid #d6d6e6;*/
}
#menuvertical ul li ul li a { /*COLOR AZULLLLLLLLLLLLLLLL*/
background-color: #FFF; /* Color de fondo subpestañas */
color: #103856; /* Color del texto subpestañas */
width: 300px;
border: 0px solid #ffc82b;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
#menuvertical ul li ul li a:hover {
position: relative;
/*background-color: #6E6E6E;*/ /* Color de fondo al pasar el mouse subpestañas */
color: #ff7800; /* Color del texto al pasar el mouse subpestañas */
border-top-style: none; /*Para q no halla bordes sobre el submenú al hacer hover sobre el menu de nivel 1*/
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}
Hola Potro,
ResponderEliminarHe utilizado este menú para mi página web pero no logro que me despliegue los elementos, de hecho sólo despliega el primer elemento del menú y el resto nada, esto para IE explorer 9.
Pongo el menú css como lo tengo ahora por si me puedes echar una mano, lo q sea, una luz sobre q puedo estar haciendo mal.
Gracias.
CSS:
#menuvertical {
text-align: left;
width:180px;
position: absolute;
top:190px;
left: 3px;
position: relative\9;
top:175px\9;
/*opacity: .9;*/
z-index: 99;
border: 2px solid #ffc82b;
list-style-type: none\9;
}
#menuvertical_location {
position: absolute;
top:11px;
left: 170px;
position: relative\9;
top:11px\9;
left: 170px\9;
}
#menuvertical ul {
list-style-type: none;
padding:0;
}
#menuvertical ul li.nivel1 {
width: 180px; /* Ancho de las pestañas */
}
#menuvertical ul li.primera { /*Líneas división celdas*/
border-top-width: thin;
border-top-style: solid;
border-top-color: #e0d9aa;
}
#menuvertical ul li {
padding:0;
background-image: url(../images/flecha_categoria.png);
background-repeat: no-repeat;
background-position: right center;
/*display: block;
width: 40%;
float: left;*/
}
#menuvertical ul li a {
display: block;
text-decoration: none;
color: #9c503b; /* Color del texto */
background-color: #fff3d6; /* Color de fondo */
border: solid 0px #fee; /* Borde de las pestañas */
border-top: none;
padding: 10px; /*Ancho celda*/
position: relative;
font-family: Verdana, Geneva, sans-serif;
font-size: 12px;
font-weight: bolder;
}
#menuvertical ul li:hover {
position: relative;
color: #000; /* Color del texto al pasar el mouse */
}
#menuvertical ul li a:hover, #menuvertical ul li:hover a.nivel1 {
background-color: #FFF; /* Color de fondo al pasar el mouse */
color: #000;
position: relative;
list-style-type: none;
border: 1px solid #d6d6e6;
}
#menuvertical ul li a.nivel1 {
display: block !important;
display: none;
position: relative;
}
#menuvertical ul li ul {
display: none;
border: 1px solid #d6d6e6;
}
#menuvertical ul li a:hover ul, #menuvertical ul li:hover ul {
display: block;
position: absolute;
left: 179px;
top: -1px;
position: absolute\9;
left: 179px\9;
top: -1px\9;
/*border: 1px solid #d6d6e6;*/
}
#menuvertical ul li ul li a { /*COLOR AZULLLLLLLLLLLLLLLL*/
background-color: #FFF; /* Color de fondo subpestañas */
color: #103856; /* Color del texto subpestañas */
width: 300px;
border: 0px solid #ffc82b;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
#menuvertical ul li ul li a:hover {
position: relative;
/*background-color: #6E6E6E;*/ /* Color de fondo al pasar el mouse subpestañas */
color: #ff7800; /* Color del texto al pasar el mouse subpestañas */
border-top-style: none; /*Para q no halla bordes sobre el submenú al hacer hover sobre el menu de nivel 1*/
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}
Hola JustMe, pon el código tal como está en la entrada, de esa forma no debería darte problemas.
EliminarEste comentario ha sido eliminado por un administrador del blog.
ResponderEliminarParece que lo has conseguido Daniel, no veo subpestañas en ese menú :)
EliminarPd. Elimino el comentario por el aviso que está al final.
¡Saludos!
Buenisimo me sirvio muchisimo y no fue nada complicado GRACIAS muchas GRACIAS
ResponderEliminarHola Potro, como siempre eres un master de esto. ¿Se puede hacer este menú pegado por completo a la derecha ocupando todo el espacio de la pantalla y que en lugar de color azul , tenga imágenes? Necesito hacer algo como esto http://camaronpanzon.blogspot.mx/
ResponderEliminarEspero me puedas ayudar amigo, gracias.
Hola, parece que ya has conseguido un menú similar.
EliminarSaludos.
Potro el menu es fantástico pero no me queda centrado, fíjate: http://4.bp.blogspot.com/-MCwl2I15YBQ/Uiy1l-XnSWI/AAAAAAAAcRo/l-0iAcQfNgM/s1600/xxzz.jpg
ResponderEliminarComo hago para centrarlo?
Un saludo y gracias por tu ayuda
Hola, puedes poner un margen debajo de #menuvertical {
EliminarPor ejemplo:
margin-left:40px;
Hola potro al poner el menu sale escorado hacia el lado ixquierdo fuera del recuadr. Co se puede poner mas centrado=?
ResponderEliminarHola, mira el comentario que está arriba.
Eliminar¡Se agradece la disponibilida de estos códigos! Estaba buscando un menú desplegable que me agradara y no fuera dificil decolocar y editar. No lo utilicé en un foro, por lo que tuve que poner las cosas en otros lados, pero la base era la misma. Cambié los colores y agregué cosas, quedó muy lindo.
ResponderEliminar¡Gracias!
No me aparecen subpestañas. http://www.euroganancia.blogspot.com
ResponderEliminarHola Diego, no vi este menú en tu blog.
EliminarHey hola, gran información, pero amm, sería posible agregar un subnivel mas (y cual seria la manera correcta)?
ResponderEliminarP. S. Modificando algunos parámetros pude hacerlo pero no logro que sea desplegable, es decir, los niveles 2 y 3 se despliegan a la par cuando me colo en la fila "X" de la columna 1 ...
Te lo debo, no lo he intentado con este menú y el tiempo ahorita me come para poder hacer pruebas :(
Eliminar