Show/Hide div dropdown menu

Question

I am trying to make a dropdown menu like the one over at https://www.nakedcph.com/ . My current idea is to make a menu where the links display different divs on hover that is placed below the current menu and will work as a dropdown

  <div id="menu"> <ul> <li id="newarrivals-trigger"><a href="url">New Arrivals</a></li> <li><a href="url">Brands</a></li> <li><a href="url">Accessories</a></li> <li><a href="url">Journal</a></li> </ul> </div> 

where #newarrivals-trigger displays this below

 <div id="dropdown"> <ul> <li><a href="#">Adidas</a></li> <li><a href="#">Nike</a></li> <li><a href="#">New Balance</a></li> <li><a href="#">Puma</a></li> </ul> <ul> <li><a href="#">Vans</a></li> <li><a href="#">Y3</a></li> <li><a href="#">Reebook</a></li> </ul> </div> 

using

 <script> $(document).ready(function(){ $("#newarrivals-trigger").hover(function(){ $("#dropdown").show(); }, function(){ $("#dropdown").hide(); }); }); </script> 

My issue here is that when I remove my cursor from id="newarrivals-trigger" link the dropdown div disappears instantly.

How to construct this kind of dropdown (Nakedchp)?

I can only seem to find ones where a link displays a row of links under it, like this.

Any ideas, or knowledge of existing menus that could be used? Thank you!

Answer 1

You might be able to do this without the scripts. With CSS, you can manipulate specific elements upon mousehover. I would try creating the menu as a separate element with

.menuDiv{
  display:none;
}

Then, when you hover over the link that you want to trigger, you can activate the menu with

link:hover .menuDiv{
  display:block;
}

You might also want to add

.menuDiv:hover{
  display:block;
}

In order to keep the menu from disappearing when your mouse leaves the link.

Alternatively, using your code, try this out:

$("#newarrivals-trigger").on("mouseenter", function(){

    $("#dropdown").show();

});

$("#dropdown").on("mouseout", function(){

   $("#dropdown").hide();

});  

This handles the mouse hover and mouse exit events separately, which should help solve your problem.

Hope that helps!

Answer 2

If you want to do it with jquery then you can use the belowcode. It shows a snippet of just one part of your menu working.

 $("#BrandsAll").hover(function() { $("#BrandDropdown").toggleClass("show","hide"); }); 

 #BrandDropdown{display:none;} #BrandDropdown.show{display:block;} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <div id="menu"> <ul id="newarrivalsTrigger"> <li>New Arrivals</li> <li id=BrandsAll>Brands <ul id="BrandDropdown"> <li><a href="#">Adidas</a></li> <li><a href="#">Nike</a></li> <li><a href="#">New Balance</a></li> <li><a href="#">Puma</a></li> </ul> </li> <li>Accessories</li> <li>Journal</li> </ul> </div> 

Answer 3

I would probably put the drop-down list inside the <li> of the list title.

<div id="menu">
  <ul>
    <li id="newarrivals-trigger"><a href="url">New Arrivals</a>
      <div id="dropdown" class="hidden">
        <ul>
          <li><a href="#">Adidas</a></li>
          <li><a href="#">Nike</a></li>
          <li><a href="#">New Balance</a></li>
          <li><a href="#">Puma</a></li>
        </ul>
        ...
      </div>
    </li>
    <li><a href="url">Brands</a></li>
    <li><a href="url">Accessories</a></li>
    <li><a href="url">Journal</a></li>
  </ul>
</div>

And have the #dropdown div start out with a class that sets display: none .

.hidden {
  display: none;
}

Then have the hover trigger remove/add the class instead of using show/hide. That way, as long as the mouse stays over the list title or the dropdown list, it's still hovering over the top-level li .

<script>
  $(document).ready(function(){
    $("#newarrivals-trigger").hover(function(){
      $("#dropdown").removeClass("hidden");
    }, function(){
      $("#dropdown").addClass("hidden");
    });
  });
</script>

You'd have to do a little more with the CSS to get the dropdown to be positioned correctly, but I assume you've already got that somewhere.

Answer 4

By default use display none on your dropdown then show it using display:block when menus are hovered

 $('li').on('mouseover', function() { $('ul li div.hover').removeClass('active'); var submenu = $(this).children()[1]; $(submenu).addClass('active'); }); $('ul li div.hover').on('mouseout', function() { $(this).removeClass('active'); }); 

 li{ display: inline-block; } .hover { position: absolute; top: 35px; display: none; } .hover.active{ display: block; } .hover1:hover > .hover { display: block; } .hover2:hover > .hover { display: block; } .hover3:hover > .hover { display: block; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <ul> <li class="hover1"> <a href="">Link</a> <div class="hover">dropdown menu1</div> </li> <li class="hover2"><a href="">Link</a> <div class="hover">dropdown menu2</div> </li> <li class="hover3"> <a href="">Link</a> <div class="hover">dropdown menu3</div> </li> </ul> 

Answer 5

I like my dropdowns to stay open even if they're not being hovered on so I do something that's a little cheeky.

I use buttons and the :focus selector to keep the menu open even if it's not being hovered over. There's of course other ways to do it, but check my jsfiddle for a very unrefined pure css example.

The most important bit I think would be the full (or almost full width). To do that just make sure your dropdown contents thing is inside your navbar and your navbar has a position set, such as "relative". Then your dropdown should have a position of absolute, a top of 100% (or something higher) and a left of 0 (or whatever).

Then make sure nothing between your drowndown or navbar has the position set and you should get a nice full width dropdown.

 .root, body, html{ margin : 0px; padding : 0px; width : 100%; height : 100%; background-color : blue; display : flex; flex-direction : column; } .navbar{ position : relative; height : 60px; width : 100%; background-color : white; display : flex; flex-direction : row; justify-content : center; } .dropdown{ position : absolute; top : 105%; left : 0px; display : none; height : 200px; background-color : white; width : 100%; } .link:focus .dropdown{ display : flex; } 

 <div class="root"> <div class="navbar"> <button class="link"> <div class="text">Dropdown 1</div> <div class="dropdown"> Content 1 </div> </button><button class="link"> <div class="text">Dropdown 2</div> <div class="dropdown"> Content 2 </div> </button><button class="link"> <div class="text">Dropdown 3</div> <div class="dropdown"> Content 3 </div> </button> </div> <div class="content"> Lorem ipsum and other such words </div> </div>