Problem in the jQuery of a MENU with two ul 's

Question

Problem in the jQuery of a MENU with two ul 's

Navigation

#1 by (1 votes)
#2 by (1 votes)

2

I'm having a problem with a Menu.

It happens that when the person hovers the mouse in the Service link, a dropdown happens, the menu appears, since it is with display:none and when it passes the mouse it gets display:block .

So far so good, but I'm having a problem, I need this to happen with more than <ul> . But only 1%% of% is receiving this effect.

I want the person to move the mouse over the Call link, so this effect will happen in 2 or more <ul> 's there I can do it as if it were a <ul> .

Code for Menu | Mega Menu :

                    <li>
                        <a href="blog.html">Atendimento</a>
                        <ul><!-- Primeiro | No caso o .first() -->
                            <li><a href="base.html">Base de Conhecimento</a></li>
                            <li><a href="blog.html">Nosso Blog</a></li>
                            <li><a href="contato.php">Fale conosco</a></li>
                            <li><a href="suporte.html">Suporte</a></li>
                        </ul>
                        <ul><!-- Segundo | Não funciona -->
                            <li><a href="base.html">Base de Conhecimento</a></li>
                            <li><a href="blog.html">Nosso Blog</a></li>
                            <li><a href="contato.php">Fale conosco</a></li>
                            <li><a href="suporte.html">Suporte</a></li>
                        </ul>
                    </li>

Code for Menu | HTML :

jQuery("#menu > li").hover(function() {
        jQuery(this).find("ul").first().slideDown(600);
    }, function() {
        jQuery(this).find("ul").first().slideUp(200);

    });

    jQuery("#menu li ul li").hover(function() {
        jQuery(this).find("ul").first().toggle(0);

    });

    jQuery("#menu li ul li").each(function() {
        if(jQuery(this).has("ul").length > 0) {
            jQuery(this).addClass("menu-arrow")
        }
    });

I think the problem is in jQuery = first , in case it only works with the first .first() , but I need it to work with 2 <ul> .

Note: I tried to remove <ul> , but it left the whole menu buggy. (I'm still a beginner)

html jquery

asked by anonymous 09.08.2014 / 22:01

2 answers

1

My suggestion is to do this with CSS only.

ul  ul {
    display: none;
}

ul > li:hover ul {
    display: block;
}

Example: link

I could even do with CSS animation:

ul  ul {
    opacity: 0;
    transition: opacity 1s;
}

ul > li:hover ul {
    opacity: 1;
}

Example: link

10.08.2014 / 00:30

Which reference import for TableAttribute? Global variable is not defined

score 1 · Accepted Answer

As the template you passed me on the chat, your second UL is the child of A, so jquery had to be adapted:

HTML:

<ul id="menu">
    <li> <a href="blog.html">Atendimento</a>

        <ul>
            <li><a href="base.html">Base de Conhecimento</a></li>
            <li><a href="blog.html">Nosso Blog</a></li>
            <li><a href="contato.php">Fale conosco</a></li>
            <li> <a href="suporte.html">Suporte
                    <ul>
                        <li><a href="base.html">Base de Conhecimento</a></li>
                        <li><a href="blog.html">Nosso Blog</a></li>
                        <li><a href="contato.php">Fale conosco</a></li>
                        <li> <a href="suporte.html">Suporte</a></li>
                    </ul>
                </a>
            </li>
        </ul>
    </li>
</ul>

jquery:

$("#menu").find('li').hover(function () {
    $(this).children('ul').clearQueue().slideDown(600);
    $(this).children('a').children('ul').clearQueue().fadeIn(600);
}, function () {
    $(this).children('ul').slideUp(600);
    $(this).children('a').children('ul').fadeOut(600);
});

$("#menu").find('a').has( "ul" ).each(function() {
    $(this).addClass("menu-arrow");
});

That is, any LI that has a UL child and also every LI that has a child A that has an UL child will fire the events, showing the UL and then hiding again.

jsfiddle link