top of page

Menú desplegable vertical para Blogger

Hola y bienvenido a este pequeño tutorial, lo primero puedes utilizar este menú desplegable vertical para muchas cosas, tiene mucho en su funcionalidad.

Tu serás quien le dará vida a este Menú :)

Te comento de una vez este Menú es totalmente modificable eso si, si sabes manejar en CSS y si no sabes te recomiendo dejarlo como esta.

✨ AHORA SI VAMOS ALLÁ. ✨



 

INSTRUCCIONES


1. Primero instalaremos la galería de JQuery (Si ya lo tienes instalado salta este paso).

2. Nos vamos a >Tema > Editar HTML > CTRL + F y buscamos </head> el siguiente código lo pegamos antes de </head>.


<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js' type='text/javascript'/>

Ahora instalaremos un Scrip, > CTRL + F y buscamos </head> el siguiente código lo pegamos antes de </head>.


<script type='text/javascript'>
//<![CDATA[
//------------------------------
// Desarrollado por ChumsOF
// Visita https://www.chumsof.art para este script y más.
// Este aviso DEBE permanecer intacto para uso legal.
// ---------------------------------
$(document).ready(function()
{
$("#firstpane p.menu_head").click(function()
{
$(this).css({backgroundImage:"url(https://lh5.googleusercontent.com/-BBN4_uSiCs4/TlQJSAXI5CI/AAAAAAAABnk/cmdGRetC38U/flecha-arriba.png)"}).next("div.menu_body").slideToggle(300).siblings("div.menu_body").slideUp("slow");
$(this).siblings().css({backgroundImage:"url(https://lh5.googleusercontent.com/-mQHPLQrjxcI/TlQJSHgEsZI/AAAAAAAABno/HbkoM9nbaWQ/flecha-abajo.png)"});
});


$("#secondpane p.menu_head").mouseover(function()
{
$(this).css({backgroundImage:"url(https://lh5.googleusercontent.com/-BBN4_uSiCs4/TlQJSAXI5CI/AAAAAAAABnk/cmdGRetC38U/flecha-arriba.png)"}).next("div.menu_body").slideDown(500).siblings("div.menu_body").slideUp("slow");
$(this).siblings().css({backgroundImage:"url(https://lh5.googleusercontent.com/-mQHPLQrjxcI/TlQJSHgEsZI/AAAAAAAABno/HbkoM9nbaWQ/flecha-abajo.png)"});
});
});

//]]>
</script>

3. Ahora lo siguiente es poner el código CSS Vamos a Tema > Editar HTML > CTRL + F > Buscamos }]]></b:skin> y antes de }]]></b:skin> pegamos el siguiente código CSS.


/* --Menú vertical desplegable-- */
.menu_list {
width: 720px; /* Ancho del menú */
}
.menu_head {
padding: 25px 30px;
color:#ffffff; /* Color de las pestañas principales */
cursor: pointer;
position: relative;
margin:5px;
margin-left:7;
margin-right:7;
font-weight:bold;
background-color: #5e5e5e; /* Color de fondo */
background-image: url(https://lh5.googleusercontent.com/-mQHPLQrjxcI/TlQJSHgEsZI/AAAAAAAABno/HbkoM9nbaWQ/flecha-abajo.png);
background-position:center right;
background-repeat:no-repeat;
}
.menu_body {
display:none;
-}
.menu_body a{
display:block;
color:#000000; /* Color de los enlaces */
background-color:#05d5ff; /* Color de fondo de los enlaces */
padding-left:30px;
font-family: 'Bebas Neue', cursive;
text-decoration:none;
}
.menu_body a:hover{
color: #ffffff; /* Color de los enlaces al pasar el cursor */
text-decoration:underline;
}

4. Ahora pondremos el Código HTML nos vamos a la entrada que desee poner menú desplegable, cambiamos la vita a HTML y insertamos el siguiente código.


div class="menu_list" id="secondpane">

<p class="menu_head">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_head">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_head">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>


</div>

Si desea puede agregar mas pestañas copiando y pegando el siguiente código.


<p class="menu_head">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>

Lo único que cambiamos son los nombre ejemplo PESTAÑA 3, LA URL DE ENLACE Y EL NOMBRE DE LA SUB PESTAÑA pueden agregar las pestañas que ustedes deseen.


 

CUALQUIER DUDA QUEDO ATENTO A LOS COMENTARIOS.

3 visualizaciones0 comentarios

Entradas Recientes

Ver todo

Comments


bottom of page