Menú de navegación minimalista CSS3

Como probablemente ya haya escuchado, las animaciones CSS3 son una herramienta poderosa que le permite crear animaciones que se ejecutan sin la necesidad de aplicar secuencias de comandos adicionales a la página. Lo que es aún mejor, en la próxima generación de navegadores tendremos herramientas aún más potentes, incluidas las transformaciones 3D (ya presentes en Safari).

Pero qué diferencia hace para nosotros hoy ? Por el momento, solo tres navegadores le brindan la capacidad de animar propiedades CSS:Chrome, Safari y Opera, que juntos ocupan solo una pequeña parte del mercado de navegadores. Se espera que Firefox se una pronto al club, y con el lanzamiento inminente de IE9, de repente tiene sentido comenzar a aprovechar esta técnica.

Así que hoy estamos haciendo algo práctico:un menú de navegación animado CSS3 simple, que se degrada con gracia en los navegadores más antiguos y está preparado para funcionar en el futuro con la próxima generación de navegadores.

El XHTML

El menú está organizado como una lista desordenada. Esta es la estructura más adecuada para un menú, ya que proporciona una manera fácil de diseñar los enlaces del menú y es semánticamente correcta.

demostración.html

<ul id="navigationMenu">
    <li>
        <a class="home" href="#">
            <span>Home</span>
        </a>
    </li>

    <li>
        <a class="about" href="#">
            <span>About</span>
        </a>
    </li>

    <li>
         <a class="services" href="#">
            <span>Services</span>
         </a>
    </li>

    <li>
        <a class="portfolio" href="#">
            <span>Portfolio</span>
        </a>
    </li>

    <li>
        <a class="contact" href="#">
            <span>Contact us</span>
        </a>
    </li>
</ul>

Dentro de cada li tenemos un hipervínculo con un lapso dentro de eso. De manera predeterminada, estos intervalos están ocultos y solo se muestran cuando pasa el mouse sobre el enlace. Cada enlace tiene un nombre de clase único , que se usa para darle un fondo único y darle estilo al tramo interior, como verá en un momento.

El CSS

Una vez que tenemos la estructura básica en su lugar, ahora podemos pasar a crear los elegantes efectos y estilos CSS3. Esto funciona incluso en navegadores que no son compatibles con las animaciones de transición de CSS3. (todos los navegadores excepto Chrome, Safari y Ópera, en el momento de escribir esto) aunque con menos brillo. El menú es incluso perfectamente utilizable en navegadores tan antiguos como IE6.

estilos.css - Parte 1

*{
    /* A universal CSS reset */
    margin:0;
    padding:0;
}

body{
    font-size:14px;
    color:#666;
    background:#111 no-repeat;

    /* CSS3 Radial Gradients */
    background-image:-moz-radial-gradient(center -100px 45deg, circle farthest-corner, #444 150px, #111 300px);
    background-image:-webkit-gradient(radial, 50% 0, 150, 50% 0, 300, from(#444), to(#111));

    font-family:Arial, Helvetica, sans-serif;
}

#navigationMenu li{
    list-style:none;
    height:39px;
    padding:2px;
    width:40px;
}

Para el estilo del fondo del cuerpo, primero proporcioné un color de fondo, que actúa como respaldo, y luego agregué dos degradados radiales CSS3 (para Firefox y Chrome/Safari respectivamente) como imágenes de fondo. Si el navegador del visitante no admite gradientes, simplemente ignorará las reglas y usará el color de fondo simple.

Puede ver en los estilos que la mayoría de las reglas están precedidas por la identificación de la lista desordenada:#navigationMenu . Esto es para evitar colisiones con el resto de los estilos de su página, si incorpora el menú en su sitio.

estilos.css - Parte 2

#navigationMenu span{
    /* Container properties */
    width:0;
    left:38px;
    padding:0;
    position:absolute;
    overflow:hidden;

    /* Text properties */
    font-family:'Myriad Pro',Arial, Helvetica, sans-serif;
    font-size:18px;
    font-weight:bold;
    letter-spacing:0.6px;
    white-space:nowrap;
    line-height:39px;

    /* CSS3 Transition: */
    -webkit-transition: 0.25s;

    /* Future proofing (these do not work yet): */
    -moz-transition: 0.25s;
    transition: 0.25s;
}

#navigationMenu a{
    /* The background sprite: */
    background:url('img/navigation.jpg') no-repeat;

    height:39px;
    width:38px;
    display:block;
    position:relative;
}

/* General hover styles */

#navigationMenu a:hover span{ width:auto; padding:0 20px;overflow:visible; }
#navigationMenu a:hover{
    text-decoration:none;

    /* CSS outer glow with the box-shadow property */
    -moz-box-shadow:0 0 5px #9ddff5;
    -webkit-box-shadow:0 0 5px #9ddff5;
    box-shadow:0 0 5px #9ddff5;
}

La transición de CSS3 La propiedad es realmente poderosa. Le permite animar los cambios que ocurren en un elemento cuando entran en vigor las pseudo propiedades. Por ejemplo, aquí, cuando el usuario mueve el mouse sobre un enlace de navegación, :hover la pseudo-propiedad entra en vigor, mostrando el lapso que de otro modo estaría oculto.

Sin la definición de una propiedad de transición, este cambio es instantáneo. Pero con una transición podemos animarla. Aquí le estamos diciendo al navegador que la duración de la animación es de 250 milisegundos. Opcionalmente, puede especificar una lista de propiedades específicas para animarlas en lugar de todas.

Actualmente, las transiciones solo se admiten en webkit navegadores basados ​​en (Safari y Cromo ), pero también se espera que la próxima versión de Firefox los admita, por lo que preparamos el script para el futuro especificando una -moz-transition .

estilos.css - Parte 3

/* Green Button */

#navigationMenu .home { background-position:0 0;}
#navigationMenu .home:hover {   background-position:0 -39px;}
#navigationMenu .home span{
    background-color:#7da315;
    color:#3d4f0c;
    text-shadow:1px 1px 0 #99bf31;
}

/* Blue Button */

#navigationMenu .about { background-position:-38px 0;}
#navigationMenu .about:hover { background-position:-38px -39px;}
#navigationMenu .about span{
    background-color:#1e8bb4;
    color:#223a44;
    text-shadow:1px 1px 0 #44a8d0;
}

/* Orange Button */

#navigationMenu .services { background-position:-76px 0;}
#navigationMenu .services:hover { background-position:-76px -39px;}
#navigationMenu .services span{
    background-color:#c86c1f;
    color:#5a3517;
    text-shadow:1px 1px 0 #d28344;
}

/* Yellow Button */

#navigationMenu .portfolio { background-position:-114px 0;}
#navigationMenu .portfolio:hover{ background-position:-114px -39px;}
#navigationMenu .portfolio span{
    background-color:#d0a525;
    color:#604e18;
    text-shadow:1px 1px 0 #d8b54b;
}

/* Purple Button */

#navigationMenu .contact { background-position:-152px 0;}
#navigationMenu .contact:hover { background-position:-152px -39px;}
#navigationMenu .contact span{
    background-color:#af1e83;
    color:#460f35;
    text-shadow:1px 1px 0 #d244a6;
}

En la última parte del estilo, especificamos 5 diseños diferentes para los enlaces de navegación. Todas las imágenes de fondo de los enlaces están contenidas dentro de un solo archivo sprite. Tienen un estado normal y flotante uno debajo del otro. Cuando se desplaza el cursor, el fondo se desplaza para mostrar la versión adecuada de la imagen de fondo.

Se incluye un archivo PSD en el archivo descargable, por lo que puede personalizar las imágenes tanto como desee.

¡Con esto nuestro menú de navegación CSS3 minimalista está completo!

Conclusión

Tarde o temprano, vamos a tener acceso rápido a potentes gráficos acelerados por hardware, directamente en el navegador. Cuando llegue este día, se abrirá un mundo completamente nuevo para los desarrolladores web y estaremos aún más cerca de crear aplicaciones ricas en Internet, que se comportan exactamente como las aplicaciones nativas.

Hasta entonces, tenemos que hacer lo mejor con lo que tenemos y poco a poco empezar a adoptar técnicas de CSS3 en nuestro trabajo.

¿Qué opinas? ¿Cómo mejorarías este menú de navegación?