En este tutorial vamos a crear un sencillo ‘Step menu’ responsive con la única ayuda de CSS (nada de JavaScript, Bootstrap…)

Este tipo de menús se utiliza principalmente en procesos de compra (tiendas online), asistentes de ayuda por pasos (‘wizards’) o cursos de e-learning.

Normalmente estos elementos de menú (items) carecen de interacción, ya que el proceso suele permanecer secuencial y ordenado. En algunos casos se le añade un ‘estado hover‘ que cambia  el cursor al tipo ‘pointer‘, y/o también se altera la propiedad background o background-color.

En nuestro ejemplo vamos a prescindir de dichas interacciones ya que perjudicarían la Experiencia de Usuario, creando la sensación de que dichos elementos fuesen ‘pulsables’.

Vamos entonces a analizar nuestro Step menu, que se compone de los siguientes elementos:

  • Un <div> que contiene a todos los elementos del menú, cuyo ID es #menuBackground. Este <div> sirve como ‘contenedor’ y también para alinear al centro los elementos del menú.  En pantallas con un ancho en píxeles superior a 640 también aporta un color de fondo al menú.
  • Dentro del <div> anterior tenemos el menú propiamente dicho. Se trata de una lista no ordenada <ul> con sus correspondientes elementos de lista <li>. Semánticamente es lo más correcto y además es la forma más habitual y sencilla de estructurar menús. Nuestra lista no ordenada tiene el ID “menu” para ser tratado posteriormente vía CSS.
  • Todos los elementos de lista <li> contienen dos <div>. Uno para albergar el número del paso correspondiente (.numberStep) y otro para contener el texto del paso (.texto_step). De esta manera tenemos el control individual de los números de los pasos y de sus textos. Para distinguir el paso del menú en el que estamos, le asignamos al <li> actual la clase .active.

Esta es la estructura HTML de nuestro ejemplo:

El CSS encargado de dar aspecto al menú para tamaños de pantalla superiores a 640px es el siguiente:

Y este es el resultado de los estilos CSS anteriores:

step_menu01

Adicionalmente se han añadido estos estilos CSS para mejorar el aspecto del ejemplo:

Y tenemos una porción de CSS adicional muy interesante que pasa casi inadvertida. Contribuye a animar la transición entre el menú “normal” y su “aspecto responsive”. Analízalo junto con el resto del CSS del ejemplo porque se trata de un pequeño “tip” o “truco” que podrás aplicar a otros casos y que quizá te aporte ideas de uso nuevas.

Este es el CSS que realiza la transición animada…

… conjuntamente con esta ‘media-query’:

El aspecto de nuestro ‘Step menu’ para anchos inferiores a 640px es este:

step_menu02

Y aquí acaba este tutorial. Puedes revisar el ejemplo completo aquí.

 

Share:Tweet about this on TwitterShare on FacebookShare on Google+