17 julio 2014

Menú vertical desplegable para blogger

menu vertical desplegable blogger

Tras un largo periodo de inactividad, vuelvo de nuevo con un menú vertical desplegable y totalmente responsive con subspestañas por lo que podremos agregar enlaces a cada sección del menú. Al ser responsive se adapta a cualquier anchura de la sidebar.


Para añadir este menú, siga los siguientes pasos:

1.Vaya a Escritorio de Blogger > Plantilla > Editar HTML > buscamos </head>
2. Y antes de ello colocamos el script para desplegar con el código siguiente:

<script async='async' src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function()
{
$("#amor p.menu-inicio").click(function()
{
$(this).next("div.menu_body").slideToggle(300).siblings("div.menu_body").slideUp("slow");
$(this).siblings()
});
$("#secondpane p.menu-inicio").mouseover(function()
{
$(this).next("div.menu_body").slideDown(500).siblings("div.menu_body").slideUp("slow");
$(this).siblings()
});
});
//]]>
</script>

3. Ahora entra en Diseño | Añadir un gadget | HTML/Javascript, y ahí pegas el siguiente código:

<style type="text/css">
.menu-inicio {color: #fff;margin: 2px 0 0 0; padding: 0;margin-top: 10px; background: #057ED5; display: block; border-radius: 4px; transition: all 0.5s ease;font-size: 14px; padding: 20px 0 10px 10px; border-radius: 4px; }
.menu-inicio a{color: #fff;}
.menu_body {width:100%;display:none;}
.menu_body a{background: #7CC6FA; display: block; padding: 10px 0 10px 10px; font-size: 14px; outline: 0; transition: all 0.5s ease; border-radius: 4px; line-height: 28px;color: #fff;}
.menu_body a:hover{
background: #057ED5; color: #fff; transition: all 0.5s ease; display: block; border-radius: 4px;}
</style>
<div class='menu-amor' id='amor'>
<p class='menu-inicio'><a href='URL del enlace'>INICIO</a></p>
<p class='menu-inicio'>Pestaña 1</p>
<div class='menu_body'>
<a href='URL del enlace'>Sub pestaña 1</a>
<a href='URL del enlace'>Sub pestaña 2</a>
<a href='URL del enlace'>Sub pestaña 3</a>
</div>
<p class='menu-inicio'>Pestaña 2</p>
<div class='menu_body'>
<a href='URL del enlace'>Sub pestaña 1</a>
<a href='URL del enlace'>Sub pestaña 2</a>
<a href='URL del enlace'>Sub pestaña 3</a>
</div>
<p class='menu-inicio'>Pestaña 3</p>
<div class='menu_body'>
<a href='URL del enlace'>Sub pestaña 1</a>
<a href='URL del enlace'>Sub pestaña 2</a>
<a href='URL del enlace'>Sub pestaña 3</a>
</div>
<p class='menu-inicio'>Pestaña 4</p>
<div class='menu_body'>
<a href='URL del enlace'>Sub pestaña 1</a>
<a href='URL del enlace'>Sub pestaña 2</a>
<a href='URL del enlace'>Sub pestaña 3</a>
</div></div>

Ya sólo cambia el nombre de las pestañas, de las subpestañas, y agrega las URLs de los enlaces donde se indica.


Escrito por:

Mi nombre es Antonio, soy sobre todo Sevillista y apasionado con los blog desde el 2007.

Sígueme en: | Facebook | Twitter | Google+

55 comentarios

muchas gracias como siempre muy bueno ;)

No se abre, y no cambia el cursor cuando se pincha, con lo que incita a las personas a que no hagan clic.
No se si será problema de mi blog, pero he visto que en la demo, tampoco cambia el cursor al situarlo encima del bloque.

Un saludo

No se cual es tu problema real pero en la demo funciona perfectamente.

hola disculpa me podria facilitar ese menu que esta a la izquierda de la pagina lo quiero para poner la seccion de tipos de musica en mi blog

Lo siento mucho pero este menú es exclusivo de este blog.
De todas formas el de esta entrada lo puedes modificar y adaptar a lo que deseas.

el de esta entrada lo pongo pero se queda ommpvil no se despliega

Colócalo y déjame dirección url de tu blog para poder ver lo que ocurre.

solo me interesea ponerlo a la izquieda asi como este aunque sea este de esta misma entrada

Colócalo de nuevo le faltaba la librería jquery, ya está colocada.
Normalmente esta librería está instalada en todos los blog por eso no la puse.

ok bueno como tengo dos blog uno lo uso para probar los html antes de ponerlo a mi blog principal asi no dañaria algo del html aqui esta el blog de prueba:http://blogdepruebathebig.blogspot.com/
y este es donde lo pondre cuando funcione bien:http://bajatusprogramas.blogspot.com/

Instala la librería jquery en el blog de pruebas después de <head>

<script async='async' src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js' type='text/javascript'/>

Ahora es questión de cambiar los colores.
Espera un momento y te paso el css en colores negros.

gracias man ahora se despliega ya, ahora solo me falta ponerlo a la izquierda muchas gracias

Elimina los estilos y pon este:
<style>
.menu-inicio {color: #fff;margin: 2px 0 0 0; padding: 0;margin-top: 1px; background: #000; display: block; border-radius: 4px; transition: all 0.5s ease;font-size: 16px; padding: 10px 0 10px 10px; border-radius: 4px; }
.menu-inicio a{color: #fff;}
.menu_body {width:100%;display:none;}
.menu_body a{background: #ccc; display: block; padding: 10px 0 10px 10px; font-size: 14px; outline: 0; transition: all 0.5s ease; border-radius: 4px; line-height: 20px;color: #000;}
.menu_body a:hover{
background: #000; color: #fff; transition: all 0.5s ease; display: block; border-radius: 4px;}

</style>

Pues nada, ahora a acoplarlo a tu gusto en cuanto a tamaño de letras y colores.
Gracias por visitar y comentar en el blog.

gracias a ti bro por la ayuda

espero que haga un tema sobre como poner un menu o objeto en cualquier parte de la pagina

buenas, oye bro viste que en el blog de prueba me funciono bn este menu pero cuando lo puse en el otro no se despliega y le puse igual con la libreria jquery y nada tambn le quite la libreria y probe y nada

ya bro olvidalo ya lo consegui

Me podria dar una idea sobre como ponerlo a la izquierda

The big no entiendo lo que me quieres decir.

Este comentario ha sido eliminado por el autor.

The Big para lo que quieres habría que modificar muchísimas partes de la plantilla y ello conllevaría mucho tiempo del cual no dispongo.

ok no hay problema bro pense que se le podia indicar una posicion al menu asi como el fan box de facebook que esta a la derecha de mi pagina http://bajatusprogramas.blogspot.com/

bro sabria como mantener este menu vertical desplegado osea que siempre este desplegado al entrar a la pagina

hmmm no me deja poner el html aqui completo pero es el menu que dices categorias en mi blog solo ponle un el click encima y se desplegara:http://bajatusprogramas.blogspot.com/

The big para ello elimina todo el css y coloca en su lugar esto:
<style type="text/css">
.menu {width:250px; height:35px; margin:0 auto 705px auto; position:relative; z-index:100;}
.menu div {position:absolute; padding:10px;
-webkit-transform-style:preserve-3d;
-moz-transform-style:preserve-3d;
transform-style:preserve-3d;
top:100%; left:0; width:230px;}
.menu .odd {background:#ddd;}
.menu .even {background:#eee;}
.menu .first {background:#ddd;}
.menu .last {box-shadow:0 15px 10px -10px rgba(0,0,0,0.3); border-radius: 0 0 10px 10px;}
.menu .sub img {display:block;float:left; padding:0 10px 10px 0;}
.menu .sub p {font: normal 15px , sans-serif; color:#000 !important; padding:0; margin:0;}
.menu .sub p span {display:table; font: bold 22px century gothic, sans-serif; color:#ea0 !important;text-shadow: -1px 0 #000000, 0 1px #000000, 1px 0 #000000, 0 -1px #000000, -1px 1px 2px #000000;}
.menu .sub p a {text-decoration:none;font: normal 12px/15px arial, sans-serif; color:#09c !important;}
.menu .sub p a:hover {text-decoration:none;}
.menu a.main {display:block; font: bold 30px century gothic, sans-serif;text-shadow: -1px 0 #000000, 0 1px #000000, 1px 0 #000000, 0 -1px #000000, -1px 1px 2px #000000; text-align:center; text-decoration:none;cursor:pointer; color:#F2F2F2 !important; border-radius:10px 10px 0 0; position:relative; z-index:100;border:2px solid #000000;
background-image: linear-gradient(bottom, rgb(0,102,153) 16%, rgb(0,0,0) 58%);
background-image: -o-linear-gradient(bottom, rgb(0,102,153) 16%, rgb(0,0,0) 58%);
background-image: -moz-linear-gradient(bottom, rgb(0,102,153) 16%, rgb(0,0,0) 58%);
background-image: -webkit-linear-gradient(bottom, rgb(0,102,153) 16%, rgb(0,0,0) 58%);
background-image: -ms-linear-gradient(bottom, rgb(0,102,153) 16%, rgb(0,0,0) 58%);
background-image: -webkit-gradient(linear, left bottom,left top,
color-stop(0.16, rgb(0,102,153)),color-stop(0.58, rgb(0,0,0))
);}
.menu a.main:hover {opacity:0.7;}
</style>

Este comentario ha sido eliminado por el autor.

Buenas noches amigo tengo una gran pregunta

me gusta mucho este menu desplegable pero siempre que lo incorporo al blog funciona bien pero tengo un slide automatico y cuando activo el menu el slide deja de funcionar me prodrias ayudar con ese problema amigo el blod de pruebas es el siguiente http://lahoradelnekoradioanime.blogspot.com/

Joseph lo que puede ocurrir es que sean incompatibles los script, de todas formas tienes instaladas 2 librerías jquery y con una ya sería válido.
Para el tema de incompatibilidad puedes ver este artículo

Hola buenas disculpa no te has pasado ya que dropbox te tumba los archivos js y css

Yaneidi en esta entrada no hay archivos alojados en dropbox.
A que entrada te refieres?

bro disculpa he notado que si uso el buscador aqui los resultados se ponen bien sin embargo mi buscador se abre un cuadro de resultado por encima http://bajatusprogramas.blogspot.com/

The Big, debes crear una pagina e introducir el script y buscador que te proporciona google.
Este es el código pero con tu id:
<script>
(function() {
var cx = 'ID de tu buscador';
var gcse = document.createElement('script');
gcse.type = 'text/javascript';
gcse.async = true;
gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
'//www.google.com/cse/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(gcse, s);
})();
</script>
<gcse:searchresults-only></gcse:searchresults-only>

Y en la plantilla en el html debes colocar el buscador, así:
<div id='search-box'>
<form action='url de la página donde esta el buscador' id='cse-search-box'>
<input name='cx' type='hidden' value='partner-pub-numeracion buscador'/>
<input name='cof' type='hidden' value='FORID:10'/>
<input name='ie' type='hidden' value='ISO-8859-1'/>
<input id='search-text' name='q' onblur='if (this.placeholder == &quot;&quot;) {this.placeholder = &quot;Buscar en el blog...&quot;;}' onfocus='if (this.value == &quot;buscar..&quot;) {this.value = &quot;&quot;}' placeholder='Buscar en el blog...' type='text'/>
<button id='search-button' type='submit'/>
</form>
</div>

y lugo darle un poco de css, más o menos así:
#search-box{position:relative;width:250px;margin:15px 0;float:right;margin-right:35px}
#cse-search-box{height:28px;border-radius:2px;background-color:#fff;overflow:hidden;border:1px solid #dfdfdf;border-radius:4px}
#search-text{font-size:12px;color:#ddd;border-width:0;background:transparent}
#search-box input[type="text"]{width:90%;padding:5px 20px 12px 10px;color:#666;outline:none}
#search-button{position:absolute;top:-2px;right:4px;height:32px;width:20px;margin-top:10px;font-size:14px;color:#fff;text-align:center;line-height:0;border-width:0;background:url(http://1.bp.blogspot.com/-K7tY9_gz3js/UmnCR22ZJII/AAAAAAAAF68/U8N5jBtaLLM/s1600/search-icon.jpg) no-repeat;cursor:pointer}


Bro una pregunta el buscador me funciona bien y todo y encuentra los resultados pero cuando hago click en uno de los resultados que encontre me aparece un mensaje de page not found

ahh ya bro fijate que habia puesto un reproductor de musica no se que tendra cuando lo quite ya habrian los links de los resultados,

este es el reproductor cuando lo integro vuelve el problema no me deja poner el codigo aqui

hola,bro disculpa sabría algo sobre como me aparece esto al copiar algún texto de mi blog:

Copy and WIN : http://ow.ly/KfYkt

No he puesto ningún código para que esto aparesca

Me imagino que debe ser de algún script que hayas colocado ultimamente.
Repasa bien los script y elimina el que te lo produce.

Buenas tardes, se podria hacer el mismo menu pero con 3 o 4 escalones?, "Categoria principal>Categoria 2>Categoria 3> Categoria 4"

Un Saludo

Prueba con esto haber que tal...
<p class='menu-inicio'>categoría principal</p>
<div class='menu_body'>
<p class='menu-inicio'>trucos blogger</p>
<div class='menu_body'>
<a href='URL del enlace'>redes sociales</a>
<a href='URL del enlace'>menu</a>
<a href='URL del enlace'>gadget</a>
<a href='URL del enlace'>slider</a>
</div>
<p class='menu-inicio'>categoria 2</p>
<a href='URL del enlace'>Sub pestaña 3</a>
</div>

Es Perfecto, Muchas Gracias!
Si puedo hacer algo por usted no dudes en contactar conmigo.
Te he agregado y seguido en face, twit, y goo+
Un saludo y que tengas buen fin de semana!

Este comentario ha sido eliminado por el autor.

he aplicado los cambios al blog, solo me funciona la pestaña de inicio. Las demás no se me desplegan. ¿Sabes a qué se puede deber? Gracias. http://historiaenroma.blogspot.com.es/

Este comentario ha sido eliminado por el autor.
Este comentario ha sido eliminado por el autor.

hola Al igual que Felipe, solo me funciona la pestaña de inicio. Veo que Felipe lo ha solucionado y hasta ha cambiado el diseño. Me podéis pasar el secreto? gracias!

Hola, me podrían explicar: ¿cómo puedo cambiarle los colores al menú.?


Por favor, comente de acuerdo al tema del artículo.
Serán removidos todos los Comentarios con enlaces.
Si quieres recibir los nuevos comentarios marca "Avisarme"