How to hide navbar when clicked ouside of it

Question

So I've been trying to hide a navbar when the user clicks outside of it. I can't figure out why this function won't call. The full navbar is hidden outside of the screen (top -120px). When the user clicks the open button, jquery changes the top to 0. I made it close back if the user clicks a link in the navbar, however, I tried to do the same thing if the user clicks out of it.

I tried using .click on the "content" div, but that didn't work either.

Here is a Fiddle with the whole navbar: https://jsfiddle.net/daxgnq07/

jQuery

$(document).mouseup(function (e) {
    var container = $("header");
    if (!container.is(e.target) && container.has(e.target).length === 0) {
        container.css("top", "-120px");
        container.css("margin-top", "0px");
    }
});

HTML

<header>
    <div id="navbar">
        ...
    </div>
</header>
<div id="content">
</div>

if (!container.is(e.target) && !container.has(e.target).length) try it please — JoaoGRRR, Feb 15 '19 at 13:32
Thanks, I tried it, however, I still got the same results. The weird thing is that $(".navbar-items").click(closeNavbar) works, but $("#content").click(closeNavbar) doesn't, so this could be a hint to the problem? — Toni Florea, Feb 15 '19 at 13:39
Possible duplicate of [How do I detect a click outside an element?](https://stackoverflow.com/questions/152975/how-do-i-detect-a-click-outside-an-element) — Jeto, Feb 15 '19 at 13:49

Rod Ramírez · Answer 1 · 2019-02-15T14:32:10.500

Why don't you bind the on click event on content to hide the navbar? Try this if it fulfills your needs, creating that sort of animations with pixeles would be a problem later when making your site responsive

$(document).ready(function () {
 $("#content").on('click',function(){
   $("#navbar").hide();
  })
});

#navbar {
 background-color: black;
 height: 100px;
 width: 100%;
 color: white;
 text-align: center;
}

#content {
 background-color: #009900;
 height: 100px;
 width: 100%;
 color: white;
 text-align: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
    <div id="navbar">
        navbar
    </div>
</header>
<div id="content">
  content
</div>

EDIT

Looking at the fiddle that you provided in the comments, i found that you are calling your JQuery as

$("#something).click(funct);

I suspect that this form is deprecated, please use the following in the given order:

  $("#content").on('click',closeNavbar);
  $(".navbar-items").on('click',closeNavbar);
  $("#menu-button").on('click',openNavbar);
  $(".navbar-items").on('mouseover',changeSVG); //? changeSVG is not a declared function

this should return your expected behavior

Okay so I've done some more testing. `$("#content").on('click', function(){ alert("test"); }) ` it seems that it doesn't even call the function for some reason. Check my [fiddle](https://jsfiddle.net/daxgnq07/) please — Toni Florea, Feb 15 '19 at 14:01

score 0 · Accepted Answer · answered Feb 15 '19 at 14:18

0

First thing, you should create a class which has css which are styling through from jQuery as below:

.headerShown {
   top: -120px;
   margin-top: 0px; 
}

And you can add remove this class on container and window click. as below:

    $(document).ready(function () {
        $(window).click(function() {
            if ($("header").hasClass("headerShown")) {
                $("header").removeClass('headerShown');
            }
        });
        $("#content").on('click',function(){
            $("header").toggleClass('headerShown');
            return false;
        });
    });

Hope it helps you.

answered Feb 15 '19 at 14:18

Rohit Mittal

2,064
2
8
18

1

Thanks, this works, however, can you explain please why I need to return false? – Toni Florea Feb 15 '19 at 17:11
1

Because when you are clicking on #content, it will execute both function #content click and window click as well. So to avoid executing window function when user click on container, we need to break execution. You can try to remove that to see difference. – Rohit Mittal Feb 16 '19 at 05:28

How to hide navbar when clicked ouside of it

2 Answers2