Crear un menú estilo Apple con HTML5 y CSS3

Apple siempre se ha caracterizado por el detalle que le imprime a sus diseños, pero no se queda sólo en el lado de sus productos, porque en la web también cuida esos pequeños detalles que a veces nosotros no vemos.

En este tutorial vamos a aprender a hacer un menú estilo Apple con HTML5 y CSS3, tal y cómo se ve en su sitio web oficial intentaremos adaptarlo para que nosotros también tengamos un menú igualito sin mucho esfuerzo. El tutorial sirve para todos los navegadores web modernos, a excepción de IE que lo probé en su versión 10 y nomás no me soportó la propiedad “inline-block”, pero los demás navegadores funciona perfectamente.

Demo del Tutorial | Archivos del tutorial

HTML

Para nuestra estructura necesitamos un <menu> porque lo estamos haciendo en HTML5, y para cada elemento de nuestro menú necesitamos una lista, todo muy sencillo. El menú podría decirse que tiene 3 partes principales. La primera parte es el inicio del menú, la segunda parte es el resto de las opciones, y la tercera es el final y caja de texto de búsqueda.

La segunda parte de nuestro menú consta de las opciones y tienen que estar definidas diferente que las de la primera opción porque no tienen bordes y su comportamiento es igual. Tal vez no se note ahorita pero cuando apliquemos CSS veremos el cambio.

Y por último es nuestra caja de texto, lo único que necesitamos es declarar la caja de texto en vez del texto, lo demás debe estar igual para que se acople a todo el menú.

CSS

La elaboración del menú es un poco más compleja de lo que quisiéramos, así que vamos a verlo por partes. Lo primero es configurar nuestro <menu>, y para ello necesitamos agregarle una pequeña sombra exterior para el menú, así como darle unos bordes redondeados que se acoplarán a todo el menú.

Después necesitamos configurar nuestra lista para que no se vea como lista, y si que nuestros elementos se vean en línea. Para esto usamos la propiedad “inline-block” y le quitamos viñetas y márgenes para que todo estuviera desde el extremo de nuestra capa contenedor. Hasta aquí le hemos cambiado el color de texto nada más.

Para que nuestro menú se vea bien tenemos que hay 3 partes. La primera parte consiste en el extremo izquierdo del menú, que tiene bordes redondeados. Nosotros usaremos una imagen para todo el fondo, en forma de spry, para que no tengamos que cargar imágenes cada vez que hacemos una acción.

De hecho, tenemos que hay diferentes fondos de acuerdo a lo que queramos configurar. En este caso estamos configurando lo que sería el primero, tercero y cuarto fondo. Vean que está dividido en dos, uno porque es el lado extremo izquierdo, y el otro es el contenido de las demás opciones. Por el hecho de que estamos usando el menú como un spry tenemos que coordinar los pixeles para empezar con el fondo de Inicio.

En cuanto a las demás opciones usamos la segunda parte del fondo, para que se vean las intersecciones, y los bordes sólo para el extremo. Para todas las opciones tenemos tres estados: el normal, :hover y :active, debido a que uno es cuando el mouse se pasa sobre la opción, y la otra es justo cuando damos clic; así está hecho el menú del sitio de Apple.

El menú del sitio de Apple tiene una caja de texto para buscar, en nuestro caso sólo necesitamos un <input /> y lo configuraremos con CSS. Lo que hacemos es que con un transition logramos que cuando la caja de texto recibe el comportamiento :focus se haga más ancho, y el color de fondo sea blanco.

En un principio configuramos el fondo como transparent, y le añadimos una imagen de fondo de una lupa. Cuando se activa :focus cambiamos la imagen de fondo de la lupa por una de color blanco.

Terminando esto ya deberíamos tener nuestro menú estilo Apple completo. Una semejanza casi exacta pero igual de funcional que el menú original.