Foros del Web » Creando para Internet » CSS »

menu flexbox se me comporta de modo extraño con el jquery

Estas en el tema de menu flexbox se me comporta de modo extraño con el jquery en el foro de CSS en Foros del Web. Hola amigos, no sabía donde poner este tema porque implica dos tecnologias como son css(flexbox) y jquery. Si hay alguien que sepa en que foro ...
  #1 (permalink)  
Antiguo 11/12/2019, 15:17
 
Fecha de Ingreso: agosto-2008
Mensajes: 606
Antigüedad: 15 años, 7 meses
Puntos: 11
menu flexbox se me comporta de modo extraño con el jquery

Hola amigos, no sabía donde poner este tema porque implica dos tecnologias como son css(flexbox) y jquery. Si hay alguien que sepa en que foro colocarlo mejor que me lo mueva, gracias. Bueno os explico el caso es que tengo un menú principal con sus items puestos en horizopntal y cuando lo pongo en visión más pequeña, para tablet o movil el menú se me pone vertical(un item encima de otro). Lo que pasa es que también lleva una pestalla de menú para que este se expanda o encoja en caso de verse en pantallas pequeñas. Pues bien cuando paso de pantalla pequeña a pantalla grande el menú se queda vertical y se tendría que ver horizontal. Dejo el código.




Código CSS:
Ver original
  1. .menu{
  2. padding-left:0px;
  3. margin-top: 0;
  4. margin-bottom: 0;
  5. list-style: none;
  6. background: steelblue;
  7.  
  8.  
  9. }
  10.  
  11. @media  (min-width: 768px){
  12.     .menu{
  13.     display: flex;
  14.    
  15.  
  16.     }
  17.  
  18.     .menu li{
  19.     flex: auto;
  20.     text-align: center;
  21.   border-right: 1px solid rgba(0,0,0,0.2);
  22.    
  23.     }
  24.  
  25.     #toggle-menu{
  26.         background: steelblue;
  27.         line-height: 2.5;
  28.         color: aliceblue;
  29.         padding: left;
  30.         font-size: .9em;
  31.         cursor: pointer;
  32.         display:none;
  33.     }
  34.  
  35. }
  36. .menu a{
  37. color: aliceblue;
  38. text-decoration: none;
  39. line-height: 3;
  40. display: block;
  41. font-weight: bold;
  42. font-size: .9em;
  43. }
  44. .menu a:hover{
  45. background: rgba(0,0,0,0.2);
  46. }
  47. .menu li {
  48.  
  49.  
  50. border-bottom: 1px solid rgba(0,0,0,0.2);  
  51.  
  52. }
  53.  
  54.  
  55. #toggle-menu{
  56. background: steelblue;
  57. line-height: 2.5;
  58. color: aliceblue;
  59. padding: left;
  60. font-size: .9em;
  61. cursor: pointer;
  62.  
  63.  
  64. }

Código HTML:
Ver original
  1. <nav>
  2.         <div id="toggle-menu"> MENU </div>
  3.             <ul class="menu">
  4.                     <li><a href="index.php">home</a></li>
  5.                     <li><a href="productos.php">todos</a></li>
  6.                     <li><a href="productos.php?genero=1">hombre</a></li>
  7.                     <li><a href="productos.php?genero=2">mujer</a></li>
  8.                     <li><a href="productos.php?genero=3">unisex</a></li>  
  9.                     <li><a href="#">login</a></li>
  10.                     <li><a href="#">registro</a></li>
  11.                 </ul>
  12.          
  13.             </nav>


Código Javascript:
Ver original
  1. /controlar el toggle menu
  2. $("#toggle-menu").click(function(){
  3.  
  4.     $(this).next().slideToggle();
  5.  
  6.  
  7.  
  8. });
  9.  
  10. $(window).on("resize", function(){
  11.  
  12.     if($(this).width()>768){
  13.  
  14.         $("#toggle-menu").next().show();
  15.  
  16.        
  17.     }
  18.  
  19.  
  20. });

Última edición por trevol; 11/12/2019 a las 15:23 Razón: en el titulo en vez de moso es modo. No me deja corregir el titulo

Etiquetas: extraño, jquery, text
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 05:12.