Menú desplegable responsive con jquery y css3

AUTOR: Hugo Miguez CREADO: 2018-05-08 07:33:47

Menú responsive con multiniveles con posibilidad de configurar varias propiedades del menú, tanto para la versión de ordenador como móvil. Al descargar encontrarás los archivos sass para poder realizar las modificaciones.

Ejemplo del menú


Ejemplos

Ejemplo 1 Ejemplo 2 Ejemplo 3

Descarga

Descargar

Código para crear un menú

<nav id="menu">
    <ul class="center">
        <li class="left"><span>Item 1</span></li>
        <li><span>Submenú</span>
            <ul>
                <li><a href="#">Item 1</a></li>
                <li><a href="#">Item 2</a></li>
                <li><a href="#">Item 3</a></li>
            </ul>
        </li>
    </ul>
</nav>          

Ejemplo con 4 subniveles

<nav id="menu">
    <ul class="center">
        <li class="left"><span>Item 1</span></li>
        <li><span>Submenú 1</span>
            <ul>
                <li><a href="#">Item 1</a></li>
                <li><a href="#">Item 2</a></li>
                <li><span>Submenú 2</span>
                    <ul>
                        <li><a href="#">Item 1</a></li>
                        <li><a href="#">Item 2</a></li>
                        <li><span>Submenú 3</span>
                            <ul>
                                <li><a href="#">Item 1</a></li>
                                <li><a href="#">Item 2</a></li>
                                <li><span>Submenú 4</span>
                                    <ul>
                                        <li><a href="#">Item 1</a></li>
                                        <li><a href="#">Item 2</a></li>
                                        <li><a href="#">Item 3</a></li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</nav>      

Clases

SelectorClaseDescripción
#menu > ulcenterPosición centrada del menú
#menu > ul > lileftPosiciona el item del menú a la izquierda
#menu > ul > lirightPosiciona el item del menú a la derecha

Comentar

Para poder realizar comentarios. Primero debes inicar sesión o crear una cuenta.