Navigation using jQuery

Question

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

kasdega · Accepted Answer · 2011-12-10 19:58:17Z

1

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();

        });

    });
});

edited Dec 10, 2011 at 19:58

answered Dec 10, 2011 at 16:12

kasdega

18.9k13 gold badges56 silver badges90 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Merlyn Morgan-Graham Over a year ago

I'm trying this out, and it seems the handler for .one(... gets invoked immediately after clicking the menu (possibly because it is in the middle of processing another click?) - jsfiddle.net/PMdVS/4

Merlyn Morgan-Graham Over a year ago

$("#menu").click(function(event) { plus event.stopPropagation(); will work. See: jsfiddle.net/PMdVS/7

kasdega Over a year ago

entirely possible...in my code I always do a event.preventDefault() & an event.stopImmediatePropagation()...I'll add that to the answer.

Valent La Merchant Over a year ago

thank so much you both.. It now works perfectly like this: jsfiddle.net/2THRL/7 :)

Matteo Pagliazzi · Accepted Answer · 2011-12-10 16:08:55Z

0

You can try something like this:

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

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

it should work :)

answered Dec 10, 2011 at 16:08

Matteo Pagliazzi

5,28012 gold badges52 silver badges85 bronze badges

1 Comment

kasdega Over a year ago

The jquery methods .show() and .hide() or even .toggle() are preferred preferred over setting the css "display". This will also cause ANY element with a class="list" to be hidden.

Community · Accepted Answer · 2020-06-20 09:12:55Z

0

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");
        }
    );
});

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Dec 10, 2011 at 16:08

Merlyn Morgan-Graham

59.4k16 gold badges131 silver badges189 bronze badges

7 Comments

kasdega Over a year ago

The OP asked for the click to show and hide the menu this is a lot of information about hovering which would be great if the question were about how to make a menu appear/hide upon hover.

Merlyn Morgan-Graham Over a year ago

@kasdega: Yes, you're correct. I was under the assumption that it wouldn't be possible, though you've proven otherwise.

kasdega Over a year ago

:) great answer though for the next guy looking to show/hide via hover

kasdega Over a year ago

you could also check out the fantastic jquery plugin hoverIntent

Valent La Merchant Over a year ago

hi Merlyn... thanks for the answer I've tried it. And it works cool.. edit: jsfiddle.net/2THRL/2 I wish the menu to disappear when I click somewhere else in the body. Not with the .mouseleave

|

Collectives™ on Stack Overflow

Navigation using jQuery

3 Answers 3

4 Comments

1 Comment

Edit:

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

1 Comment

Edit:

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related