Crea un menú sorprendente en CSS3

El advenimiento de CSS3 ha introducido un mundo de posibilidades para diseñadores y desarrolladores web. Con animaciones, sombras, esquinas redondeadas y más, los elementos se pueden diseñar fácilmente y aún pesan menos que nunca.

La navegación de un sitio web es uno de los aspectos más fundamentales para hacer o deshacer la experiencia de un usuario. En lugar de cargar tu menú con imágenes individuales o sprites, ¿por qué no hacerlo todo en CSS3?

No es necesario jQuery o JavaScript; no es necesario iniciar Photoshop. Y vamos a llevarlo a un nivel superior al incluir una gran fuente de íconos para agregar algún carácter a nuestro menú.

Así que toma tu taza de café favorita (o si eres como yo, una Coca dietética helada), abre tu editor de código favorito y crea un menú de navegación elegante usando solo CSS3.

Antes de comenzar

Antes de profundizar en el código de nuestro menú, me gustaría revisar algunos de los recursos y herramientas que utilizaremos en este tutorial, que puede descargar y usar mientras sigue. Todos están incluidos en el archivo .zip al final, que también incluye el código final.

Imagen de fondo : Denim oscuro de Patrones sutiles.
Fuente de texto : Droid Sans de Google WebFonts.
Fuente de icono : Iconic Icon Set de Some Random Dude.
CSS3 JavaScript : -prefix-libre de Lea Verou.

De acuerdo, ¿tienes todo eso? ¿O al menos los descargó con el archivo .zip completo? Genial, ahora comencemos. Caminaremos a través de la configuración en piezas, empezando por el HTML, luego el CSS básico y finalmente condimentando con CSS3.

El HTML

Dado que estamos progresando con CSS3 en nuestro sistema de menú, me adelanté y nos configuramos con una configuración HTML5 muy básica. No es necesario volverse loco aquí. No estamos construyendo un sitio completo en este tutorial, solo el menú.

Vamos a saltar al código para el menú. El menú es simplemente una lista desordenada, con listas anidadas para desplegables. La lista desordenada está envuelta en una etiqueta HTML5.

Como puede ver, tenemos cinco elementos de menú, cuatro de los cuales tienen subtemas. El siguiente paso es obtener el estilo básico de CSS hecho, luego aplicaremos el CSS3 al menú y los tramos para lograr los íconos.

El CSS

Para obtener una buena línea de base con la que trabajar, agregaremos el patrón de mezclilla de Sutil Patterns y centraremos el menú, según una cuadrícula de 960.gs. También crearemos una clase de clearfix, que se utiliza en nuestros sistemas de menú.

/* http://meyerweb.com/eric/tools/css/reset/v2.0 | 20110126License: none (public domain)*/html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed,figure, figcaption, footer, header, hgroup,menu, nav, output, ruby, section, summary,time, mark, audio, video {margin: 0;padding: 0;border: 0;font-size: 100%;font: inherit;vertical-align: baseline;}/* HTML5 display-role reset for older browsers */article, aside, details, figcaption, figure,footer, header, hgroup, menu, nav, section {display: block;}body {line-height: 1;}ol, ul {list-style: none;}blockquote, q {quotes: none;}blockquote:before, blockquote:after,q:before, q:after {content: '';content: none;}table {border-collapse: collapse;border-spacing: 0;}body {background: url('img/denim.png');font-family: 'Droid Sans', sans-serif;;}.clearfix {clear: both;}.wrap {width: 940px;margin: 4em auto;}

Ahora, vamos a trabajar en el diseño del menú. Primero, diseñamos la navegación de nivel superior para crear un marco muy básico.

nav {padding: 0 10px;position: relative;}.menu li {float: left;position: relative;}.menu li a {color: #444;display: block;font-size: 14px;line-height: 20px;padding: 6px 12px;margin: 8px 8px;vertical-align: middle;text-decoration: none;}.menu li a:hover {color: #222;}

Vamos a recorrer ese código. La barra de menús abarcará todo el ancho de la clase .wrap, que es de 940 píxeles. Para agregar un poco de espacio en blanco para el primer elemento del menú, agregamos 10 píxeles de relleno en el lado izquierdo y derecho, y establecemos la posición de la barra de navegación en relativa. Esto se convierte en una declaración muy importante más adelante. Los elementos del menú de nivel superior flotan a la izquierda y también tienen un posicionamiento relativo. Luego damos un paso más y diseñamos los enlaces, que están configurados para mostrar: bloque ;. Esto es diferente de varios sistemas de menús CSS que tienen pantalla: en línea; declarado.

El menú desplegable

Los menús desplegables son listas desordenadas ordenadas, así que vamos a diseñarlas a continuación. De nuevo, vamos con el CSS básico aquí.

/* Dropdown styles */.menu ul {position: absolute;left: -9999px;list-style: none;}.menu ul li {float: none;}.menu ul a {white-space: nowrap;}/* Displays the dropdown on hover and moves back into position */.menu li:hover ul {left: 5px;}/* Persistent Hover State */.menu li:hover a {color: #222;}.menu li:hover ul a {background: none;}.menu li:hover ul li a:hover {}

¿Qué? ¿A dónde fue nuestro menú? Recuerde, este es un trabajo en progreso. Comenzará a juntarse, lo prometo. El .menu ul establece la posición en absoluta (recuerde, esta lista desordenada se encuentra dentro del elemento de la lista de nivel superior, que está posicionado relativamente - por lo tanto, el menú ul está posicionado relativamente al elemento de la lista de nivel superior). Entonces, lo colocamos fuera de la pantalla. Esta es una técnica que recogí de CSSWizardy, ya que este método proporciona una mejor accesibilidad para los lectores de pantalla, etc. Más adelante, lo llamaremos nuevamente en nuestros estados de vuelo estacionario.

A continuación, configuramos los elementos de la lista desplegable para que floten a la izquierda, creando un aspecto uniforme para el elemento desplegable. En la etiqueta de anclaje, lanzamos un espacio en blanco: nowrap; que evita que los enlaces largos se envuelvan en dos líneas. Esto ayuda a mantener una apariencia uniforme y mantiene la interfaz de usuario fácil de usar.

Pasando a los estados de vuelo estacionario, al pasar el elemento de la lista de nivel superior (.menu li) lanzamos un vuelo estacionario y seleccionamos nuestras listas subdesordenadas y movemos la lista fuera de la pantalla a 5 píxeles a la izquierda del elemento de la lista . Una vez más, el posicionamiento es relativo al elemento de la lista de nivel superior, por lo que se compensa con 5 píxeles del elemento de la lista. Si quitaras la posición relativa del nivel superior de li, todos tus elementos volantes volarían bajo el enlace "Inicio".

Ahora, nos aseguraremos de que cuando estemos sobre nuestros menús desplegables, el nivel superior de li mantenga el estilo, pero los elementos del menú desplegable no tienen ese estilo. Ahí es donde entran en juego su .menu li: hover a y .menu li: hover ul a. El primero establece el estado de desplazamiento persistente (por lo tanto, haga que este sea igual que su estilo de nivel superior), y este último elimina ese estilo de las listas de navegación secundarias.

Finalmente, diseñamos los elementos del menú desplegable. Oh, está en blanco? Sí, es todo CSS3. Llegaremos a eso en un minuto.

El CSS3

Ahora llegamos a la parte divertida. La especificación CSS3 ha introducido muchas herramientas divertidas y emocionantes para diseñadores web y desarrolladores que utilizan navegadores web modernos. Por supuesto, no todos los navegadores admiten todas las especificaciones de CSS3 (consulte css3files.com para obtener una excelente introducción sobre qué funciona y qué no), pero muchas de las especificaciones se degradan con elegancia y no rompen el diseño.

Nota: para este tutorial, estoy usando Lea Verou poderoso y épico diminuto (2kb) -prefix-free.js guión. Si no lo ha usado antes y trabaja con CSS3, hágase un favor y compruébelo. Utiliza una detección avanzada loca para tomar declaraciones CSS3 y agregar los prefijos de proveedor apropiados para garantizar la compatibilidad del navegador cuando sea necesario. Mantiene el código mucho más limpio y hace que el tutorial sea más fácil de entender.

Agreguemos algo de CSS3 a la barra de navegación, la lista desordenada de nivel superior y los elementos de la lista.

nav {background: -webkit-gradient(linear, center top, center bottom, from(#fff), to(#ccc));background-image: linear-gradient(#fff, #ccc);border-radius: 6px;box-shadow: 0px 0px 4px 2px rgba(0,0,0,0.4);padding: 0 10px;position: relative;}.menu li a:hover {background: -webkit-gradient(linear, center top, center bottom, from(#ededed), to(#fff));background-image: linear-gradient(#ededed, #fff);border-radius: 12px;box-shadow: inset 0px 0px 1px 1px rgba(0,0,0,0.1);color: #222;}

Primero en el código de arriba está la barra de navegación. Agregamos un degradado lineal de blanco a gris claro (utilizando tanto la declaración de degradado estándar como el estilo antiguo de "webkit" para mantener la compatibilidad con los navegadores más antiguos. Completamos (sin juego de palabras) la barra de navegación con un radio de borde de 6 píxeles .

En los estados de vuelo estacionario: agregamos un degradado lineal opuesto, así como algunas esquinas redondeadas y una sombra de cuadro insertada, dando a nuestros enlaces la apariencia de que el elemento del menú cae en la barra de navegación. En general, un aspecto muy limpio. Antes de llegar a los estados de vuelo estacionario, quiero volver a visitar algunos de los HTML en conexión con algunos CSS3. Utilicé una gran fuente de icono llamada Iconic de Some Random Dude, que está incrustada con la propiedad CSS3 @ font-face, y luego se llamó con etiquetas span en los elementos del menú. Una vez que haya descargado el conjunto, puede enganchar el código del CSS en el archivo zip, así como copiarlo sobre los archivos de fuente. Si cambia la ruta relativa, recuerde cambiar el src en @ font-face.

@font-face {font-family: 'IconicStroke';src: url("fonts/iconic/iconic_stroke.eot");src: local('IconicStroke'),url("fonts/iconic/iconic_stroke.svg#iconic") format('svg'),url("fonts/iconic/iconic_stroke.otf") format('opentype');}.iconic {color:inherit;font-family: "IconicStroke";font-size: 38px;line-height: 20px;vertical-align: middle;}

Con esa declaración de fuente, ahora puede pegar etiquetas de tramo con clases específicas para crear los íconos. Para mi proyecto, mantengo iconic.css como una hoja de estilo completamente intacta que lleva el nombre de mi style.css. Para incorporar los iconos en mis menús, modificaremos ligeramente el HTML:

Obviamente, el código anterior solo actualiza la navegación de nivel superior, agregando una etiqueta span con la clase icónica y la clase de iconos apropiada. Ahora que ya está hecho, haremos el diseño final de los elementos del menú desplegable, que arrojan algunas nuevas propiedades de CSS3 como la opacidad y una transición. Entonces, primero, el .menu ul:

.menu ul {position: absolute;left: -9999px;list-style: none;opacity: 0;transition: opacity 1s ease;}

Las dos grandes propiedades para revisar aquí son las declaraciones de opacidad y transición. La opacidad se establece en 0 y la transición hará que el menú desplegable pase de una opacidad de 0 a una opacidad de 1 en el transcurso de 1 segundo. Ahora hagamos el estado de vuelo estacionario.

.menu li:hover ul {background: rgba(255,255,255,0.7);border-radius: 0 0 6px 6px;box-shadow: inset 0px 2px 4px rgba(0,0,0,0.4);left: 5px;opacity: 1;}

El estado de vuelo estacionario es bastante complejo para pensar. Vayamos línea por línea.

La línea superior hace que el fondo sea un fondo blanco puro, luego establece la opacidad al 70% para permitir que parte del patrón de fondo se asome.

En segundo lugar, he redondeado las dos esquinas inferiores, dejando las esquinas superiores al cuadrado para dar la alusión de que el menú desplegable está saliendo de la barra de navegación.

Pero la tercera línea es donde entra la magia. Debido al posicionamiento de la barra de navegación y los elementos de la lista, el uso del índice Z es prácticamente imposible para que las capas tengan un efecto apropiado. Para lograr la apariencia de que el menú desplegable se encuentra debajo de la barra de navegación, establecemos una caja de luz con una sombra de cuadro similar que baja al menú desplegable. Finalmente, establezca la opacidad en 1, que se coordina con la transición que establecimos antes.

El resto de CSS3 es bastante directo y en gran parte repetitivo de lo que ya hemos visto:

.menu li:hover a {background: -webkit-gradient(linear, center top, center bottom, from(#ccc), to(#ededed));background-image: linear-gradient(#ccc, #ededed);border-radius: 12px;box-shadow: inset 0px 0px 1px 1px rgba(0,0,0,0.1);color: #222;}.menu li:hover ul a {background: none;border-radius: 0;box-shadow: none;}.menu li:hover ul li a:hover {background: -webkit-gradient(linear, center top, center bottom, from(#eee), to(#fff));background-image: linear-gradient(#ededed, #fff);border-radius: 12px;box-shadow: inset 0px 0px 4px 2px rgba(0,0,0,0.3);}

No debería ser demasiado fuera de lo normal en ese último conjunto de código. Y echa un vistazo a nuestro resultado final.

Conclusión

Bueno, ahí lo tienes; un menú slick y suave de CSS3. He incluido todos los activos en un archivo zip, que puedes descarga aquí , o tu puedes ver la demostración aquí .

diseño web iconos navegación html5 css3 fuentes del icono