CODEWITHSUNDEEP
javascriptjquerycsshidenav
Spencer
Spencer

Reputation: 37

Hide <nav> on click

Created a little nav for a client that opens a 'site map' style of links which is popular opposed to the menu-after-menu of the past and it's worked great.

Opens on click, and hides once the mouse leaves the div. However, now I've run into an issue now that we've introduced anchor links to that nav. With it ONLY going away once the mouse leaves, the page will go to the anchor link requested behind the nav, but not go away until the mouse leaves.

I thought I could just add a line to move it on click, but that doesn't do anything. I changed the action to make the background red just to make sure it was triggering and it does, but it just doesn't want to adjust the top (the way I'm hiding) as it does the others. Hoping someone can have a look and tell me what I'm missing! Thanks guys

Here's the javascript 

$(document).ready(function () {
$("#nav_hover").click(function () {
    setTimeout(function () {
        $("#nav_features #nav_expanded_nav.expanded_nav").css("top", "95px");
    }, 20);
});
$("#nav_hover").mouseleave(function () {
    setTimeout(function () {
        $("#nav_features #nav_expanded_nav.expanded_nav").css("top", "-800px");
    }, 800);
});

});

Here's the nav bar the 'expanded nav' drops from:

<nav id="main_nav">
 <ul>
  <a id="nav_hover">
  <li>Nav Option</li>
  </a>
 </ul>
</nav>

And this is the expanded nav that comes down, that I want to hide whenever clicked:

<nav id="nav_expanded_nav" class="expanded_nav">
 <ul class="main_catagory_nav">
  <h1>Heading</h1>
  <p>Description</p>
   <li><a href="http://www.theplace.com/link.shtml#anchor">Link 1</a></li>
   <li><a href="http://www.theplace.com/link.shtml#anchor2">Link 2</a></li>
 </ul>
</nav>

And this is what I THOUGHT would be all I needed!

$(document).ready(function () {
$("#nav_hover").click(function () {
    setTimeout(function () {
        $("#nav_features #nav_expanded_nav.expanded_nav").css("top", "95px");
    }, 20);
});
$("#nav_hover").mouseleave(function () {
    setTimeout(function () {
        $("#nav_features #nav_expanded_nav.expanded_nav").css("top", "-800px");
    }, 800);
});
$(".nav_expanded_nav a").click(function () {
    setTimeout(function () {
        $("#nav_features #nav_expanded_nav.expanded_nav").css("top", "-800px");
    }, 20);
});


});

But it does nothing. If I change iut to .css("background", "red") it does change the background of that div just fine, which at least confirms it's the right idea. but it just can't impact the 'top' of css

Upvotes: 0

Views: 2630

Answers (1)

cch
cch

Reputation: 3386

This my attempt: make the #nav_expanded_nav always hidden. Then when #nav_hover its clicked change the visibility to visible. When an anchor tag is clicked inside the #nav_expanded_nav change its visibility back to hidden The same happens when the user leaves the #nav_expanded_nav.

CSS: 

#nav_expanded_nav {
  visibility: hidden;
}

jQuery: 

$(document).ready(function() {
  $("#nav_hover").click(function() {
      $("#nav_expanded_nav").css("visibility", "visible");
  });

  $("#nav_expanded_nav > ul > li > a ").click(function() {
      $('#nav_expanded_nav').css("visibility", "hidden");
  });

  $("#nav_expanded_nav").mouseleave(function(){
     $(" #nav_expanded_nav").css("visibility", "hidden");
  });                                                            
});

See an example pen.

Upvotes: 3

Related Questions