comparte el articulo 

Técnicas para realizar menús adaptables

Actualizado el 05/10/2013 < > 1 Comentario

Resumen: Explicamos y elaboramos algunas técnicas para aplicar un diseño adaptable a nuestros menús de navegación

El diseño adaptable (responsive design), se ha convertido en una consideración casi obligatoria al momento de elaborar la estructura de un sitio web. Actualmente son muchos los usuarios y clientes potenciales que acceden a través de algún dispositivo móvil, a alguna de las páginas que hemos desarrollado para presentar un proyecto o producto, como tal debemos de proporcionar el soporte adecuado a estos dispositivos para no tener una fuga de inversión.

Una parte fundamental de todos los sitios web, es el menú de navegación, gracias a él, el usuario puede moverse a través de las secciones y localizar contenido relacionado de manera más sencilla. Es por esto, que es de vital importancia mantener nuestros menús adaptables.

Para ello podemos hacer uso de una o varias técnicas, las cuales nos permitirán manejar y alterar nuestros menús adaptándolos a pantallas pequeñas. En este artículo mostraremos algunas de estas técnicas, enlistando sus ventajas y desventajas. Vale destacar que sólo haremos uso de CSS para llevar a cabo estos ejemplos, pero nos respaldaremos con una pequeña línea de código JavaScript.

Uso de elementos que ocupen toda la horizontal

Esta es la técnica más sencilla para elaborar un menú adaptable, ya que simplemente consiste en crear los elementos en forma de lista y darles un ancho para que abarquen totalmente la pantalla en sus distintos tamaños.

<nav role="completamente-horizontal">
  <ul>
    <li><a href="#">Inicio</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Manuales</a></li>
    <li><a href="#">Artículos</a></li>
    <li><a href="#">Ejemplos</a></li>
    <li><a href="#">Videotutoriales</a></li>
  </ul>
</nav>​
@media screen and (max-width: 44em) {
  nav[role="completamente-horizontal"] {
    ul > li {
      width: 100%;
    }
  }
}

Con este código cuando la ventana se haga pequeña o la página se visualice en una pantalla de dispositivo móvil, los elementos del menú tomarán un ancho de 100% para desplegarse de manera horizontal.

Las ventajas de este método son que no te utilizamos JavaScript, no es necesario añadir código HTML extra y el CSS se mantiene sencillo. Por otro lado, la mayor desventaja es que ocupa mucho espacio.

Desplegar elementos en un selectbox

Con este método nos encargaremos de ocultar el menú cuando la pantalla sea muy pequeña, y en vez de él mostaremos un elemento de tipo select donde desplegaremos todos elementos que componen dicho menú.

Para poder lograr esto necesitaremos agregar un nuevo elemento HTML par así crear el select. Además de esto, haremos uso de JavaScript para redireccionar a la página que se seleccione de la lista.

<nav role="lista-select">
  <ul>
    <li><a href="#">Inicio</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Manuales</a></li>
    <li><a href="#">Artículos</a></li>
    <li><a href="#">Ejemplos</a></li>
    <li><a href="#">Videotutoriales</a></li>
  </ul>
  
  <select onchange="if (this.value) window.location.href = this.value;">
    <option value="#">Inicio</option>
    <option value="#">Blog</option>
    <option value="#">Manuales</option>
    <option value="#">Artículos</option>
    <option value="#">Ejemplos</option>
    <option value="#">Videotutoriales</option>
  </select>
</nav>​

Para las pantallas y ventanas grandes ocultaremos el select:

nav[role="lista-select"] {
  > select {
    display:none;  
  }
}

Mientras que para las pequeñas ocultaremos el menú y desplegaremos el select:

@media screen and (max-width: 44em) {
  nav[role="lista-select"] {
    ul {
      display: none;
    }

    select {
      display: block;
      width: 100%;
    }

    &:after {
      position: absolute;
      content: "Menú";
      right: 0;
      bottom: -1em;
    }
  }
}

De igual manera mediante el pseudo elemento “:after” agregamos la palabra Menú para que el usuario sepa que debe dar clic ahí para acceder a las secciones.

Las ventajas de esta técnica es que no se necesita mucho espacio y se utilizan controles nativos, mientras que las desventajas son la necesidad de usar JavaScript, el duplicado de contenido y que el elemento select no puede ser muy estilizado.

Crear nuestro propio dropdown

Una variación a la técnica anterior, sería crear nuestra propia lista dropdown, la cual se desplegaría al momento de dar clic sobre un input con un label. Para poder llevar a cabo esta técnica se realiza un hack sobre el elemento checkbox, por lo que veremos en nuestro código algunas sentencias semánticamente incorrectas.

Para poder hacer funcionar este código para iOS es necesario agregar un atributo “onclick” vacío, mientras que para hacerlo funcionar en Android es necesario añadir una falsa animación de Webkit a nuestro elemento body.

<nav role="dropdown-personalizado">
  <!-- Para iOS -->
  <input type="checkbox" id="menu">
  <label for="menu" onclick></label>

  <ul>
    <li><a href="#">Inicio</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Manuales</a></li>
    <li><a href="#">Artículos</a></li>
    <li><a href="#">Ejemplos</a></li>
    <li><a href="#">Videotutoriales</a></li>
  </ul>
</nav>​
/* Para Android */
body { 
  -webkit-animation: bugfix infinite 1s; 
}
@-webkit-keyframes bugfix { 
  from { padding: 0; } 
  to { padding: 0; } 
}

input[type=checkbox] {
  position: absolute;
  top: -9999px;
  left: -9999px;
}

label { 
  cursor: pointer;
  user-select: none;
}

Para pantallas grandes ocultaremos la lista:

nav[role="dropdown-personalizado"] {
  label {
    display: none;
  }
}

Mientras que para pantallas pequeñas ocultaremos el menú y mostraremos el label. Para ayudar al usuario a reconocer el menú, añadiremos el texto “≡” para simular el icono que comúnmente se utiliza en los móviles para representar un menú.

@media screen and (max-width: 44em) {
  nav[role="dropdown-personalizado"] {
    ul {
      display: none;
      height: 100%;
    }

    label {
      position: relative;
      display: block;
      width: 100%;
    }

    label:after {
        position: absolute;
        content: "\2261";
    }
    
    input:checked ~ ul {
      display: block;
    
      > li {
        width: 100%;
      }        
    }
  }
}

Las ventajas de esta técnica es que no necesita mucho espacio cuando la lista se encuentra contraída, se le puede aplicar los estilos que deseemos y no necesita JavaScript. Pero tiene como desventajas, el uso de mala semántica, poca compatibilidad nativa, y el uso de HTML extra.

Publicado el 22/11/2012, última actualización 05/10/2013.

Contenido exclusivo de LaWebera.es. Prohibida su copia.

Autor: Daniel Ernesto Navarro Herrera

URL: LaWebera.es :: Diseño de paginas web

Añadir Comentario (Subir al texto)

1 Comentario

  1. Emilio Cobos Álvarez

    Yo usaría otro atributo que no fuera [role] para diferenciar el elemento.

    Role tiene una lista de valores estáticos y es un atributo hecho para la accesibilidad. No vale cualquier valor.

    http://dev.w3.org/html5/spec/wai-aria.html#wai-aria

    Miércoles, 28 de noviembre 2012

(Subir al texto)

Añadir Comentario

* Campos obligatorios

Meneame Bitacoras