Foros del Web » Creando para Internet » CSS »

Adaptar mi menu para movil

Estas en el tema de Adaptar mi menu para movil en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 22/03/2015, 13:11
Avatar de danideu  
Fecha de Ingreso: febrero-2005
Ubicación: Barcelona
Mensajes: 213
Antigüedad: 19 años, 2 meses
Puntos: 5
Adaptar mi menu para movil

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.
  #2 (permalink)  
Antiguo 22/03/2015, 13:33
Avatar de AngelKrak  
Fecha de Ingreso: noviembre-2014
Mensajes: 917
Antigüedad: 9 años, 5 meses
Puntos: 91
Respuesta: Adaptar mi menu para movil

creo k eso es Dropdown o Toggle se hace con JS ;) busca algun codigo o alguien que te ayude en el foro de JS ;)
  #3 (permalink)  
Antiguo 22/03/2015, 23:56
Avatar de ZoroRoronoa  
Fecha de Ingreso: marzo-2011
Ubicación: California, USA
Mensajes: 824
Antigüedad: 13 años
Puntos: 116
Respuesta: Adaptar mi menu para movil

Buscalo en Google como "Acordion jQuery"
__________________
Programador jQuery & PHP
  #4 (permalink)  
Antiguo 23/03/2015, 00:12
Avatar de fede5426  
Fecha de Ingreso: diciembre-2014
Ubicación: Córdoba
Mensajes: 446
Antigüedad: 9 años, 4 meses
Puntos: 208
Respuesta: Adaptar mi menu para movil

Cita:
Iniciado por ZoroRoronoa Ver Mensaje
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.

  #5 (permalink)  
Antiguo 23/03/2015, 05:41
Avatar de danideu  
Fecha de Ingreso: febrero-2005
Ubicación: Barcelona
Mensajes: 213
Antigüedad: 19 años, 2 meses
Puntos: 5
Respuesta: Adaptar mi menu para movil

Cita:
Iniciado por fede5426 Ver Mensaje
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.
  #6 (permalink)  
Antiguo 23/03/2015, 10:28
Avatar de fede5426  
Fecha de Ingreso: diciembre-2014
Ubicación: Córdoba
Mensajes: 446
Antigüedad: 9 años, 4 meses
Puntos: 208
Respuesta: Adaptar mi menu para movil

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

Código HTML:
Ver original
  1.   <nav>
  2.     <ul class="nav_list">
  3.       <li><a href="#">Menu 1</a></li>
  4.      
  5.       <li id="menu2">
  6.         <a href="#">Menu 2</a>
  7.         <ul class="submenu2">
  8.           <li><a href="#">Submenu A</a></li>
  9.           <li><a href="#">Submenu B</a></li>
  10.           <li><a href="#">Submenu C</a></li>
  11.         </ul>
  12.       </li>
  13.      
  14.       <li id="menu3"><a href="#">Menu 3</a>
  15.         <ul class="submenu3">
  16.           <li><a href="#">Submenu A</a></li>
  17.           <li><a href="#">Submenu B</a></li>
  18.           <li><a href="#">Submenu C</a></li>
  19.         </ul>
  20.       </li>
  21.      
  22.       <li><a href="#">Menu 4</a></li>
  23.      
  24.       <li><a href="#">Menu 5</a></li>
  25.     </ul>  
  26.       </nav>
  27. </body>

Código Javascript:
Ver original
  1. $(document).ready(function(){
  2. $(".submenu2").hide();
  3. $(".submenu3").hide();
  4.    
  5.     $(".nav_list #menu2").click(
  6.         function(){
  7.             $(".submenu2").stop(true).slideToggle(200);
  8.         });
  9.        
  10.     $(".nav_list #menu3").click(
  11.         function(){
  12.             $(".submenu3").stop(true).slideToggle(200);
  13.    
  14.         });
  15.        
  16. });


Acá esta el ejemplo:

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

Saludos!
  #7 (permalink)  
Antiguo 23/03/2015, 18:28
Avatar de danideu  
Fecha de Ingreso: febrero-2005
Ubicación: Barcelona
Mensajes: 213
Antigüedad: 19 años, 2 meses
Puntos: 5
Respuesta: Adaptar mi menu para movil

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.

Etiquetas: responsive
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

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 16:55.