<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js' type='text/javascript'></script>
<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// ---------------------------------var a = jQuery.noConflict();a(document).ready(function(){a("#firstpane
p.menu_head").click(function(){a(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");a(this).siblings().css({backgroundImage:"url(https://lh5.googleusercontent.com/-mQHPLQrjxcI/TlQJSHgEsZI/AAAAAAAABno/HbkoM9nbaWQ/flecha-abajo.png)"});});
a("#secondpane
p.menu_head").mouseover(function(){a(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");a(this).siblings().css({backgroundImage:"url(https://lh5.googleusercontent.com/-mQHPLQrjxcI/TlQJSHgEsZI/AAAAAAAABno/HbkoM9nbaWQ/flecha-abajo.png)"});});});
//]]></script>
Pega esto en head
integra esto en el head de tu web esto sirve para que reaccione el menú ya tiene los conflictos jquery solucionados.
Pega esto en el css
integra esto en el css en plantillas plantilla propia y luego css
/* Menú vertical desplegable----------------------------------------------- */.menu_list { width: 180px; /* ancho del menu*/}.menu_head {padding: 5px 10px;color:#848484; /* color de las
pestañas */cursor: pointer;position: relative;margin:1px;margin-left:0;margin-right:0;font-weight:bold;background-color: #424242; /*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:#848484; /* Color de los enlaces */background-color:#BDBDBD; /* color de los enlaces
*/padding-left:10px;font-weight:bold;text-decoration:none;}.menu_body a:hover{color: #000000; /*color al pasar el cursos */text-decoration:underline;}
html widget
al hacer click
si quieres que se active al hacer click copia este código
<div id="firstpane" class="menu_list"> <p class="menu_head"> Pestaña 1 </p>
<div class="menu_body"> <a href="URL%20del%20enlace">Sub pestaña 1</a> <a href="URL%20del%20enlace">Sub pestaña 2</a>
<a href="URL%20del%20enlace">Sub pestaña 3</a> </div>
<p class="menu_head"> Pestaña 2 </p>
<div class="menu_body"> <a href="URL%20del%20enlace">Sub pestaña 1</a> <a href="URL%20del%20enlace">Sub pestaña 2</a>
<a href="URL%20del%20enlace">Sub pestaña 3</a> </div>
<p class="menu_head"> Pestaña 3 </p>
<div class="menu_body"> <a href="URL%20del%20enlace">Sub pestaña 1</a> <a href="URL%20del%20enlace">Sub pestaña 2</a>
<a href="URL%20del%20enlace">Sub pestaña 3</a> </div></div>
al pasar el mouse
si deseas que se active al pasar el mouse copia este código
<div class="menu_list" id="secondpane"> <p class="menu_head"> Pestaña 1 </p>
<div class="menu_body"> <a href="URL%20del%20enlace">Sub pestaña 1</a> <a href="URL%20del%20enlace">Sub pestaña 2</a>
<a href="URL%20del%20enlace">Sub pestaña 3</a> </div>
<p class="menu_head"> Pestaña 2 </p>
<div class="menu_body"> <a href="URL%20del%20enlace">Sub pestaña 1</a> <a href="URL%20del%20enlace">Sub pestaña 2</a>
<a href="URL%20del%20enlace">Sub pestaña 3</a> </div>
<p class="menu_head"> Pestaña 3 </p>
<div class="menu_body"> <a href="URL%20del%20enlace">Sub pestaña 1</a> <a href="URL%20del%20enlace">Sub pestaña 2</a>
<a href="URL%20del%20enlace">Sub pestaña 3</a> </div></div>
Escrito por: Herman orlando morales lópez
Diseño web profesional. Páginas web. Trucos para jimdo y otras plataformas. pronto mas publicaciones para tu web sobre ayudas jimdo.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Escribir comentario
David (martes, 09 octubre 2012 01:26)
En paginas jimdo no altera la pagina cambiar el código de la pagina o bueno se puede restaurar en caso de que no me guste????
nitroplantillas (martes, 09 octubre 2012 12:43)
no no afecta, si este código está totalmente adaptado para jimdo, y sí se puede restaurar