[SOLUCIONADO] ¿Algún buen tutorial de menú para móviles?

[Tedel]

Hola:

Bueno, lo dicho. Necesito un buen tutorial de menú para móviles, porque ya me duele la cabeza:

- Solo CSS (no jquery, no javascript)
- Responsive
- Con position:fixed para que se quede en la parte superior
- Opcional, con Flexbox también, pues es más práctico para la maquetación.

¿Alguien me da un link, por favor?

[pzin]

No creo que haya nada de malo en usar JavaScript para en un móvil. El que no tenga activado JavaScript en un móvil debe de ser un tipo bastante siniestro.

[Tedel]

jajajaja... No es por él... es por mí. ¡Yo no sé Javascript!

[fede5426]

Hola Jorge, no se si existe tal tutorial ya que lo más lógico normalmente es hacerlo con javascript. A demás CSS no consta de eventos, crear un efecto "toggle" de menú para móviles puede ser complicado.. Pero yo conozco una forma que puede servirte, y es usando la propiedad :checked de los input de tipo checkbox.

Crear la barra de navegación adaptable para maquinas de escritorio o notebooks es simple, imagino que ya lo sabes, no es cosa de otro mundo. Y para que en móviles cambie de forma la lista se usan media queries, indicar que a determinada resolución cambien sus propiedades (como vas a ver en el ejemplo que voy a dejar más abajo), en mi caso cambio de lista horizontal a vertical modificando la propiedad display, cambio su position a absolute, y la oculto a la izquierda para luego hacerla aparecer clickeando el típico botón de menú (en este caso, el checkbox).

Para lograr el efecto toggle (toque para abrir y toque para cerrar) como dije una forma es usar un checkbox aprovechando la propiedad :checked de CSS3.

A ver si puedo explicarme mejor antes de dejar el ejemplo, la idea es básicamente crear un input type="checkbox" y ocultarlo con display:none; Seguido del input, su perteneciente label, a éste label le vamos a dar los estilos que querramos que tenga el botón. Por debajo, la lista del menú de navegación. Lo último que necesitamos hacer es indicar que cuando el checkbox este tildado (:checked) su hermano (~ ul) cambie su propiedad left a 0 para que aparezca desde la izquierda. Se pueden usar varios métodos de aparición, desde diferentes posiciones o cambiando su display para que aparezca sin más..

Hay otra forma de hacer aparecer la lista, que es usando :focus en un elemento, por ejemplo en un enlace que contenga la imagen de menú o la palabra MENÚ o lo que sea, al clickearlo toma el foco y se despliega el elemento. La contra de este método es que para cerrarlo no funciona si lo clickeamos nuevamente porque mantiene el foco, la única forma es clickear/tocar fuera del elemento. Por eso no la veo tan viable como la que acabo de explicar.

En fin, dejo el código por acá abajo y un codepen funcionando para que lo revises. Espero haberme explicado bien y que te sea útil.

Código HTML:

<nav>
   <input type="checkbox" id="boton" />
   <label for="boton"><span></span> </label>
   <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Clients</a></li>
      <li><a href="#">Contact Us</a></li>
   </ul>
</nav>
 

Código CSS:

body{
    margin:0;
    padding:0;
}
 
nav{
    width:100%;
    background-color:#A32600;
    padding:.5em;
    min-height:45px;
    position:relative;
    border-bottom:1px solid #ccc;
}
 
ul{
    background-color:#A32600;
}
 
li{
    display:inline-block;
}
 
li a{
    color:#ccc;
    font-family:Verdana;
    padding:1em 1em; 
    text-decoration:none;
}
 
li a:hover{
    background-color:#161616;   
}
 
#boton{
    display:none
}
 
label span{
    background-image:url("http://i.imgur.com/NN6xrxu.png");
    background-size:100%;
    width:35px;
    height:35px;
    display:none;
    cursor:pointer;
}
 
@media screen and (max-width:480px){
    
    ul{
        position:absolute;
        top:100%;
        left:-100%;
        width:75%;
        margin:0;
        padding:0;
        background-color:#D63200;
        -webkit-transition:left .3s linear;
        -moz-transition:left .3s linear;
        -ms-transition:left .3s linear;
        -o-transition:left .3s linear;
        transition:left .3s linear;
    }
    
    li{
        display:block;
        border-bottom:1px solid #ccc;
    }
 
    li a{
        display:block;
    }
    
    label span{
        display:block;
    }
    
    #boton:checked ~ ul{
        left:0;
    }
}
 

http://codepen.io/fede5426/pen/WvXeoG

Saludos

[Tedel]

Genial, muchas gracias