Crear menús desplegables con CSS3

Crear menús desplegables con CSS3

Uno de los elementos más importantes de un sitio web es el menú. Este debe facilitar la navegación de los usuarios por las diferentes secciones del sitio web para que accedan de manera rápida a los contenidos que deseen visualizar. La mejor manera de ofrecer un menú amigable e intuitivo es agrupar las secciones comunes y así formar un menú desplegable, de esa forma toda la navegación del sitio web será mucho más organizada. En esta ocasión crearemos un menú desplegable multinivel utilizando solo CSS sin necesidad de hacer uso de JavaScript.

El menu que crearemos es bastante sencillo y poseerá una animación realizada con CSS3 para darle un poco más de vistosidad.

HTML

Para estructurar el menú haremos uso de una de las etiquetas creadas para tal fin en HTML5: la etiqueta <nav>. Dentro de ella ubicamos una lista desordenada <ul> la cual será el elemento principal del menú.

Los elementos desplegables a su vez serán igualmente listas desordenadas <ul> anidadas dentro de elementos <li>.

Apreciaran algunas etiquetas <i> las cuales son utilizadas para colocar los íconos que indicaran al usuario que se trata de un menú desplegable. Se utiliza para los íconos FontAwesome.

<nav>
    <ul>
        <li>
            <a href="#">Inicio</a>
        </li>
        <li>
            <a href="#">
                Tutoriales
                <i class="fa fa-angle-down"></i>
            </a>
            <ul>
                <li><a href="#">Diseño Gráfico</a></li>
                <li><a href="#">Programación PHP</a></li>
                <li><a href="#">Maquetación CSS</a></li>
            </ul>
        </li>
        <li>
            <a href="#">
                Servicios
                <i class="fa fa-angle-down"></i>
            </a>
            <ul>
                <li>
                    <a href="#">
                        Web Hosting
                        <i class="fa fa-angle-right"></i>
                    </a>
                    <ul>
                        <li>
                            <a href="#">Hosting 10GB</a>
                        </li>
                        <li>
                            <a href="#">Hosting 25GB</a>
                        </li>
                        <li>
                            <a href="#">Hosting 50GB</a>
                        </li>
                        <li>
                            <a href="#">Hosting Ilimitado</a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="#">
                        Dominios
                        <i class="fa fa-angle-right"></i>
                    </a>
                    <ul>
                        <li>
                            <a href="#">Registrar</a>
                        </li>
                        <li>
                            <a href="#">Transferir</a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="#">Diseños Web</a>
                </li>
            </ul>
        </li>
    </ul>
</nav>

CSS

Comenzamos con unas sencillas reglas CSS para los elementos del menú.

nav {
    width: 600px;
    margin: 0 auto;
}
nav ul {
    list-style: none;
    text-align: center;
}

Luego definimos la apariencia del menú.

nav > ul > li {
    float: left;
}
nav a {
    background: hsl(200,80%,50%);
    min-width: 160px;
    padding: 10px 0;
    margin: 2px;
    color: hsl(0,0%,100%);
    box-shadow: 0 1px 3px hsla(0,0%,0%,0.5);
    display: block;
}
nav a:hover {
    background-color: hsl(200, 80%, 35%);
}

En la primera regla indicamos que solo los elementos de <li> que sean hijos directos de un <ul> que a su vez sea hijo directo de <nav> floten hacia la izquierda. Las reglas posteriores solo indican el estilo que tendrán los botones en su estado normal y el estilo que adaptarán al colocar el puntero sobre ellos.

La siguiente regla es para posicionar y cambiar el tamaño de los íconos del menú.

nav i {
    float: right;
    margin-right: 15px;
    font-size: 20px !important;
}

Las listas que se encuentren anidadas dentro de elementos <li> en un principio tendrán visibility: hidden para que no interfieran en la posición de otros elementos en la pantalla y su opacidad estará fijada en 0 para que sean invisibles. Se les fija posición absoluta para que no afecten el ancho de su elemento padre y se les asigna una acho mínimo para que no se vean desiguales.

Los elementos poseen la propiedad z-index con un valor negativo para que aparezcan por detrás de su elemento padre al ser desplegados.

De igual manera se les aplican transformaciones y animaciones a las listas <ul> hijas para lograr la apariencia de deslizamiento desde la parte superior. Para ello se utiliza translate con lo cual se llevan 50px hacia arriba todas las listas que van a formar el menú desplegable. Y por supuesto deben poseer una transición que ayude a que el efecto no sea tan brusco.

nav li ul {
    opacity: 0;
    visibility: hidden;
    position: absolute;
    min-width: 160px;
    z-index: -1;
    -webkit-transform: translateY(-50px);
    -moz-transform: translateY(-50px);
    -o-transform: translateY(-50px);
    -ms-transform: translateY(-50px);
    transform: translateY(-50px);
    -webkit-transition: all 0.3s ease-out;   
    -moz-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

Ahora bien, la siguiente regla es la regla mágica, es decir, la que se encargará de dar el efecto de menu desplegable. Se activará en el momento de colocar el puntero sobre un <li> que posea una lista <ul> como elemento hijo lo cual volverá visibles los menús de niveles inferiores a la vez que los desplaza hacia abajo con la propiedad translate y les aplica una transición para que se pueda notar el efecto.

nav li:hover > ul {
    visibility: visible;
    opacity: 1;
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -o-transform: translateY(0px);
    -ms-transform: translateY(0px);
    transform: translateY(0px);
    -webkit-transition: all 0.3s ease-out;   
    -moz-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

Y finalmente creamos los estilos que ayudaran a que los menus de tercer nivel aparezcan al lado de sus elementos padre y no debajo de ellos.

nav li ul li {
    position: relative;
}
nav li ul li ul {
    right: -162px;
    top: 10px;
}

CONCLUSIÓN

Como han podido observar, crear un menú desplegable solo utilizando CSS es muy sencillo y de esa manera prescindimos de JavaScript lo cual nos ayuda a la velocidad de carga de nuestra web. Claro está que el menú creado es muy sencillo, pero puede ser mejorado muy facilmente.

Espero les haya resultado de gran ayuda y empiecen a crear sus menús desplegables con efectos mediante la implementación de CSS3. También espero que compartas mi artículo y que dejes tus comentarios. Gracias hasta el próximo artículo.

Comentarios

Deja tu comentario

http://