Colorido menú de navegación animado CSS3

En este breve tutorial, crearemos un colorido menú desplegable usando solo CSS3 y la fuente del icono Font Awesome. Una fuente de iconos es, como su nombre lo indica, una fuente que asigna caracteres a iconos en lugar de letras. Esto significa que obtiene bonitos íconos vectoriales en todos los navegadores que admiten fuentes personalizadas HTML5 (que son prácticamente todas). Para agregar íconos a los elementos, solo necesita asignar un nombre de clase y el ícono se agregará con :before elemento por la fuente impresionante hoja de estilo.

El HTML

Aquí está el marcado con el que trabajaremos:

index.html

<nav id="colorNav">
    <ul>
        <li class="green">
            <a href="#" class="icon-home"></a>
            <ul>
                <li><a href="#">Dropdown item 1</a></li>
                <li><a href="#">Dropdown item 2</a></li>
                <!-- More dropdown options -->
            </ul>
        </li>

        <!-- More menu items -->

    </ul>
</nav>

Cada elemento del menú principal es un elemento secundario de la lista desordenada superior. En su interior hay un enlace con una clase de icono (consulte una lista completa de las clases de iconos aquí) y otra lista desordenada, que se mostrará como un menú desplegable al pasar el mouse por encima.

El CSS

Como puede ver en el fragmento de HTML anterior, tenemos listas desordenadas anidadas en la UL principal, por lo que debemos escribir nuestro CSS con precaución. No queremos que el estilo de la UL superior caiga en cascada en los descendientes. Por suerte, esto es precisamente lo que hace el selector css child '> ' es para:

activos/css/estilos.css

#colorNav > ul{
    width: 450px;
    margin:0 auto;
}

Esto limita las declaraciones de ancho y margen solo a la primera lista desordenada, que es un descendiente directo de nuestro #colorNav artículo. Teniendo esto en cuenta, veamos cómo se ven los elementos del menú:

#colorNav > ul > li{ /* will style only the top level li */
    list-style: none;
    box-shadow: 0 0 10px rgba(100, 100, 100, 0.2) inset,1px 1px 1px #CCC;
    display: inline-block;
    line-height: 1;
    margin: 1px;
    border-radius: 3px;
    position:relative;
}

Estamos configurando un bloque en línea valor de visualización para que los elementos de la lista se muestren en una línea, y estamos asignando una posición relativa para que podamos compensar los menús desplegables correctamente. Los elementos de anclaje contienen los íconos reales definidos por Font Awesome.

#colorNav > ul > li > a{
    color:inherit;
    text-decoration:none !important;
    font-size:24px;
    padding: 25px;
}

Ahora podemos continuar con los menús desplegables. Aquí definiremos una animación de transición CSS3. Estableceremos una altura máxima de 0 px, lo que ocultará el menú desplegable. Al pasar el mouse, animaremos la altura máxima a un valor mayor, lo que hará que la lista se revele gradualmente:

#colorNav li ul{
    position:absolute;
    list-style:none;
    text-align:center;
    width:180px;
    left:50%;
    margin-left:-90px;
    top:70px;
    font:bold 12px 'Open Sans Condensed', sans-serif;

    /* This is important for the show/hide CSS animation */
    max-height:0px;
    overflow:hidden;

    -webkit-transition:max-height 0.4s linear;
    -moz-transition:max-height 0.4s linear;
    transition:max-height 0.4s linear;
}

Y este es el desencadenante de la animación:

#colorNav li:hover ul{
    max-height:200px;
}

El valor de 200 px es arbitrario y tendrá que aumentarlo si su lista desplegable contiene muchos valores que no encajan. Desafortunadamente, no hay una forma solo de CSS para detectar la altura, por lo que tenemos que codificarla.

El siguiente paso es diseñar los elementos desplegables reales:

#colorNav li ul li{
    background-color:#313131;
}

#colorNav li ul li a{
    padding:12px;
    color:#fff !important;
    text-decoration:none !important;
    display:block;
}

#colorNav li ul li:nth-child(odd){ /* zebra stripes */
    background-color:#363636;
}

#colorNav li ul li:hover{
    background-color:#444;
}

#colorNav li ul li:first-child{
    border-radius:3px 3px 0 0;
    margin-top:25px;
    position:relative;
}

#colorNav li ul li:first-child:before{ /* the pointer tip */
    content:'';
    position:absolute;
    width:1px;
    height:1px;
    border:5px solid transparent;
    border-bottom-color:#313131;
    left:50%;
    top:-10px;
    margin-left:-5px;
}

#colorNav li ul li:last-child{
    border-bottom-left-radius:3px;
    border-bottom-right-radius:3px;
}

Y, por supuesto, ¡no vamos a ninguna parte sin algunos colores elegantes! Aquí hay 5 versiones:

#colorNav li.green{
    /* This is the color of the menu item */
    background-color:#00c08b;

    /* This is the color of the icon */
    color:#127a5d;
}

#colorNav li.red{       background-color:#ea5080;color:#aa2a52;}
#colorNav li.blue{      background-color:#53bfe2;color:#2884a2;}
#colorNav li.yellow{    background-color:#f8c54d;color:#ab8426;}
#colorNav li.purple{    background-color:#df6dc2;color:#9f3c85;}

Un buen aspecto del uso de fuentes de iconos es que puede cambiar el color del icono simplemente declarando una propiedad de color. Esto significa que todas las personalizaciones que desee realizar se pueden realizar con CSS solo .

¡Listo!

Las fuentes de iconos son una gran adición al conjunto de herramientas de desarrollo web. Como son fuentes regulares, puede usar el font-size , color y sombra de texto propiedades para personalizarlas. Este ejemplo no usa imágenes ni JS, por lo que debería ser bastante fácil hacerlo coincidir con su diseño actual y usarlo en unos minutos.