Adaptar mi menu para movil

danideu · #1 (**permalink**) 22/03/2015, 13:11

Hola a todos,

Tengo que adaptar mi submenu para que se vea bien en el movil.
La plantilla no está preparada así que hice unas modificaciones para que en el escritorio se viera, pero claro, ahora he ido a verlo en movil y no funciona bien.

Por favor, podríais decirme como puedo hacer para que al darle clic a PORTAFOLI, me haga el efecto típico de irse todo el resto de menu hacia abajo y que no se quede como ahora encima de la parte de abajo del menu?.

La URL es esta: http://goo.gl/PO0fW6

Gracias.

AngelKrak · #2 (**permalink**) 22/03/2015, 13:33

creo k eso es Dropdown o Toggle se hace con JS ;) busca algun codigo o alguien que te ayude en el foro de JS ;)

ZoroRoronoa · #3 (**permalink**) 22/03/2015, 23:56

Buscalo en Google como "Acordion jQuery"

fede5426 · #4 (**permalink**) 23/03/2015, 00:12

Cita:

Iniciado por ZoroRoronoa

Buscalo en Google como "Acordion jQuery"

AcordEon

Proba cambiando el position del submenu, de absolute a relative. Si lo que queres es que aparezca con algún efecto, hace lo que te dijeron mas arriba, busca "menú acordeón" o investiga sobre slideToggle de jquery.

danideu · #5 (**permalink**) 23/03/2015, 05:41

Cita:

Iniciado por fede5426

AcordEon

Proba cambiando el position del submenu, de absolute a relative. Si lo que queres es que aparezca con algún efecto, hace lo que te dijeron mas arriba, busca "menú acordeón" o investiga sobre slideToggle de jquery.

Fede,

He probado con inspeccionar elemento de chrome cambiando el position a relative, pero no funciona.

¿A tí te ha funcionado?.

Saludos.

fede5426 · #6 (**permalink**) 23/03/2015, 10:28

Mira, te dejo un ejemplo de como deberia quedar tu menu para que empuje el contenido hacia abajo.

Código HTML:

Ver original<body>
  <nav>
    <ul class="nav_list">
      <li><a href="#">Menu 1</a></li>
      
      <li id="menu2">
        <a href="#">Menu 2</a>
        <ul class="submenu2">
          <li><a href="#">Submenu A</a></li>
          <li><a href="#">Submenu B</a></li>
          <li><a href="#">Submenu C</a></li>
        </ul>
      </li>
      
      <li id="menu3"><a href="#">Menu 3</a>
        <ul class="submenu3">
          <li><a href="#">Submenu A</a></li>
          <li><a href="#">Submenu B</a></li>
          <li><a href="#">Submenu C</a></li>
        </ul>
      </li>
      
      <li><a href="#">Menu 4</a></li>
      
      <li><a href="#">Menu 5</a></li>
    </ul>   
      </nav>
</body>

Código Javascript:

Ver original$(document).ready(function(){
$(".submenu2").hide();
$(".submenu3").hide();
    
    $(".nav_list #menu2").click(
        function(){
            $(".submenu2").stop(true).slideToggle(200);
        });
        
    $(".nav_list #menu3").click(
        function(){
            $(".submenu3").stop(true).slideToggle(200);
    
        });
        
});

Acá esta el ejemplo:

http://codepen.io/anon/pen/RNvNVN

Saludos!

danideu · #7 (**permalink**) 23/03/2015, 18:28

Gracias por vuestras respuesas, finalmente he utilizado un plugin para WordPress --> Wp-Responsive-Menu

Un saludo a todos y de nuevo muchas gracias por vuestras respuestas.