TUTORIAL | Vertical Accordion Menu

OLIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII -emoción al máximo-.

Hola! Si! Aún sigo viva, no he muerto. Aunque casi. He estado, por casi 5 días, delicada del estomago y básicamente he vivido en mi baño -vergüenza a mil-. Por otro lado, este pasado fin de semana, por fin celebramos la boda de plata de mis padres (* - *). Estupendo evento, incluso Duke -mi chibi perro- estuvo presente con su esmoquin. LOL

Hoy vengo a dejar este lindo tutorial que me pidieron. La verdad que no sé si referían a este menú o al otro que llevo colgado en la cabecera, así que para la sgte. semana hago el tutorial del otro menú. jujujuju (ewe).

Bueno comencemos pero YA!

Vista previa #01

Vista previa #02

1RO: Desde tu Plantilla en Editar HTML, pega el sgte. código script antes de </head>

<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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTm6SH7_7Y1y436vi6VrCM2NxU09PIoyPcI0IMQpO9RaupfAzi7iToxwC-yWocUFPurYxuMjhg9IxLkbmAB03dnOCa3nIcb2rZIFs-AJmT_S1AIzssm7ErIOjptWEY9UnfSpoQmcjLiqI/)"}).next("div.menu_body").slideToggle(300).siblings("div.menu_body").slideUp("slow"); $(this).siblings().css({backgroundImage:"url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrqoiMi0CFAwPwZTTuZsxQ4EAd0ro-vf8fMT6t8yjX3zQkRFvRJzHc_h4CeNWxQ1ahkwPeraKuSgjqwSMQ0TTmtS-h2j9OGptubSYYiTf-vdZ6Gnyb-G0Wll9Fh9P77Y28UGWB6lEMnok/)"}); }); $("#secondpane p.menu_head").mouseover(function() { $(this).css({backgroundImage:"url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTm6SH7_7Y1y436vi6VrCM2NxU09PIoyPcI0IMQpO9RaupfAzi7iToxwC-yWocUFPurYxuMjhg9IxLkbmAB03dnOCa3nIcb2rZIFs-AJmT_S1AIzssm7ErIOjptWEY9UnfSpoQmcjLiqI/)"}).next("div.menu_body").slideDown(500).siblings("div.menu_body").slideUp("slow"); $(this).siblings().css({backgroundImage:"url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrqoiMi0CFAwPwZTTuZsxQ4EAd0ro-vf8fMT6t8yjX3zQkRFvRJzHc_h4CeNWxQ1ahkwPeraKuSgjqwSMQ0TTmtS-h2j9OGptubSYYiTf-vdZ6Gnyb-G0Wll9Fh9P77Y28UGWB6lEMnok/)"}); }); }); //]]> </script>

2DO: Ahora antes de ]]></b:skin> añade este otro código y guarda todo.

/* Vertical Accordion Menu ----------------------------------------------- */ .menu_list { width: 205px; /* Ancho del menú */ } .menu_head { padding: 5px 10px; color:#fff; /* Color de las pestañas principales */ text-shadow: 0px 1px 0px #f77269, -1px 0px 0px #f77269; cursor: pointer; position: relative; margin:1px; margin-left:0; margin-right:0; background-color: #fad1cb; /* Color de fondo */ border-top: #fffdf1 1px solid; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrqoiMi0CFAwPwZTTuZsxQ4EAd0ro-vf8fMT6t8yjX3zQkRFvRJzHc_h4CeNWxQ1ahkwPeraKuSgjqwSMQ0TTmtS-h2j9OGptubSYYiTf-vdZ6Gnyb-G0Wll9Fh9P77Y28UGWB6lEMnok/); background-position:center right; background-repeat:no-repeat; } .menu_head a{ color:#fff; /* Color de las pestañas principales */ } .menu_head a:hover{ color:#fff; /* Color de las pestañas principales */ } .menu_body { display:none; } .menu_body a{ display:block; color:#fff; /* Color de los enlaces */ background-color:#f5aca6; /* Color de fondo de los enlaces */ padding-left:10px; text-decoration:none; } .menu_body a:hover{ color: #f5aca6; /* Color de los enlaces al pasar el cursor */ background: #fffdf1; }

3RO: Por último desde Diseño agrega un nuevo gadget HTML/JavaScript, pega este código, guarda y ya tienes un menú vertical con efecto acordeón.

<div id="firstpane" class="menu_list">
<p class="menu_head">HOME</p>
<div class="menu_body">
<a href='URL'>PÁGINA PRINCIPAL</a>
</div>
<p class="menu_head">AFILIATE</p>
<div class="menu_body">
<a href='URL'>AFILIACIÓN</a></div>
<p class="menu_head">CONTACT</p>
<div class="menu_body">
<a href='URL'>CONTÁCTAME</a>
</div>
<p class="menu_head">MÁS PESTAÑAS</p>
<div class="menu_body">
<a href="URL">1RA SUB-PESTAÑA</a>
<a href="URL">2DA SUB-PESTAÑA</a>
<a href="URL">3RA SUB-PESTAÑA</a>
<a href="URL">4TA SUB-PESTAÑA</a>
</div>
</div>

LISTO!

Recomendaciones y Personalización

• Puedes cambiar los nombre de las PESTAÑAS y SUB-PESTAÑAS como más guste.
• Reemplaza URL por los enlaces que le correspondan.
• Si quieres agregar una NUEVA PESTAÑA solo pega lo sgte. antes del último </div>  en el código.

<p class="menu_head"> NUEVA PESTAÑA</p <div class="menu_body"> <a href="URL">1RA SUB-PESTAÑA</a> <a href="URL">2DA SUB-PESTAÑA</a> <a href="URL">3RA SUB-PESTAÑA</a> <a href="URL">4TA SUB-PESTAÑA</a> </div>

• Si lo que quieres es agregar una NUEVA SUB-PESTAÑA, pega este código debajo de la última sub-pestaña.

<a href="URL">NUEVA SUB-PESTAÑA</a>

• Ya para finalizar. He dejado entre slashes y asteriscos /* */ lo que puedes personalizar.

ESO sería TODO!! Tam TAM!!!!

Cualquier duda al respecto, no dudes en comentarla aquí, a mi Gmail, en mi Facebook personal, o a mi Twitter. En estos dos últimos respondo mucho más rápido ya que los tengo asociados a mi celular, y yo NUNCA ME SEPARO DE MI CELULAR. Bueno solo a veces lo olvido. LOL

AH! UNA ÚLTIMA COSA. Quería mencionar que ya tenemos un horario para el blog, así que date una pasada por HORARIO SEMANAL, y entérate de cuando y quién está publicando.
AHORA SI! Bye Bye!! Hasta la próxima ositoooos  -nombre patentado por Dayi-.

Créditos: El Potro