Poner menú horizontal con efecto deslizante en blogger


Un menú es importante para nuestro blog pues facilitará la navegación a nuestros lectores por esa razón hoy les traigo otro menú muy elegante y sencillo se trata de este:

Menu deslizante en blogger

Pueden ver una demostración del menú aquí:

http://bloggin-prueba.blogspot.com/


Muy bien para agregarlo y siendo breves iniciamos con ir a Plantilla > Edición HTML y buscamos este código </head>, encima de ese código pegaremos lo siguiente:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>

<script type='text/javascript'>
//<![CDATA[
// jQuery Multi Level CSS Menu #2- By Dynamic Drive: http://www.dynamicdrive.com/
jQuery.noConflict();
var arrowimages={down:['downarrowclass', 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3gYfYIZ5sld02c1JFjmGh0QvZT_kLmsasYyrd1APIj8CNHLZY_GrIA6HUU6CMvrBH0cLb29XdC3QXqXL_KZVgZMwtBb_41iUx68KyGiHyD4xTFxrb3fwPN1lEszff4k5x8A6aAZ-SPfKZ/', 23], right:['rightarrowclass', 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijXamCUpze6MH73cFsp5IsY_pQ9bNPdRkvYh9_xBh0_HL4bGqc9oZqmH9BUzof_lJlHxNCXW6N_UsRA1tVhyybXkqzyWe8Ht8Y2-qkYwU_zgSzV1k_dRhVe15FHTo4Cug6VFVFWgDduecQ/']}

var jqueryslidemenu={
animateduration: {over: 200, out: 100},
buildmenu:function(menuid, arrowsvar){
jQuery(document).ready(function(jQuery){
var jQuerymainmenu=jQuery("#"+menuid+">ul")
var jQueryheaders=jQuerymainmenu.find("ul").parent()
jQueryheaders.each(function(i){
var jQuerycurobj=jQuery(this)
var jQuerysubul=jQuery(this).find('ul:eq(0)')
this._dimensions={w:this.offsetWidth, h:this.offsetHeight, subulw:jQuerysubul.outerWidth(), subulh:jQuerysubul.outerHeight()}
this.istopheader=jQuerycurobj.parents("ul").length==1? true : false
jQuerysubul.css({top:this.istopheader? this._dimensions.h+"px" : 0})
jQuerycurobj.children("a:eq(0)").css(this.istopheader? {paddingRight: arrowsvar.down[2]} : {}).append(
'<img src="'+ (this.istopheader? arrowsvar.down[1] : arrowsvar.right[1])
+'" class="' + (this.istopheader? arrowsvar.down[0] : arrowsvar.right[0])
+ '" style="border:0;" />')
jQuerycurobj.hover(function(e){
var jQuerytargetul=jQuery(this).children("ul:eq(0)")
this._offsets={left:jQuery(this).offset().left, top:jQuery(this).offset().top}
var menuleft=this.istopheader? 0 : this._dimensions.w
menuleft=(this._offsets.left+menuleft+this._dimensions.subulw>jQuery(window).width())? (this.istopheader? -this._dimensions.subulw+this._dimensions.w : -this._dimensions.w) : menuleft
if (jQuerytargetul.queue().length<=1)
jQuerytargetul.css({left:menuleft+"px", width:this._dimensions.subulw+'px'}).slideDown(jqueryslidemenu.animateduration.over)},
function(e){
var
jQuerytargetul=jQuery(this).children("ul:eq(0)")
jQuerytargetul.slideUp(jqueryslidemenu.animateduration.out)})})
jQuerymainmenu.find("ul").css({display:'none', visibility:'visible'})})}}
jqueryslidemenu.buildmenu("myslidemenu", arrowimages)
//]]>
</script>

Luego antes de  ]]></b:skin> pega los estilos:

/* Menú horizontal deslizante
----------------------------------------------- */
.jqueryslidemenu{
background: #414141; /* Color de fondo del menú */
width: 100%;
font-weight: bold;
font-size: 12px; /* Tamaño de la letra */
font-family: Verdana; /* Tipo de letra */
}

.jqueryslidemenu ul{
margin: 0;
padding: 0;
list-style-type: none;
}

.jqueryslidemenu ul li {
position: relative;
display: inline;
float: left;
}

.jqueryslidemenu ul li a {
display: block;
background: #414141; /* Color de las pestañas */
padding: 8px 10px;
border-right: 1px solid #778; /* Color del borde que separa las pestañas */
text-decoration: none;
}

* html .jqueryslidemenu ul li a {
display: inline-block;
}

.jqueryslidemenu ul li a:link, .jqueryslidemenu ul li a:visited {
color: #FFF; /* Color del texto */
}

.jqueryslidemenu ul li a:hover {
background: #000; /* Color de la pestaña al pasar el cursor */
color: #FFF; /* Color del texto al pasar el cursor */
}

.jqueryslidemenu ul li ul{
position: absolute;
left: 0;
display: block;
visibility: hidden;
}

.jqueryslidemenu ul li ul li {
display: list-item;
float: none;
}

.jqueryslidemenu ul li ul li ul {
top: 0;
}

.jqueryslidemenu ul li ul li a {
font: normal 13px Verdana;
width: 160px; /* Ancho de las subpestañas */
padding: 5px;
margin: 0;
border-top-width: 0;
border-bottom: 1px solid gray;
}

.downarrowclass{
position: absolute;
top: 12px;
right: 7px;
}

.rightarrowclass{
position: absolute;
top: 6px;
right: 5px;
}

Por último vas a Diseño | Añadir un Gadget| Html/JavaScript ahí pegas la siguiente estructura:

<div class="jqueryslidemenu" id="myslidemenu">
<ul>
<li><a href="URL del enlace">Pestaña 1</a></li>
<li><a href="URL del enlace">Pestaña 2</a></li>
<li><a href="URL del enlace">Pestaña 3</a>
<ul>
<li><a href="URL del enlace">Sub 3.1</a></li>
<li><a href="URL del enlace">Sub 3.2</a>
<ul>
<li><a href="URL del enlace">Sub 3.2.1</a></li>
<li><a href="URL del enlace">Sub 3.2.2</a></li>
<li><a href="URL del enlace">Sub 3.2.3</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="URL del enlace">Pestaña 4</a></li>
<li><a href="URL del enlace">Pestaña 5</a>
<ul>
<li><a href="URL del enlace">Sub 5.1</a></li>
<li><a href="URL del enlace">Sub 5.2</a></li>
<li><a href="URL del enlace">Sub 5.3</a></li>
<li><a href="URL del enlace">Sub 5.4</a></li>
</ul>
</li>
<li><a href="URL del enlace">Pestaña 6</a></li>

</ul>

<br style='clear: left'/>
</div>

Reemplaza por las URL de los enlaces a donde llevará el Menú en lo que está color Rojo, lo que está en color azul se cambiará por el nombre que lllevará cada enlace, si quieres agregar otra pestaña solo pon antes del último </ul&gt; una línea como esta:
<li><a href="URL del enlace">Otra Pestaña</a></li>

O sí es otra pestaña con subpestañas lo mismo que lo anterior pero pega el siguiente código:
<li><a href="URL del enlace">Otra pestaña</a>
<ul>
<li><a href="URL del enlace">Subpestaña 1</a></li>
<li><a href="URL del enlace">Subpestaña 2</a></li>
<li><a href="URL del enlace">Subpestaña 3</a></li>
</ul>
</li>

¿ Sigues con dudas y no entiendes claramente ?
 Mira el vídeo.... 

Plantilla blogger

32 comentarios:

  1. Hola, no encuentro ]]> por ninguna parte.. que puede ser?
    Saludos, muy bueno la pag.

    ResponderBorrar
    Respuestas
    1. Hola anónimo mira si no te funciona !!

      Haz esto

      1 vete a edicion de html de tu plantilla.
      2 pincha en el codigo.
      3. pulsa ctrl+f
      4 teclea : y te aparecerá.

      o sólo escribe skin !!!

      Borrar
  2. hola andres,ha ver si me puedes ayudar,te explico,tengo un blog con menu horizontal con imagenes que se habren en un reproductor,pero cada vez que doy click a los enlaces me salta la pagina y yo quisiera que solo las cambiara en el reproductor,que hago para solucionarlo,gracias

    ResponderBorrar
    Respuestas
    1. Hola anónimo, no comprendo muy bien me facilitarías el trabajo y la solución de tu duda si pones el link de tu blog por favor....

      Borrar
  3. estoy creando una web,pero al hacer click en los enlaces salta la pagina,y quiero que solo cambien en la entrada,que debo hacer.gracias

    ResponderBorrar
    Respuestas
    1. Hola miteledeportiva no entiendo bien lo de que solo cambie en la entrada si gustas puedes dejarme un link de tu web o blog para analizar que sucede y darte una respuesta...

      Borrar
  4. Respuestas
    1. Bueno si los colocaste en el blog no los veo el menú veo algo de canales y al dar click a mi no me salta a otra ventana según como te entiendo..

      Borrar
  5. Respuestas
    1. Ya miré tu sitio no veo el menú veo algo con imágenes.... pero sin embargo al dar click no me salta..... a otra venta sigue ahí...

      Borrar
  6. Hola:

    Primeramente te felicito por tu trabajo y más aún por compartirlo, y al fin he encontrado un menú sencillo y elegante. Sin embargo, a pesar de seguir los pasos al pie de la letra una y otra vez no consigo que se desplieguen las pestañas.

    Sabes que podrá estar sucediendo?

    http://jlhermida.blogspot.mx/

    Muchas gracias.

    ResponderBorrar
    Respuestas
    1. Hola Jo´se Hermida Muchas gracias por tu gentil comentario; respecto a tu blog y el menú que decidiste implementar he analizado el código de menú puesto sobre tu plantilla no veo irregularidades sin embargo me quedan duds sobre si tu plantilla está hecha con el diseñador de plantillas de blogger ó la precargaste manualmente....


      De ser la primera opción te recomiendo te pases por este post del blog a ver si te sirve:

      http://www.blogginred.com/2014/03/como-usar-cualquier-menu-en-las.html

      Saludos,

      desde Colombia !

      Borrar
  7. Disculpa que te vuelva a molestar. Ya logré que aparecieran las sub pestañas; sin embargo, los títulos de estas aparecen separadas (hay una espacio en blanco entre ellas).

    http://jlhermida.blogspot.mx/

    Si pudieras te agradecería tu ayuda.

    Saludos.

    ResponderBorrar
    Respuestas
    1. Sí me di cuenta bueno De neuvo analicé tu plantilla y el CSS que tiene el menú "Algunos elementos" no coinciden con el que puse aquí en el post no sé si tu plantilla de forma automática cambie los valores (Esto puede suceder cuando hay variables iguales) Así que en algún código debes tener este factor:

      style="top: 30px; visibility: visible; left: 0px; width: 171px; display: none;"

      Donde el tamaño del espacio vacío lo define lo primero:

      top: 30px;

      Saludos..

      Borrar
  8. Andrés:

    Te agradezco mucho tu pronta respuesta y apoyo y te felicito por el hecho de estar pendiente de quienes te siguen -en realidad hace apenas unos días fue mi primer contacto con tu blog pero de ahora en adelante voy a estar al tanto de su contenido ya que veo es bastante valioso.

    Lo que no te comenté y te voy a ser completamente honesto es que la explicación de cómo lograr este menú la volví a encontrar en otro blog -que según yo los datos eran los mismos pero quise tratar- pero por lo que tú me dices no es así- y fue cuando me aparecieron los submenús.

    Lo que he hecho ahora es volver a copiar tu script, código y la estructura de datos en el gadget e igualmente no aparecen los submenús; sin embargo, cambiando sólo el script por el del otro blog ya me aparecen por lo que veo el problema se encuentra dentro de éste, será así?

    (Lo que me expresas del diseñador de plantillas del blogger y explicas en tu otro post lo que hice cuando creé mi blog fue escoger una plantilla sencilla y dentro del apartado plantillas fue cambiarla por otro modelo -sencillo también- y la personalicé. Y los pasos a seguir que explicas en dicho post los iba a realizar más me di cuenta que la plantilla ya se encontraba como tú recomiendas -quizás lo llevé a cabo antes en este ajetreo de encontrar un buen menú como el tuyo y no me acuerdo).

    Y en cuanto al factor que me explicas no lo encuentro por ninguna parte o si hay que agregarlo no doy donde.

    No es que quiera que hagan las cosas por mí pero mis conocimientos en programación son escasos y ya me volví loco moviéndole a todo sin lograr lo que quiero.

    Te dejo de nuevo mi blog con tu código, datos del gadget pero con el script del otro blog y si fueras tan amable de revisarlo para ver si detectas donde puede estar el problema te lo voy a agradecer mucho.

    (O si prefieres y no es mucha lata la que te estoy dando te lo puedo dejar pero con tu script también -aunque me dices que ya lo revisaste antes de que yo encontrara el otro blog y no encontraste irregularidades...).

    Muchas gracias otra vez.

    Recibe un cordial saludo desde México!!

    ResponderBorrar
    Respuestas
    1. Hola José Hermida Sí así es el post también lo tiene mi colega el Potro en su blog ya supe que el Script tenía inestabilidades por lo que lo actualicé por el que ahora tiene el allí....

      Ahora Trata de probar si te funciona no te preocupes sino sabes toda pla programación necesaria para dejar tu blog Full con el tiempo vas aprendiendo algunas cosas...

      Según leí el nuevo script ya está para que funcione con otras versiones de librerías...

      Tranquilo siempre respondo a diario los comentarios que me dejan.. Para eso es este blog para ayudar a los demás :D

      Borrar
  9. Estimado Andrés:

    Como doy lata, disculpa las molestias. Ya encontré el factor que mencionas:

    .jqueryslidemenu ul li ul li a {
    font: normal 13px Verdana;
    width: 160px; /* Ancho de las subpestañas */
    padding: 5px;
    margin: 0;
    border-top-width: 0;
    border-bottom: 1px solid gray;
    style= "top: 30px; visibility: visible; left: 0px; width: 171px; display: none;"
    }

    Y veo que si es el que pertenece a las subpestañas (cambio el tamaño de la letra y si se refleja; sin embargo, cambio el valor de "top" que tú mencionas y no sucede nada. Igual sucede con el width...sabrás que sucede?

    Te agradezco mucho tu apoyo.

    ResponderBorrar
    Respuestas
    1. Hola Bueno acabo de buscar y buscar llegue a una conclusión no muy fuerte pero la más probable y creo que tu plantilla rechaza en lagunas partes este menú, pues acabo de ponerla en este blog de pruebas:

      http://bloggin-prueba.blogspot.com/

      Y el menú me corre perfectamente..

      Dime que versión de Jquery tienes en tu blog no se sabe también puede ser eso... Los conflictos entre las librerías...

      Borrar
  10. Estimado Andrés:

    Ya lo logré!!

    Disculpa las molestias y muchas gracias por tu apoyo.

    Saludos!!

    ResponderBorrar
    Respuestas
    1. Excelente José me alegra des solución..Gracias por comentar cualquier cosa sólo escribeme... !!

      Saludos,

      Espero nos sigas leyendo :D

      Borrar
  11. Estimado Andrés:

    Te tomo la palabra y pues otra vez molestándote: sucede que de repente cambió el ancho de la plantilla y no puedo acomodar como quiero los gadgets y por lo tanto el contenido del blog no tiene la disposición que deseo.

    Ya le busqué por todas partes -incluyendo internet- y no encuentro la solución.

    Sabrás que habrá pasado y como solucionarlo?

    Te dejo un link con las imágenes para que me entiendas mejor.

    http://www.4cube-solutions.com/imagenes.html

    Te agradezco mucho tu tu tiempo y amabilidad.

    Saludos tequileros.

    ResponderBorrar
    Respuestas
    1. Hola José Hermida Te comento La cuestión se puso un poco compleja:

      Pero como no tengo acceso a tu plantilla directo me es díficil analizar por fuera sin embargo trata de buscar esta parte y trabajar sobre un ancho si es qeu te sale para acomodar ese problema:

      .post {

      Espero te salga así pues los navegadores son distintos y como dije no tengo acceso pleno a tu plantilla,, estaré al tanto que pasa, Saludos.

      Borrar
  12. Estimado Andrés:

    Ya quedó resuelto. Te agradezco mucho tu disposición.

    Una preguntita: de casualidad no habrás hecho un post de como tener la parte de comentarios siempre visible?, como en tu caso, y de expandir una foto -del gagdet, no de la entrada, como las que se encuentran en mi blog- al pasar el cursor sobre de ellas?

    Gracias de nuevo!

    Buen fin se semana!

    ResponderBorrar
    Respuestas
    1. Hola, No entiendo muy bien la parte de comentarios siempre visibles aunque dices que cmo en mi caso aún no te entiendo claramente, y lo del Gadget sería un efecto con CSS o Jquery tendría que hacer el post si gustas lo hago.... !!

      Borrar
  13. Uy mi estimado Andrés, tratar con personas como tu con esa disposición para compartir sus conocimientos da mucho gusto. Te tomo la palabra en cuanto a la creación del post!!

    Con respecto al tema de los comentarios, cuando entro a un post de tu blog al final de la información siempre me aparece "Agregar un comentario" o "Publicar un comentario" con un fondo azul, ya sea con la "caja" donde se escribe visible o haciendo clic en "Agregar comentario para que aparezca la caja -como en este post. A eso me refiero.

    Y sin el ánimo de abusar algo que también me ha gustado mucho de tu blog es que cuando presentas varias entradas en la misma página no aparecen completas, sino que hay un recuadro que dice "Leer más".

    Bueno Andrés, te agradezco mucho tu disposición y amabilidad!

    Buen día!!

    Buen día!!

    ResponderBorrar
    Respuestas
    1. Hola José claro lo de los comentarios son estilos css para los comentarios:

      Mira aquí uno que tengo:

      http://www.blogginred.com/2013/04/estilo-para-comentarios-anidados-de.html

      Sobre el botón leer más tengo esta opción de forma manual:

      http://www.blogginred.com/2012/06/poner-boton-leer-mas-en-tu-blog.html

      Sin embargo haré un nuevo post para poner esta opción en el blog pero deforma automática...

      De nada,

      Y saludos :D

      Borrar
  14. Estimado Andrés:

    Cómo decimos en México: "No andaba muerto, andaba de parranda". Me desaparecí unos días más aquí estamos de regreso.

    Te agradezco la información que me estás pasando en tu comentario. Ahora la miraré con calma.

    Seguimos pendientes.

    Muchas gracias again.

    Saludos.

    ResponderBorrar
    Respuestas
    1. Hola José Hermida Un gusto tenerte por aquí de nuevo ajaja me agrada que leas las notas de mi blog... Espero ayudarte....

      Saludos,

      Borrar
  15. hola, modifique un poco los colores de la pestaña, quiero ponerle color blanco al pasar con el cursor, lo cambie y sigue estando negro al pasar por arriba

    ResponderBorrar
    Respuestas
    1. Hola Ivan Freiberg tendrías que trabajar un poco con el CSS del menú en este caso usando un hover..

      Saludos,

      Borrar
  16. no se me abren las pestañas deslizantes, osea no se me abre 3.4 esas

    ResponderBorrar
    Respuestas
    1. Eres la misma persona de YouTube no ? creo que allí ya te di respuesta...

      Saludos,

      Borrar

ESTAMOS EN: