Menú desplegable con varios niveles en JQuery | Programador Web Valencia

Menú desplegable con varios niveles en JQuery

2 minutos

Demo

Sitúate en Febrero y Semana 4.

Horizontal

Vertical

Fácil

Todo en un mismo documento.

<!DOCTYPE html>
<html lang="es-ES">

<head>
    <meta charset="UTF-8">
    <title>Menu desplegable con 2 niveles</title>
    <style>
    #menu {
        width: 500px;
        margin: 0 auto
    }
    #menu>ul>li {
        float: left
    }
    #menu>ul>li a {
        display: block;
        width: 100px;
        height: 50px;
        background: green;
        text-align: center;
        line-height: 50px
    }
    #menu>ul>li>ul {
        display: none
    }
    #menu>ul>li>ul>li {
        position: relative
    }
    #menu>ul>li>ul>li>a {
        background: red
    }
    #menu>ul>li>ul>li>ul {
        position: absolute;
        left: 100px;
        top: 0;
        display: none
    }
    #menu>ul>li>ul>li>ul a {
        background: #ff0
    }
    #menu ul {
        list-style: none;
        margin: 0;
        padding: 0
    }
    </style>
</head>

<body>
    <nav id="menu">
        <ul>
            <li><a href="#">Lorem.</a>
            </li>
            <li><a href="#">Repellendus.</a>
                <ul>
                    <li><a href="#">Lorem.</a>
                    </li>
                    <li><a href="#">Voluptate.</a>
                    </li>
                    <li><a href="#">Nesciunt.</a>
                    </li>
                </ul>
            </li>
            <li><a href="#">Fugiat!</a>
            </li>
            <li><a href="#">Fuga.</a>
            </li>
            <li><a href="#">Ea.</a>
                <ul>
                    <li><a href="#">Lorem.</a>
                    </li>
                    <li><a href="#">At.</a>
                    </li>
                    <li><a href="#">Ratione?</a>
                    </li>
                    <li><a href="#">Optio.</a>
                        <ul>
                            <li><a href="#">Lorem.</a>
                            </li>
                            <li><a href="#">Voluptas!</a>
                            </li>
                            <li><a href="#">Error?</a>
                            </li>
                        </ul>
                    </li>
                    <li><a href="#">Asperiores.</a>
                    </li>
                </ul>
            </li>
        </ul>
    </nav>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script>
    $(document).ready(function() {
        $menu = $('#menu').find('ul').find('li');

        $menu.hover(function() {
            $(this).children('ul').stop();
            $(this).children('ul').slideDown();
        }, function() {
            $(this).children('ul').stop();
            $(this).children('ul').slideUp();
        });
    });
    </script>
</body>

</html>

Avanzado: en archivos separados.

Html de ejemplo. Puedes llamarlo index.html

<!DOCTYPE html>
<html lang="es-ES">

<head>
    <meta charset="UTF-8">
    <title>Menu desplegable con 2 niveles</title>
    <link rel="stylesheet" href="css/main.css">
</head>

<body>
    <nav id="menu">
        <ul>
            <li><a href="#">Lorem.</a>
            </li>
            <li><a href="#">Repellendus.</a>
                <ul>
                    <li><a href="#">Lorem.</a>
                    </li>
                    <li><a href="#">Voluptate.</a>
                    </li>
                    <li><a href="#">Nesciunt.</a>
                    </li>
                </ul>
            </li>
            <li><a href="#">Fugiat!</a>
            </li>
            <li><a href="#">Fuga.</a>
            </li>
            <li><a href="#">Ea.</a>
                <ul>
                    <li><a href="#">Lorem.</a>
                    </li>
                    <li><a href="#">At.</a>
                    </li>
                    <li><a href="#">Ratione?</a>
                    </li>
                    <li><a href="#">Optio.</a>
                        <ul>
                            <li><a href="#">Lorem.</a>
                            </li>
                            <li><a href="#">Voluptas!</a>
                            </li>
                            <li><a href="#">Error?</a>
                            </li>
                        </ul>
                    </li>
                    <li><a href="#">Asperiores.</a>
                    </li>
                </ul>
            </li>
        </ul>
    </nav>
    <script src="js/jquery-2.1.1.min.js"></script>
    <script src="js/main.js"></script>
</body>

</html>

El Sass.

$anchoCelda: 100px

$alturaCelda: 50px

$numElementos: 5

$colorNivel1: green

$colorNivel2: red

$colorNivel3: yellow



#menu

     width: $anchoCelda * $numElementos

     margin: 0 auto

     >ul>li 

          float: left

          a

               display: block

               width: $anchoCelda

               height: $alturaCelda

               background: $colorNivel1

               text-align: center

               line-height: $alturaCelda

          >ul

               display: none

               >li 

                    position: relative

                    >a

                         background: $colorNivel2

                    >ul

                         position: absolute

                         left: $anchoCelda

                         top: 0

                         display: none

                         a

                              background: $colorNivel3

     ul

          list-style: none

          margin: 0

          padding: 0

O en CSS puro.

#menu {
    width: 500px;
    margin: 0 auto
}
#menu>ul>li {
    float: left
}
#menu>ul>li a {
    display: block;
    width: 100px;
    height: 50px;
    background: green;
    text-align: center;
    line-height: 50px
}
#menu>ul>li>ul {
    display: none
}
#menu>ul>li>ul>li {
    position: relative
}
#menu>ul>li>ul>li>a {
    background: red
}
#menu>ul>li>ul>li>ul {
    position: absolute;
    left: 100px;
    top: 0;
    display: none
}
#menu>ul>li>ul>li>ul a {
    background: #ff0
}
#menu ul {
    list-style: none;
    margin: 0;
    padding: 0
}

Y por último el JQuery.

 

$(document).ready(function() {
	$menu = $('#menu').find('ul').find('li');

	$menu.hover(function() {
		$(this).children('ul').stop();
		$(this).children('ul').slideDown();
	}, function() {
		$(this).children('ul').stop();
		$(this).children('ul').slideUp();
	});
});

Actualización

Menú responsive completo con botón hamburguesa.

Esta obra está bajo una Licencia Creative Commons Atribución-NoComercial-SinDerivadas 4.0 Internacional.

Atribución/Reconocimiento-NoComercial-SinDerivados 4.0 Internacional

¿Me ayudas?

Comprame un café
Pulsa sobre la imagen

No te sientas obligado a realizar una donación, pero cada aportación mantiene el sitio en activo logrando que continúe existiendo y sea accesible para otras personas. Además me motiva a crear nuevo contenido.

Comentarios

{{ comments.length }} comentarios

Nuevo comentario

Nueva replica  {{ formatEllipsisAuthor(replyComment.author) }}

Acepto la política de Protección de Datos.

Escribe el primer comentario

Tal vez también te interese...