30 nov. 2012

Menú acordeón/desplegable en gadget

Buenaaas~
He seguido haciendo arreglillos en el blog como han observado jeje *-* También renové algo la C-Box n_n

**Notita: no duden en ponerme comentarios en los posts o C-Box haciendo sus pedidos, dudas, opiniones, etc., empezaré a contestar y realizar lo que me pidan si es posible, no tengan problema ok?:3

 80 seguidores, muchisimas gracias!~ :D

Bueno, aquí les dejo un tuto de poner un lindo menú en plan acordeón, les dejo una imagen de muestra:
Perdonen la falta de ortografía, lo hice deprisa, van* xD
*En este menú se despliega enseñando las subpestañas cuando pasas el cursor por encima

Vamos a plantilla>>edición de HTML>>Ctrl+F>>buscamos </head>
Justo arriba de lo que buscamos, pegamos el siguiente código:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>//<![CDATA[//------------------------------// Developed by Roshan Bhattarai // Visit http://roshanbh.com.np for this script and more.// This notice MUST stay intact for legal use// ---------------------------------$(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>
Ahora buscamos  ]]></b:skin> y arriba pegamos el otro siguiente código:
/* Menú vertical desplegable----------------------------------------------- */.menu_list { width: 180px;}.menu_head {padding: 5px 10px;color:#FF8CCF;cursor: pointer;position: relative;margin:1px;margin-left:0;margin-right:0;font-weight:bold;background-color: #FFC4FC; background-image: url(http://i11.photobucket.com/albums/a168/evelynregly/minigifs/th_minisetas.gif);background-position:center right;background-repeat:no-repeat;}.menu_body {display:none;}.menu_body a{display:block;color:#050800;background-color:#FFACFA; padding-left:10px;font-weight:bold;text-decoration:none;}.menu_body a:hover{color: #92B6D0; text-decoration:underline;}

 Los colores los puse yo a mi gusto como ejemplo, ustedes pueden modificar los códigos de los colores n_n

Ahora vamos a diseño>>añadir gadget>>HTML/Javasript y pegamos lo siguiente:
<div class="menu_list" id="secondpane">
<p class="menu_head">Nombre 1</p>
<div class="menu_body">
<a href="URL">Sub pestaña 1</a>
<a href="URL">Sub pestaña 2</a>
<a href="URL">Sub pestaña 3</a>
</div>
<p class="menu_head">Nombre 2</p>
<div class="menu_body">
<a href="URL">Sub pestaña 1</a>
<a href="URL">Sub pestaña 2</a>
<a href="URL">Sub pestaña 3</a>
</div>
<p class="menu_head">Nombre 3</p>
<div class="menu_body">
<a href="URL">Sub pestaña 1</a>
<a href="URL">Sub pestaña 2</a>
<a href="URL">Sub pestaña 3</a>
</div>

</div>
rojo: nombre que quieres que tenga la pestaña (sobre mi, tutoriales, etc..)
azul: link de la entrada o página que quieres que salga al pinchar
verde: nombre que quieres que tenga las 3 subpestañas para pinchar

Si quieres agregar otra pestaña más con sus subpestañas, antes del último </div>, pega:
<p class="menu_head">Nombre 4</p><div class="menu_body"><a href="URL">Sub pestaña 1</a><a href="URL">Sub pestaña 2</a><a href="URL">Sub pestaña 3</a> </div>
Y ya está, dejenme sus saluditos~


1 comentario:

  1. Muchísimias gracias Yani!!!
    Voy a ver qué tal queda, a ver si lo pongo o no.
    Pero mil gracias de antemano ^^,

    ResponderEliminar

Gracias por dejar tu saludito ·ω· Si tienes algún error o necesitas ayuda con un tutorial, dale a ''haz click aquí'' en la cabecera y mándame un e-mail diciéndome lo que necesitas y si sólo tienes dudas de algo te contestaré en tu blog para que puedas verlo♥♥
––––•(-•RECUERDA: Si quieres afiliar y/o que visite tu blog, pídemelo en ''Afiliados'' en el menú de la cabecera, o en la C-Box (sólo en esos dos sitios, o sino no aceptaré)`•.¸¸.•´´¯`••._.•