Menús desplegables creados con CSS3

Menús desplegables creados con CSS3
  • Eborio Linárez
  • December 08, 2012
  • 0

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 CSS3 sin necesidad de hacer uso de JavaScript.

Hoy el día con el auge de los frameworks CSS como Bootstrap no debemos preocuparnos por la creación manual de un menú desplegable, ya que tales frameworks ya poseen sus propios menús multinivel, pero nunca está de más conocer de que manera hacerlo manualmente. Así que por ello procederemos ha elaborar nuestro propio menú.

Antes de comenzar a definir el HTML y CSS necesario para construir el menú veamos el ejemplo finalizado para tener una idea del objetivo a conseguir.

See the Pen Menús desplegables creados con CSS3 by Eborio Linárez (@eborio) on CodePen.

Podrás apreciar que se trata de un menú con tres elementos principales. El menú Tutoriales posee un menú desplegable y el menú Servicios posee un menú desplegable de dos niveles.

HTML

Lo primero es definir el HTML a utilizar para generar la estructura del menú.

<nav>
    <ul class="menu">
        <!-- Top level menu -->
        <li>
            <a href="#">Inicio</a>
        </li>
        <li>
            <a href="#">
                Tutoriales
                <i class="fa fa-angle-down"></i>
            </a>
            <!-- Submenu -->
            <ul class="dropdown">
                <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>
            <!-- End submenu -->
        </li>
        <li>
            <a href="#">
                Servicios
                <i class="fa fa-angle-down"></i>
            </a>
            <!-- Submenu -->
            <ul class="dropdown">
                <li>
                    <a href="#">
                        Web Hosting
                        <i class="fa fa-angle-right"></i>
                    </a>
                    <!-- Submenu (level 2) -->
                    <ul class="dropdown">
                        <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>
                    <!-- End submenu (level 2) -->
                </li>
                <li>
                    <a href="#">
                        Dominios
                        <i class="fa fa-angle-right"></i>
                    </a>
                    <!-- Submenu (level 2) -->
                    <ul class="dropdown">
                        <li>
                            <a href="#">Registrar</a>
                        </li>
                        <li>
                            <a href="#">Transferir</a>
                        </li>
                    </ul>
                    <!-- End submenu (level 2) -->
                </li>
                <li>
                    <a href="#">Diseños Web</a>
                </li>
            </ul>
            <!-- End submenu -->
        </li>
        <!-- End top level menu -->
    </ul>
</nav>

Definimos una etiqueta nav que contiene todo el menú. Luego los tres elementos de tal menú se construyen con los li que son hijos directos de la primera lista desordenada ul.

Para conseguir los menús desplegables se deben anidar etiquetas ul dentro de las etiquetas li que servirán de menú padre. A estas etiquetas ul se le agrega la clase .dropdown.

El segundo menú contiene doble anidación de etiquetas ul para conseguir un submenú de dos niveles.

CSS

Definamos ahora las reglas CSS que definirán tanto las posiciones del menú como los efectos o transiciones que se ejecutarán cuando el usuario interactúe con éste.

ul.menu {
    width: 600px;
    margin: 0 auto;
}
ul.menu 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;
    text-decoration: none;
}
ul.menu a:hover {
    background-color: hsl(200, 80%, 35%);
}
ul.menu i {
    float: right;
    margin-right: 15px;
    font-size: 20px;
}
ul.menu li {
    list-style: none;
    text-align: center;
}
ul.menu > li {
    float: left;
}

Primordialmente le damos tamaño al menú. Aplicamos estilo a los enlaces de cada elemento y posicionamos los íconos a la derecha.

Luego le quitamos el característico estilo por defecto a los elementos li del menú y alineamos el texto contenido en estos hacia el centro.

Luego a los elementos li que son hijos directos del ul con la clase .menu se alinean hacia la izquierda para que su posición sea uno del lado del otro.

El símbolo > indica a CSS que solo va a aplicar las reglas a los hijos directos. En este caso ul.menu > li solo le aplicará la regla a los li que son hijos directos del ul con clase .menu, por lo tanto no afectará al resto de li del menú.

 Ahora vamos a definir las reglas para el menú desplegable.

ul.menu .dropdown {
    opacity: 0;
    visibility: hidden;
    position: absolute;
    min-width: 160px;
    z-index: -1;
    transform: translateY(-50px);
    transition: all 0.3s ease-out;
}
ul.menu .dropdown li {
    position: relative;
}

En primer lugar configuramos la opacidad en 0 para ocultarlo y visibility en hidden para que el usuario no pueda acceder al elemento, eliminado así algunos problemas al momento de colocar el puntero sobre el menú padre.

Se le define una posición absoluta para que no interfiera con la posición de los demás elementos del menú y se le especifica un tamaño mínimo.

Luego aplicamos la propiedad z-index que permite especificar el orden de los elementos y de que manera se solaparán unos a otros. En este caso al definirlo en -1 garantizamos que el submenú siempre aparecerá por detrás de los menús superiores.

Para darle movimiento al submenú al momento de aparecer lo movemos 50px hacia arriba con la propiedad transform definiendo translateY(-50px). Y le aplicamos una transición con la propiedad transition, esto hará que al momento de colocar el puntero del ratón sobre el elemento padre se desplace con una animación hasta la posición que definiremos más adelante.

Posteriormente todos los li que se encuentren dentro del submenú .dropdown se les aplica una posición relativa a su elemento padre.

Debido a que nuestro menú es de dos niveles vamos a definir algunas reglas para el segundo nivel.

ul.menu .dropdown ul {
    right: -162px;
    top: 10px;
}

Simplemente lo movemos a 162px de su derecha y a 10px de su tope.

Recuerda que este menú es un ejemplo para que aprendas a hacerlo tu mismo, existen  menús creados con mejores resultados y funcionalidades como los de Bootstrap por ejemplo. Pero nunca está demás conocer como hacerlos manualmente.

Finalmente definimos el comportamiento del menú desplegable.

ul.menu li:hover > .dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0px);
}

Estas reglas se ejecutarán cuando el usuario coloque el puntero sobre algún li que tenga como hijo directo un menú desplegable .dropdown.

Los hacemos visible y accesible con opacity y visibility respectivamente. Además lo movemos hacia abajo con transform gracias a que inicialmente lo habíamos movido hacia arriba.

Con esto finalizamos este post. Espero te haya gustado crear este menú desplegable utilizando solo CSS3 y lo compartas en tus redes sociales. Puedes descargar los ejemplos mediante el enlace de descargas o inspeccionar directamente el código en GitHub.

Comparte en las redes sociales

Comentarios

Aún no hay comentarios. Sé el primero en comentar.

Deja un comentario