Ejemplo menu responsive

El diseño web responsive esta a la orden del día y cada vez es más común ver webs que lo están usando y se agradece.

Vamos a ver como crear un menú responsive.


Creamos el html, añadimos en la cabecera del html el meta tag view port ajustando el ancho al del dispositivo y sin zoom inicial ni máximo, el motivo lo explico aquí.

Añadimos el link a nuestra hoja de estilos , el meta charset y el título.

Creamos en el cuerpo del html un header y le añadimos un anchor que se visualizará cuando se este visualizando en pantalla de dispositivo móvil y un nav que contiene un ul con un li por cada menu y también un li para el input de búsqueda para que luego sea más sencillo adaptar el menú a los diferentes tipos de pantalla.

    
   

      
         Menu
         
      
      

         

Home
Porfolio
Blog
About Me
Contact



   

De momento esto es lo que tenemos, los elementos con estilo por defecto.

Ahora ya nos vamos con la parte del css.
Primero damos color al body, creamos estilo para el header indicándole atributos como la altura,el color, la fuente ..., le indicamos al nav que va a ocupar el 100% de la pantalla.

    
body {
    background-color: #2c3e50;
}

header {
    width: 100%;
    background-color: #1abc9c;
    height: 40px;
    font-size: 11pt;
    font-family: 'Segoe UI Symbol', sans-serif;
    font-weight: bold;
}


nav {
    padding: 0;
    width: 100%;
}

Ahora nos centramos el contenido del header. Indicamos la altura del ul y para evitar que la lista de menú salga una debajo de otra, le indicamos float left a cada li para que aparezcan en la misma linea y display igual a inline para eliminar los puntos que aparece para cada li de un ul por defecto. Además al li que contiene el input de búsqueda le indicamos que flote a la derecha para que se vea en la parte derecha de la pantalla.

    
nav ul {
    height: 40px;
    margin: 0;
    padding: 0;
    width: 100%;
}

nav li {
    display: inline;
    float: left;
    line-height: 40px;
}

#searchLi {
    float: right;
    padding: 0 25px 0 0;
}

Ahora damos estilo a cada anchor del header, esto incluye los anchor de cada li que son los menús normales y también el menú que sera visible cuando el ancho de la pantalla sea más pequeña (versión movil), le indicamos que se muestre inline-block para poder darle un ancho y así poder separar uno de otro,sino saldrían pegados, le indicamos color, altura.. . Y por último indicamos el color de cada anchor cuando sea el menú activo o cuando el cursor del ratón pase por encima.

    
header a {
    color: #fff;
    display: inline-block;
    width: 100px;
    text-align: center;
    text-decoration: none;
    text-shadow: 1px 1px 0px #283744;
    line-height: 40px;
}

nav a:hover, nav a:active {
    background-color: #16a085;
}

Y con esto ya tenemos el estilo por defecto de nuestro menú

Ahora para modificar el estilo de los elementos según el ancho de la pantalla utilizamos media queries, que es un trozo de css que indicamos en los attributos de la etiqueta @query cuando se aplican, como por ejemplo cuando la pantalla tenga un ancho máximo o mínimo.
Según nuestro diseño, nuestro primer breakpoint de media query será cuando el ancho sea 740px porque en ancho inferior la caja de texto ya no entraría y se desplazaría hacia abajo. En este breakpoint el ancho de cada li será del 50%, el alto del header automático y el li que contiene el input de búqueda ya no flota a la derecha.

    
@media screen and (max-width: 740px) {
    header {
        height: auto;
    }

    nav {
        height: auto;
    }

    nav ul {
        height: auto;
    }

    nav li {
        width: 50%;
    }

    #searchLi {
        float: none;
        padding: 0;
    }

    header a {
        width: 100%;
        text-align: left;
        text-indent: 15px;
    }
}

El siguiente breakpoint lo hacemos en 480px, y aquí la estructura de los menús va a seguir igual pero por defecto oculto. En su lugar aparece el menú móvil ocupando el 100% del ancho de la pantalla.

    
@media only screen and (max-width : 480px) {
    nav ul {
        display: none;
    }

    #menuMobile {
        display: block;
        background-color: #16a085;
        width: 100%;
    }

    #icon-mobile{
        float: right;
        margin: 10px;
    }
}

y cuando se hace click sobre él vamos a mostrar el menú con una animación, para ello utilizaremos código javascript. Descargamos la librería jquery y la añadimos el script en la cabecera del documento.

Y después añadimos en la cabecera del html también el siguiente script

que lo que lo que hace es al hacer click mostrar o ocultar con una animación en el menú móvil el ul que contiene los menús y el input de búsqueda, modificando la propiedad display. Además tambíén elimina el style que tiene el ul si el ancho es superior a 480 px y esta oculto, esto es porque en el caso de tener la ventana en un ancho inferior y mediante slideToggle el ul tiene un estilo display none, si redimensionamos la ventana a un ancho superior, no sera visible el ul.

El siguiente breakpoint lo hacemos en 320px y el ancho de cada li pasa a ser el 100% y se ajusta el margen del input de búsqueda.

   
@media only screen and (max-width : 320px) {

    input[type=search] {
       margin:0 0 0 15px;
    }

    nav li {
        float: none;
        width: 100%;
    }
}

Código fuente

Libros Relacionados

---