Foros del Web » Creando para Internet » CSS »

Menu responsive dos niveles con Bootstrap

Estas en el tema de Menu responsive dos niveles con Bootstrap en el foro de CSS en Foros del Web. Hola. Estoy intentando hacer un menu a 2 niveles con bootstrap. En un pc funciona perfectamente, pongo el navegador en una resolución pequeña, el menú ...
  #1 (permalink)  
Antiguo 27/09/2013, 12:41
 
Fecha de Ingreso: mayo-2009
Mensajes: 729
Antigüedad: 8 años, 6 meses
Puntos: 6
Menu responsive dos niveles con Bootstrap

Hola. Estoy intentando hacer un menu a 2 niveles con bootstrap. En un pc funciona perfectamente, pongo el navegador en una resolución pequeña, el menú se transforma en el botoncito, pulso y se despliega el menu, pulso en dropdown y se despliega el siguiente menu y al llegar a more options se muestra el siguiente menu. Hasta aqui perfecto.

Si estoy en un movil, no funciona, al pinchar en Dropdown, se muestra el siguiente menu pero al pulsar en more options, el menu se cierra.

Llevo revisando la documentación ni se sabe, pero nada, a ver si me podeis ayudar, por favor.

Gracias. Un saludo.

Código HTML:
Ver original
  1. <div class="navbar">
  2.               <div class="navbar-inner">
  3.                 <div class="container">
  4.                   <a data-target=".navbar-responsive-collapse" data-toggle="collapse" class="btn btn-navbar">
  5.                     <span class="icon-bar"></span>
  6.                     <span class="icon-bar"></span>
  7.                     <span class="icon-bar"></span>
  8.                   </a>
  9.                   <a href="#" class="brand">Title</a>
  10.                  
  11.                  
  12.                   <div class="nav-collapse collapse navbar-responsive-collapse">
  13.                     <ul class="nav">
  14.                       <li class="active"><a href="#">Home</a></li>
  15.                       <li><a href="#">Link</a></li>
  16.                       <li><a href="#">Link</a></li>
  17.                       <li class="dropdown">
  18.                         <a data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown <b class="caret"></b></a>
  19.                         <ul class="dropdown-menu">
  20.                           <li><a href="#">Action</a></li>
  21.                           <li><a href="#">Another action</a></li>
  22.                          
  23.                           <li class="dropdown-submenu">
  24.                           <a href="#" tabindex="-1">More options</a>
  25.                          
  26.                              <ul class="dropdown-menu">
  27.                            
  28.                                 <li><a href="#" tabindex="-1">Second level link</a></li>
  29.                                       <li><a href="#" tabindex="-1">Second level link</a></li>
  30.                                       <li><a href="#" tabindex="-1">Second level link</a></li>
  31.                            
  32.                             </ul>
  33.                          
  34.                           </li>
  35.                          
  36.                           <li><a href="#">Something else here</a></li>
  37.                           <li class="divider"></li>
  38.                           <li class="nav-header">Nav header</li>
  39.                           <li><a href="#">Separated link</a></li>
  40.                           <li><a href="#">One more separated link</a></li>
  41.                         </ul>
  42.                       </li>
  43.                     </ul>
  44.  
  45.                   </div><!-- /.nav-collapse -->
  46.                 </div>
  47.               </div><!-- /navbar-inner -->
  48.             </div>
  #2 (permalink)  
Antiguo 27/09/2013, 12:52
Avatar de abimaelrc
Colaborador
 
Fecha de Ingreso: mayo-2009
Ubicación: En el planeta de Puerto Rico
Mensajes: 14.728
Antigüedad: 8 años, 6 meses
Puntos: 1512
Respuesta: Menu responsive 2 niveles con bootstrap

Bueno que tenga entendido, para ver lo que haces también hace falta lo de CSS y javascript
__________________
Verifica antes de preguntar.
Los verdaderos amigos se hieren con la verdad, para no perderlos con la mentira. - Eugenio Maria de Hostos
  #3 (permalink)  
Antiguo 27/09/2013, 12:58
 
Fecha de Ingreso: mayo-2009
Mensajes: 729
Antigüedad: 8 años, 6 meses
Puntos: 6
Respuesta: Menu responsive 2 niveles con bootstrap

Bootstrap lo que tiene es que con solo enlazar el archivo css y el js que te descargas en su pagina, no hace falta añadir ninguna linea de codigo css ni js, por eso no lo he puesto.
  #4 (permalink)  
Antiguo 27/09/2013, 13:05
Avatar de abimaelrc
Colaborador
 
Fecha de Ingreso: mayo-2009
Ubicación: En el planeta de Puerto Rico
Mensajes: 14.728
Antigüedad: 8 años, 6 meses
Puntos: 1512
Respuesta: Menu responsive 2 niveles con bootstrap

¡Ay padre pero si estoy desactualizado¡

Ya mismo vuelvo a contestar en esta parte del foro, pero antes me actualizo

Disculpa, desconozco como trabaja bootstrap (es que el termino lo conozco pero como parte de un framework, preparar todo en el comiezo, no como que es un framework)
__________________
Verifica antes de preguntar.
Los verdaderos amigos se hieren con la verdad, para no perderlos con la mentira. - Eugenio Maria de Hostos
  #5 (permalink)  
Antiguo 28/09/2013, 12:20
 
Fecha de Ingreso: mayo-2009
Mensajes: 729
Antigüedad: 8 años, 6 meses
Puntos: 6
Respuesta: Menu responsive 2 niveles con bootstrap

Sigo indagando con este tema, aunque sin mucho exito, la verdad. Me extraña mucho que la gente de bootstrap te de un menu para la version movil y que al llegar al segundo nivel, para que este se muestre, funcione con hover, sabiendo que en pantallas tactiles el hover no funciona.

Esta claro que tiene que haber una forma de mostrar el segundo nivel con un click y no con hover, pero no soy capaz de encontrarlo.

¿Alguna sugerencia?
  #6 (permalink)  
Antiguo 28/09/2013, 13:40
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.462
Antigüedad: 15 años, 4 meses
Puntos: 2098
Respuesta: Menu responsive 2 niveles con bootstrap

No he tocado Bootstrap, pero que :hover no funciona en pantallas táctiles no es cierto.
  #7 (permalink)  
Antiguo 29/09/2013, 20:32
 
Fecha de Ingreso: junio-2012
Mensajes: 46
Antigüedad: 5 años, 5 meses
Puntos: 5
Respuesta: Menu responsive 2 niveles con bootstrap

Creo que te equivocas , es necesario incluir algunas lineas de código para que te funcionen cosas como los drop down , los slider , etc .

Aquí te dejo el vídeo que explica como hacer un drop down http://www.youtube.com/watch?v=1YE6ypJUwyU#t=1277
  #8 (permalink)  
Antiguo 03/12/2013, 15:40
 
Fecha de Ingreso: mayo-2009
Mensajes: 729
Antigüedad: 8 años, 6 meses
Puntos: 6
Respuesta: Menu responsive dos niveles con Bootstrap

Ese video explica un menu como mucho de un nivel, pero aqui hablamos de dos niveles
  #9 (permalink)  
Antiguo 13/01/2014, 05:21
 
Fecha de Ingreso: noviembre-2010
Mensajes: 146
Antigüedad: 7 años
Puntos: 3
Respuesta: Menu responsive dos niveles con Bootstrap

Estoy teniendo el mismo problema con un menu igual de 2 niveles. Alguien a encontrado una solucion. Para este proyecto he utilizado bootstrap 2.3.2.

Por si lo quieren ver es www.aprenderidiomas.com

Alguien sabe como puedo desactivar el hover para moviles o para todo si esto no fuese posible.

Gracias
  #10 (permalink)  
Antiguo 13/01/2014, 14:54
 
Fecha de Ingreso: mayo-2009
Mensajes: 729
Antigüedad: 8 años, 6 meses
Puntos: 6
Respuesta: Menu responsive dos niveles con Bootstrap

Hola. No te puede ayudar porque no conseguí una solución. Tuve que hacer el menú como un acordeon porque fuí incapaz de meterlo un segundo nivel a boostrap y que funcionara decentemente.
  #11 (permalink)  
Antiguo 16/01/2014, 05:20
 
Fecha de Ingreso: noviembre-2010
Mensajes: 146
Antigüedad: 7 años
Puntos: 3
Respuesta: Menu responsive dos niveles con Bootstrap

He podido encontrar esto, que es lo mas parecido a lo que quiero.

http://bootply.com/92442#

Pero claro es para bootstrap 3 creo y yo utilizo en este proyecto el 2.3.2

¿Alguien cree que podria adaptarlo?

Etiquetas: bootstrap, niveles, 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




La zona horaria es GMT -6. Ahora son las 00:15.