Quiero diseñar un menú multinivel usando jQuery.
Ya he escrito algo de código .Puedes ver la demo aquí .
Todo esto funciona bien. Pero yo quiero hacer multinivel menús desplegables de forma dinámica.

Script

$('ul#menu > li').hover(function(){
    //$('#drop' , this).css('display','block');
     $('.drop' , this).delay(20).slideDown(200);
}, function(){
 $('.drop' , this).delay(20).slideUp(200);
});​

HTML

<ul id="menu">
    <li><a href="#">Home</a>
        <ul class="drop">
            <li><a href="#">About us</a></li>
            <li><a href="#">About us</a></li>
            <li><a href="#">About us</a></li>
            <li><a href="#">About us</a></li>
        </ul>
    </li>


    <li><a href="#">about</a>
        <ul class="drop">
            <li><a href="#">Home</a></li>
            <li><a href="#">Home</a></li>
            <li><a href="#">Home</a></li>
            <li><a href="#">Home</a></li>
        </ul>
    </li>

</ul>​

CSS

ul#menu
{
    margin:0;
    padding:0;
}
ul#menu > li
{
    list-style:none;
    float:left;
    margin:0;
    padding:0;
    position:relative;
}
ul#menu a
{
    text-decoration:none;
    color:#fff;
    background:red;
    display:block;
    padding:10px;
}
ul#menu > li ul.drop
{
    margin:0;
    padding:0;
    width:150px;
    position:absolute;
    display:none;
}
ul#menu > li ul.drop ul
{
    margin:0;
    padding:0;
    width:150px;
    position:absolute;
    display:none;
    left:150px;
    top:0;
}
ul#menu > li ul li
{
    margin:0;
    padding:0;
    list-style:none;
    position:relative;
}​
InformationsquelleAutor Kamal | 2012-05-18

2 Comentarios

  1. 3

    Usted necesita para cambiar el script jQuery un poco para acomodar los menús multinivel como este:

    $('ul#menu li').hover(function(){
         $(this).children('ul').delay(20).slideDown(200);
    }, function(){
         $(this).children('ul').delay(20).slideUp(200);
    });

    y cambiar html como este:

    <ul id="menu">
        <li><a href="#">Home</a>
            <ul class="drop">
                <li><a href="#">About us</a></li>
                <li><a href="#">About us</a></li>
                <li><a href="#">About us</a></li>
                <li>
                    <a href="#">About us</a>
                    <ul>
                        <li><a href="#">Sub Item 1</a></li>
                        <li>
                            <a href="#">Sub Item 2</a>
                            <ul>
                                <li><a href="#">Sub item 3</a></li>
                                <li><a href="#">Sub item 4</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
    
    
        <li><a href="#">about</a>
            <ul class="drop">
                <li><a href="#">Home</a></li>
                <li><a href="#">Home</a></li>
                <li><a href="#">Home</a></li>
                <li><a href="#">Home</a></li>
            </ul>
        </li>
    </ul>

    Tu css está bien.
    Puede comprobar la versión actualizada de multinivel código en: http://jsfiddle.net/297t6/

  2. 0
    $(document).ready(function () {
    var data = [{ 'Name': 'Home', 'Url': '#', 'SubMenu': [{ 'Name': 'Home1', 'Url': '#' }, { 'Name': 'Home2', 'Url': '#' }, { 'Name': 'Home3', 'Url': '#' }, { 'Name': 'Home4', 'Url': '#' }, ] }, { 'Name': 'AboutUs', 'Url': '#', 'SubMenu': [{ 'Name': 'AboutUs1', 'Url': '#' }, { 'Name': 'AboutUs2', 'Url': '#' }, { 'Name': 'AboutUs3', 'Url': '#' }, { 'Name': 'AboutUs4', 'Url': '#' }, ]}];
    if (data.length > 0) {
    $('body').prepend('<ul id="menu"><ul>');
    $.each(data, function (i, entity) {
    var liHtml = [];
    liHtml.push('<li><a href="' + entity.Url + '">' + entity.Name + '</a>');
    if (entity.SubMenu.length > 0) {
    liHtml.push('<ul class="drop">');
    $.each(entity.SubMenu, function (i, subEntity) {
    liHtml.push('<li><a href="' + subEntity.Url + '">' + subEntity.Name + '</a>');
    });
    liHtml.push('</ul>');
    }
    liHtml.push('</li>');
    $('ul#menu').append(liHtml.join(''));
    });
    }
    $('ul#menu > li').hover(function () {
    //$('#drop' , this).css('display','block');
    $('.drop', this).delay(20).slideDown(200);
    }, function () {
    $('.drop', this).delay(20).slideUp(200);
    });
    });

    para la demostración en vivo, ver en este enlace: http://jsfiddle.net/nanoquantumtech/Z5NXv/

    • Gracias, para la solución anterior. Pero la solución sólo funciona para los 2 niveles de menuItems. es decir, los Padres y el Niño. Se puede decir, ¿cómo puedo tener infinitas menú de nivel?

Dejar respuesta

Please enter your comment!
Please enter your name here