Cómo crear un menú estilo Windows 8 con CSS y jQuery

Windows 8 nos trae una nueva interfaz y con ello una nueva forma de mostrar algunos de sus elementos clásicos como los botones, y los menús. Hay una parte de los menús donde para mostrar las sub opciones   hay que darle clic primero y el panel se ocultará, para que en ese mismo instante se revele el siguiente menú. A mi punto de vista es un efecto muy bonito y minimalista para evitar tener que tener muchas opciones a la vez.

En este tutorial vamos a ver cómo crear un menú estilo Windows 8 con la ayuda de CSS y jQuery, estoy seguro que les va a gustar y verán la utilidad de tener uno de estos menús en su sitio web o en dado caso en una aplicación web.

Ejemplo del tutorial

HTML

Como siempre necesitamos una capa que contenga todo nuestro menú, y de ahí necesitamos dos capas principales, una para el menú que aparece desde el principio, y el siguiente es el que va a contener todas las sub opciones.

CSS

Para nuestro CSS lo más importante es activar la propiedad de transition para nuestras dos capas, de lo contrario no se va a ver la animación de que se oculta un menú y se descubre el otro. También es importante ver que ponemos las capas como posición relative, para que podamos superponer la principal y la otra pueda quedar atrás, con la ayuda del z-index.

Por último está el margen, lo que se hace es ocultar los menús con un margen izquierdo, y cuando se abra un menú lo que hace es simplemente animar el margen a 0. También es indispensable tener las dos clases, la de abrir y cerrar, ya que en jQuery las vamos a manipular en nuestros menús.

jQuery

Activamos dos funciones, una para el menú principal, que va a hacer que se abra el segundo menú con las sub opciones pertenecientes. Para ello es que le añadimos la clase cerrar al menú principal y la clase abrir al segundo menú. Después para mostrar las opciones correspondientes necesitamos obtener el index de la primera opción que mostramos, y mostrar el grupo de sub opciones de acuerdo a ese index.

Para cerrar el menú y regresar al primero basta quitar las clases que añadimos al principio, y con eso hacemos el efecto invertido.