Menú de navegación multinivel con CSS

En este tutorial, vamos a construir un multinivel Menú de Navegación. Hay varias formas de implementar esto. En esta guía, vamos a construir este utilizando HTML y CSS.

Si realmente quiere ser elegante y aplicar algunos efectos geniales, deberá aplicar algunos JavaScript (o mejor aún jQuery) técnicas.

Para construir nuestro menú de navegación de varios nivelessimplemente vamos a usar una lista desordenada con sub-listas. Luego, solo aplicaremos algunas propiedades de estilo CSS para mostrar y ocultar los elementos de segundo nivel.

<ul id="navMenu">
    <li><a href="#">Home</a></li>
    <li><a href="#">Products</a>
        <ul>
            <li><a href="#">Computers</a></li>
            <li><a href="#">Audio</a></li>
            <li><a href="#">Video</a></li>
        </ul>
    </li>
    <li><a href="#">Contact</a></li>
    <li><a href="#">About</a>
        <ul>
            <li><a href="#">Location</a></li>
            <li><a href="#">Hours of Operation</a></li>
        </ul>
    </li>
</ul>

Puede agregar nuevos subelementos de segundo nivel simplemente añadiendo nuevo <ul> etiquetas antes de terminar el elemento principal con un <il> etiqueta.

Nota en el ejemplo anterior, cómo comenzamos una nueva lista desordenada antes de cerrar la Products artículo principal

Código CSS

sin CSS, tenemos una simple lista desordenada de varios niveles. Tendremos que aplicar algunos estilos creativos para transformar esto en un menú de navegación. Aquí hay un resumen del código CSS que necesitaremos.

ul#navMenu {
    padding:0px;
    margin:0px;
    width:420px;
    list-style:none;
    position:relative
}

ul#navMenu ul {
    position:absolute;
    left:0;
    top:100%;
    display:none;
    padding:0px;
    margin:0px
}

ul#navMenu li {
    display:inline;
    float:left;
    position:relative
}

ul#navMenu a {
    text-decoration:none;
    padding:10px 0px;
    width:100px;
    background:#666666;
    color:#ffffff;
    float:left;
    text-align:center;
    border:1px solid #ffffff;
}

ul#navMenu a:hover {
    background:#cccccc;
    color:#333333
}

Aquí está la sección del código CSS que hace que el aparecen subelementos Cuando usted hover sobre los elementos principales del primer nivel.

ul#navMenu li:hover ul {
    display:block;
}

ul#navMenu ul a {
    width:150px;
}

ul#navMenu ul li {
    display:block;
    margin:0px
}

Tú primero ocultar la lista de subelementos de segundo nivel configurando el estilo display:none. Luego, para que aparezcan los subelementos, configura el estilo en display:block en la pseudoclase hover en el elemento de la lista principal.

En este ejemplo, vamos a agregar un tercer nivel de los elementos del menú. El tercer nivel se colocará bajo el Video elemento secundario.

<ul id="navMenu">
    <li><a href="#">Home</a></li>
    <li><a href="#">Products</a>
        <ul>
            <li><a href="#">Computers</a></li>
            <li><a href="#">Audio</a></li>
            <li><a href="#">Video »</a>
                <ul>
                    <li><a href="#">VCR</a></li>
                    <li><a href="#">DVD</a></li>
                </ul>
            </li>
        </ul>
    </li>
    <li><a href="#">Contact</a></li>
    <li><a href="#">About</a>
        <ul>
            <li><a href="#">Location</a></li>
            <li><a href="#">Hours of Operation</a></li>
        </ul>
    </li>
</ul>

Para el tercer nivel, necesitamos agregar el siguiendo estilos CSS.

ul#navMenu ul ul {
    top:0;
    left:100%;
}

ul#navMenu li:hover ul ul {
    display:none;
}

ul#navMenu ul li:hover ul {
    display:block;
}

Puede continuar creando niveles adicionales si es necesario siguiendo el mismo patrón de ocultar y mostrar en el hover pseudo-clase.

Una vez que haya creado algunas barras de navegación de menús, el concepto de formatear una lista desordenada en una pestaña de menú se convierte en más y más fácil. Una vez que domine esta técnica, podrá realizar efectos más avanzados con la ayuda de JavaScript.