CODEWITHSUNDEEP
jquerynavigation
Valent La Merchant
Valent La Merchant

Reputation: 13

Navigation using jQuery

I'm making a navigation menu for my website. I wanted it to look like Facebook's top navigation. The menu expands only when it's clicked and disappears when you click somewhere else.

I seem have found a way to expand the list by clicking the #menu, but it won't disappear after that. I have no idea how to do so. I'm new to jQuery. I've tried to use and implement the 'if else' jQuery function, but still have no result.

Here's the jQuery listing code:

$(function() {
    // OPACITY OF BUTTON SET TO 50% and DISPLAY LIST AS NONE
    $("#menu").css("opacity","0.5");
    $(".list").css("display","none");

    // ON MOUSE CLICK
    $("#menu").click(function () {
        // SET OPACITY TO 100% and DISPLAY LIST
        $(this).stop().animate({ opacity: 1.0 }, "slow");
        $(".list").css("display","inline");
    });
});

and the HTML is simply:

<div id="menu">
    <a href="where.com"><span class="menu">MENU</span></a>
</div>

Thanks for helping... regards

Upvotes: 1

Views: 501

Answers (3)

kasdega
kasdega

Reputation: 18776

Try using jquery's one() method to bind the document to cause the menu to disappear.

$(function() {
    // OPACITY OF BUTTON SET TO 50% and DISPLAY LIST AS NONE
    $("#menu").css("opacity", "0.5");
    $(".list").hide();

    // ON MOUSE CLICK
    $("#menu").click(function(event) {
        event.preventDefault();
        event.stopImmediatePropagation();

        // SET OPACITY TO 100% and DISPLAY LIST
        $(this).stop().animate({
            opacity : 1.0
        }, "slow");
        $(".list").css("display", "inline");


        // this will bind the entire document for a single click
        $(document).one("click", function() {
            // do something to hide the menu here...
            $("#menu .list").hide();

        });

    });
});

Upvotes: 1

Merlyn Morgan-Graham
Merlyn Morgan-Graham

Reputation: 59101

Edit:

I found something that matches your request a little bit better (though still not exactly). Try the .mouseleave() function to handle the event where you leave focus of the menu.

I'd suggest .focusout(), but it seems the focus would have to be set to the menu somehow, and I can't seem to get that to work.

http://jsfiddle.net/PMdVS/2/

$(function()
{
    // OPACITY OF BUTTON SET TO 50% and DISPLAY LIST AS NONE
    $("#menu").css("opacity","0.5");
    $(".list").css("display","none");

    // ON MOUSE CLICK
    $("#menu").click(
        function() {
            $(this).stop().animate({opacity: 1.0}, "slow");
            $(".list").css("display","inline");
        }
    );
    // ON MOUSE LEAVE
    $("#menu").mouseleave(
        function() {
            $(this).stop().animate({opacity: 0.5}, "slow");
            $(".list").css("display","none");
        }
    );
});

The menu expands only when it's clicked and disappears when you click somewhere else.

Not completely sure if you wanted the menu to be an on-click thing, or if you just used that because that's what you found.

Try the .hover() method, which takes a handler for when you start hovering, and when you stop hovering:

http://jsfiddle.net/PMdVS/

$(function()
{
    // OPACITY OF BUTTON SET TO 50% and DISPLAY LIST AS NONE
    $("#menu").css("opacity","0.5");
    $(".list").css("display","none");

    // ON MOUSE OVER
    $("#menu").hover(
        function() {
            // SET OPACITY TO 100%
            $(this).stop().animate({opacity: 1.0}, "slow");
            $(".list").css("display","inline");
        },
        function() {
            $(this).stop().animate({opacity: 0.5}, "slow");
            $(".list").css("display","none");
        }
    );
});

Upvotes: 0

Matteo Pagliazzi
Matteo Pagliazzi

Reputation: 5260

You can try something like this:

$('html').click(function() {
 $(".list").css("display","none");
});

$('#menu').click(function(event){
 event.stopPropagation();
});

it should work :)

Upvotes: 0

Related Questions