Custom Drop-down in jQuery

Question

I've been looking at jquery drop-down plugins. None of them function the way I'd like.

I need to write a simple script that's essentially a drop-down menu.

There's a simple series of li w/ unique ids that match a class of a div (not a child or parent). I'd like the sub-menu to slide down on hover of the main-menu li.

So, the HTML would look like:

<ul>
   <li id="number1"><a href="#">Link</a></li>
   <li id="number2"><a href="#">Link</a></li>
</ul>
<div class="number1">
Div stuff...
</div>
<div class="number2">
More stuff...
</div>

I'm having a little trouble, and I'd really appreciate the help!

Answer 1

You can try something like:

<script language="javascript">
    $(document).ready(function() {
        var id = $(this).attr("id");

        $("#Links li").hover(function() {
            $("." + id).slideDown("slow");
        }, function() {
            $("." + id).slideUp("slow");
        });
    });
</script>

<ul id="Links">
    <li id="number1"><a href="#">Link</a></li>
    <li id="number2"><a href="#">Link</a></li>
</ul>

<div class="number1">
    Div stuff...
</div>
<div class="number2">
    More stuff...
</div>

Answer 2

Assign another CSS class to the submenus, like so

<div class="number1 isSubMenu">
Div stuff...
</div>
<div class="number2 isSubMenu">
More stuff...
</div>

and then the following jQuery should do it (considering you have done all the CSS work required to position the submenus):

$("li > a").bind("mouseenter",function(){
    var _li=$(this).parent();
    $(".isSubMenu").slideUp("fast");
    $("."+_li.attr("id")).stop().slideDown("slow");
});

The above code is not optimized, but it should give you a fair idea of how this is done....

EDIT: as per your comment, there is a bit of work involved in terms of both javascript as well as css, to get a perfect working drop-down menu system. With the above code, you would need to move the submenus, to be children of the LI elements... so, later you can bind a mouseleave event on the LI to hide it's children. And because this is mouseleave rather than mouseout it will work when mouseleaving both the LI and it's child Submenu....

If you want a more comprehensive solution, try this and this... they mostly use CSS, but use javascript for degradation to old browsers. A quick gloss-over the code in both those projects should give you a fair idea of how this is done...

Answer 3

You'll need to have the $(this).attr('id') call inside the hover functions to capture the correct element id. I assume the divs will also be hidden like my example below.

<script>

        $(document).ready(
        function() {
                $('ul li').hover(
                        function() {
                                var target = $(this).attr('id');
                                $("." + target).slideDown('slow');
                        },
                        function() {
                                var target = $(this).attr('id');
                                $("." + target).slideUp('slow');
                        }
                );
        });

</script>

<ul>
   <li id="number1"><a href="#">Link</a>
    <div class="number1" style="display:none;">
    Div stuff...
    </div>
   </li>
   <li id="number2"><a href="#">Link</a>
    <div class="number2" style="display:none;">
    More stuff...
    </div>
</li>
</ul>