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.

-   [Lorem.](#)
-   [Repellendus.](#)
    -   [Lorem.](#)
    -   [Voluptate.](#)
    -   [Nesciunt.](#)
-   [Fugiat!](#)
-   [Fuga.](#)
-   [Ea.](#)
    -   [Lorem.](#)
    -   [At.](#)
    -   [Ratione?](#)
    -   [Optio.](#)
        -   [Lorem.](#)
        -   [Voluptas!](#)
        -   [Error?](#)
    -   [Asperiores.](#)

Avanzado: en archivos separados.

Html de ejemplo. Puedes llamarlo index.html

-   [Lorem.](#)
-   [Repellendus.](#)
    -   [Lorem.](#)
    -   [Voluptate.](#)
    -   [Nesciunt.](#)
-   [Fugiat!](#)
-   [Fuga.](#)
-   [Ea.](#)
    -   [Lorem.](#)
    -   [At.](#)
    -   [Ratione?](#)
    -   [Optio.](#)
        -   [Lorem.](#)
        -   [Voluptas!](#)
        -   [Error?](#)
    -   [Asperiores.](#)

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 invitas a un café? ☕

Puedes hacerlo usando el terminal.

ssh customer@andros.dev -p 5555

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...