Ver Mensaje Individual
  #3 (permalink)  
Antiguo 05/08/2013, 21:20
Avatar de exmatuz
exmatuz
 
Fecha de Ingreso: mayo-2013
Mensajes: 9
Antigüedad: 11 años, 7 meses
Puntos: 1
Respuesta: Duda con menu con java script tipo acordeon

Amigo, yo tengo un menú tipo acordeón hecho con JS, te dejo el código para que lo cheques:

lmenu.js

Código Javascript:
Ver original
  1. (function($){
  2.  $.fn.lMenu=function(){
  3.  
  4.     return this.each(function(){
  5.  
  6.         var menu= $(this);
  7.  
  8.         menu.find('ul li > a').bind('click',function(event){
  9.  
  10.             var currentlink=$(event.currentTarget);
  11.  
  12.             if (currentlink.parent().find('ul.active').size()==1)
  13.             {
  14.  
  15.                 currentlink.parent().find('ul.active').slideUp('fast',function(){
  16.  
  17.                     currentlink.parent().find('ul.active').removeClass('active');
  18.                 });
  19.             }
  20.  
  21.             else if (menu.find('ul li ul.active').size()==0)
  22.             {
  23.  
  24.                 show(currentlink);
  25.             }
  26.             else
  27.             {
  28.  
  29.                 menu.find('ul li ul.active').slideUp('fast',function(){
  30.  
  31.                     menu.find('ul li ul').removeClass('active');
  32.  
  33.                     show(currentlink);
  34.                 });
  35.             }
  36.         });
  37.  
  38.  
  39.         function show(currentlink){
  40.             currentlink.parent().find('ul').addClass('active');
  41.             currentlink.parent().find('ul').slideDown('fast');
  42.         }
  43.     });
  44. }
  45. })(jQuery);


index.html

Código HTML:
Ver original
  1. <div class="menu">
  2.         <ul>
  3.             <li>
  4.                 <a id="Minicio" href="#"><img src="img/menu/index.png"></img> INICIO</a>
  5.             </li>
  6.             <li>
  7.                 <a href="#"><img src="img/menu/man.png"></img> PACIENTES</a>
  8.                 <ul>
  9.                     <li><a class="MaltaPaciente" href="#"><img class="icosub" src="img/crud/add.png"></img> Agregar Paciente</a></li>
  10.                     <li><a id="MlstPaciente" href="#"><img class="icosub" src="img/submenu/search.png"></img> Buscar Paciente</a></li>
  11.                     <li><a href="#"><img class="icosub" src="img/submenu/pdf.png"></img> Exportar Lista PDF</a></li>
  12.                     <li><a href="#"><img class="icosub" src="img/submenu/xls.png"></img> Exportar Lista EXCEL</a></li>
  13.                 </ul>
  14.             </li>
  15.             <li>
  16.                 <a href="#"><img src="img/menu/calendar.png"></img> CITAS</a>
  17.                 <ul>
  18.                     <li><a id="MaltaCitas"href="#"><img class="icosub" src="img/crud/add.png"></img> Ver/Agregar Cita</a></li>
  19.                     <li><a href="#"><img class="icosub" src="img/submenu/eye.png"></img> Ver Calendario</a></li>
  20.                     <li><a href="#"><img class="icosub" src="img/submenu/lista.png"></img> Citas Pendientes</a></li>
  21.                 </ul>
  22.             </li>
  23.             <li>
  24.                 <a href="#"><img src="img/menu/surgery.png"></img> CIRUGÍAS</a>
  25.                 <ul>
  26.                     <li><a href="#"><img class="icosub" src="img/crud/add.png"></img> Agregar Reservación</a></li>
  27.                     <li><a href="#"><img class="icosub" src="img/submenu/eye.png"></img> Ver Calendario</a></li>
  28.                     <li><a href="#"><img class="icosub" src="img/submenu/lista.png"></img> Cirugías Pendientes</a></li>
  29.                 </ul>
  30.             </li>
  31.             <li>
  32.                 <a href="#"><img src="img/menu/finanza.png"></img> FINANZAS</a>
  33.                 <ul>
  34.                     <li><a href="#"><img class="icosub" src="img/crud/add.png"></img> Agregar Nuevo Pago</a></li>
  35.                     <li><a href="#"><img class="icosub" src="img/submenu/rfinanza.png"></img> Reporte de Ganancias</a></li>
  36.                 </ul>
  37.             </li>
  38.             <li>
  39.                 <a href="#"><img src="img/menu/tools.png"></img> HERRAMIENTAS</a>
  40.                 <ul>
  41.                     <li><a href="#"><img class="icosub" src="img/submenu/imc.png"></img> Calcular IMC</a></li>
  42.                     <li><a href="#"><img class="icosub" src="img/submenu/calc.png"></img> Calculadora</a></li>
  43.                 </ul>
  44.             </li>
  45.             <li>
  46.                 <a href="#"><img src="img/menu/doctor.png"></img> TRABAJADORES</a>
  47.                 <ul>
  48.                     <li><a class="MaltaTrabajador" href="#"><img class="icosub" src="img/crud/add.png"></img> Agregar Trabajador</a></li>
  49.                     <li><a class="MlstTrabajador" href="#"><img class="icosub" src="img/submenu/lista.png"></img> Lista de trabajadores</a></li>
  50.                 </ul>
  51.             </li>
  52.             <li>
  53.                 <a href="#"><img src="img/menu/sistema.png"></img> SISTEMA</a>
  54.                 <ul>
  55.                     <li><a href="#"><img class="icosub" src="img/submenu/catalog.png"></img> Administrar Centro</a></li>
  56.                     <li><a href="#"><img class="icosub" src="img/submenu/db.png"></img> Respaldo BD</a></li>
  57.                 </ul>
  58.             </li>
  59.             <li>
  60.                 <a id="logout" href="controller/logout.php" title="Cerrar Sesión"><img src="img/menu/logout.png"></img> SALIR</a>
  61.             </li>
  62.         </ul>
  63.     </div>


Cualquier duda, ya sabes, no dudes en preguntar. saludos