Foros del Web » Programando para Internet » Javascript » Frameworks JS »

Problemas con menu acordeón

 Estas en el tema de Problemas con menu acordeón en el foro de Frameworks JS en Foros del Web. Buenos días, Tengo un pequeño problema con un menú, en el cual uno de los botones del menú hace función de acordeón, es decir en ...
  #1 (permalink)  
Antiguo 16/05/2012, 04:31
 
Fecha de Ingreso: febrero-2010
Mensajes: 37
Antigüedad: 14 años, 2 meses
Puntos: 0
Problemas con menu acordeón
Buenos días,

Tengo un pequeño problema con un menú, en el cual uno de los botones del menú hace función de acordeón, es decir en el momento de pulsar sobre este botón se despliegan una lista de subbotones.

El problema que tengo es que cuando se pulsa sobre este botón aparte de desplegarse la lista de los botones, también se mueve todo el menú horizontal de los demás botones.

Es decir, la cosa que quiero q haga este menu es:

Código HTML:
inicio | boton1 | botonDespegable | boton2
                | botonDesp1      |
                | botonDesp2      |
                | botonDesp3      |
cada vez que se pulse sobre el botonDespegable pues que la lista se despliegue o se contraiga... Hasta ahí ningún problema y ya está desarrollado. Mi cosa es que cuando se pulsa sobre el botón "botonDespegable" se desplazan hacia abajo también el botón "inicio", "boton1", "boton2" y quedan a la altura del último botón que contiene la lista (en este caso "botonDesp3")

Si pulso sobre el botón "botonDespegable", me sale así:

Código HTML:
                | botonDespegable | 
                | botonDesp1      |
                | botonDesp2      |
inicio | boton1 | botonDesp3      | boton2
Alguien sabría por qué.

A continuación dejo los trozos de código:

index.php
Código PHP: 
Ver original
  1. ...
  2.    <script type="text/javascript" src="jquery.lksMenu.js"></script>
  3.         <script>
  4.         $('document').ready(function(){
  5.             $('.menu').lksMenu();
  6.         });
  7.     </script>
  8. ...
  9. <div id="navigacija">
  10. <div id="linkMenu">
  11.     <ul>
  12.         <li><a href=" index.php">Inicio</a></li>
  13.                 <li>
  14.                       <div class="menu">
  15.                                 <ul>
  16.                                         <li>
  17.                                            <a href="#">Productos</a>
  18.                                                <ul>
  19.                                                     <li><a href="sofas.php">Sofas</a></li>
  20.                                                     <li><a href="butacas.php">Butacas</a></li>
  21.                                                     <li><a href="sillas.php">Sillas</a></li>
  22.                                                 </ul>
  23.                                         </li>
  24.                                     </ul>
  25.                          </div>
  26.                  </li>
  27.         <li><a href="#" onClick="pregfrec();">Preguntas</a></li>
  28.         <li><a href="#" onClick="contacto();">Contacto</a></li>
  29.     </ul>   
  30. </div>  
  31. </div>
  32. ...

lksMenu.js
Código Javascript: 
Ver original
  1. (function($){
  2.     // fn es un shortcut al prototipo (prototypo) de la libreria jquery
  3.     // declarando un método dentro de esta librería la extendemos para ser usada
  4.     // con cualquier selector
  5.     $.fn.lksMenu=function(){
  6.         // para mantener la posibilidad de concatenar métodos es que retornamos la función en
  7.         // lugar de solo ejecutar algo y ya.
  8.         // en este caso usamos un each, porque el selector sobre el que aplicamos la función
  9.         // podría contener más de un elemento , esto es , aplicaría $('.menu').menu() lo cual
  10.         // ejecutaría el código para todos los elementos que tengan la clase menu, como puede
  11.         // haber mas de uno es que ejecutamos el each para que corra sobre todos ellos
  12.         return this.each(function(){
  13.             // obtenemos el elemento que se esta analizando en esta vuelta del each
  14.             var menu= $(this);
  15.             // localizamos los links principales y le asignamos un evento click
  16.             menu.find('ul li > a').bind('click',function(event){
  17.                 // identificamos el elemento sobre el que se hizo click
  18.                 var currentlink=$(event.currentTarget);
  19.                 // los ul que tengan la clase active serán los que estan abiertos
  20.                 // si el link sobre que presionamos ya estaba abierto , es decir tenia
  21.                 // la clase active, lo cerramos y nada mas
  22.                 if (currentlink.parent().find('ul.active').size()==1)
  23.                 {
  24.                     //cerramos el link porque apretamos sobre el mismo abierto
  25.                     currentlink.parent().find('ul.active').slideUp('medium',function(){
  26.                         // le quitamos la clase
  27.                         currentlink.parent().find('ul.active').removeClass('active');
  28.                     });
  29.                 }
  30.                 // si ningun link estaba apretado
  31.                 else if (menu.find('ul li ul.active').size()==0)
  32.                 {
  33.                     //no hace falta cerrar ninguno y solo abrimos el elemento al
  34.                     // cual se le hizo click
  35.                     show(currentlink);
  36.                 }
  37.                 else
  38.                 {
  39.                     // si ya había un item abierto , simplemente lo localizamos
  40.                     // con find, y lo cerramos con slideup,
  41.                     menu.find('ul li ul.active').slideUp('medium',function(){
  42.                         // una vez que cerramos el que estaba abierto
  43.                         // le quitamos la clase active
  44.                         menu.find('ul li ul').removeClass('active');
  45.                         // abrimos uno nuevo que corresponde al que se clickeo
  46.                         show(currentlink);
  47.                     });
  48.                 }
  49.             });
  50.  
  51.             // esta función es de soporte
  52.             // todo lo que hace es abrir el elemento y asignarle la clase active
  53.             function show(currentlink){
  54.                 currentlink.parent().find('ul').addClass('active');
  55.                 currentlink.parent().find('ul').slideDown('medium');
  56.             }
  57.         });
  58.     }
  59.     // esto es lo que deciamos al principio , ejecutamos la función por eso los
  60.     // parentesis y le pasamos por parametro la libreria jQuery.
  61. })(jQuery);

style.css
Código CSS: 
Ver original
  1. #navigacija {
  2.     /* con clear y float decimos donde queremos que si situen, por ejemplo al lado izquierdo de una imagen entonces pondríamos left*/
  3.     /*width: 760px;*/
  4.     width: auto;
  5.     /*margin: 0 0 10px 0;*/
  6.     padding: 5px 10px 10px 10px;
  7.     padding: 0;
  8.     font: 9pt Arial, Verdana, Sans-Serif;
  9. }
  10.  
  11. #navigacija div#linkMenu > ul {
  12.     list-style: none;
  13.     width: auto;
  14.     margin: 3px 0 3px 0;
  15.     padding: 0;
  16.     font: 9pt Arial, Verdana, Sans-Serif;
  17.     /*display:inline;*/
  18. }
  19.  
  20. #navigacija div#linkMenu > ul > li {
  21.     /*float: left;*/
  22.     display: inline-block;
  23. }
  24.  
  25. /* separación entre botón y botón */
  26. #navigacija li {
  27.     margin-bottom: 4px;
  28.     /*display:inline;*/
  29. }
  30.  
  31. /* Marca el tamaño de los botones y el color que llevan */
  32. #navigacija li a, #navigacija li a:visited {
  33.     text-align: center;
  34.     height: 20px;
  35.     text-decoration: none;
  36.     color: #fff;
  37.     display: block;
  38.     padding: 6px 93px 0 10px;
  39.     background: #908383;
  40. }
  41.  
  42. /* Cuando se pasa el ratón por encima cambia de color el botón */
  43. #navigacija li a:hover {
  44.     /*background: #A9CAEB;
  45.     color: #286ea0;*/
  46.     background: #000000;
  47.     color: #FFF;
  48. }
  49.  
  50. ...
  51. .menu{
  52.       font-family: 9pt Verdana, Geneva, sans-serif;     
  53. }
  54. .menu ul{
  55.     /*list-style: none;*/
  56.     /*margin:0;
  57.     padding:0;*/
  58.     /*width:250px;*/
  59. }
  60. .menu ul li ul{
  61.     /*width:240px;*/
  62. }
  63. .menu ul li{
  64.     /*margin:0;
  65.     padding:5px;
  66.     background-color: #4B4B4B;*/
  67. }
  68. .menu ul li a{
  69.     /*padding-top:5px;
  70.     border-color: #404040 #1A1A1A #1A1A1A #505050;
  71.     border-style: solid;
  72.     border-width: 1px;
  73.     padding-left: 10px;
  74.     display:block;
  75.     text-decoration: none;
  76.     color:white;
  77.     /*font:bold 17px Arial,Helvetica,sans-serif;
  78.     font: 9pt Arial, Verdana, Sans-Serif;
  79.     height:30px;
  80.     background: #5B5B5B  no-repeat center right;
  81.     line-height: 1.3em;*/
  82. }
  83. .menu ul li ul a{
  84.     /*border-color: #404040 #1A1A1A #1A1A1A #505050;
  85.     border-style: solid;
  86.     border-width: 1px;
  87.     margin-top:2px;
  88.     padding-left: 10px;
  89.     display:block;
  90.     text-decoration: none;
  91.     color:white;
  92.     font-size:14px;
  93.     height:25px;
  94.     font-weight: normal;
  95.     background: #0D0D0D;*/
  96. }
  97. .menu ul li a:hover{
  98.     /*background: #DB5A0A  no-repeat center right;*/
  99. }
  100. .menu ul li ul a:hover{
  101.     /*background: #FCAB14;
  102.     color:black;*/
  103. }
  104.  
  105. .menu ul li ul{
  106.     display:none;
  107. }
  108. ...

Muchas gracias.

Etiquetas: jquery, js, php
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 20:09.