CODEWITHSUNDEEP
javascriptjquery
Brian
Brian

Reputation: 1

Horizontal navbar hovering effects jquery

I would like to create a basic navbar where if you hover over a link, a div is shown (submenu). When I hover over a different link a different div is shown. My current issue is that when I hover over the link and then move over to the submenu it disappears as well(not what I want). How could I avoid that? The submenu should disappear only if I am not hovering over it or the corresponding link for that div.

NOTE: the sub-menu should always start at the beginning of the ul.

<ul class="menu">
    <li><a href="#" id="link0">Caviar</a><span>test</span></li>
    <li><a href="#" id="link1">Athena</a></li>
    <li><a href="#" id="link2">Knot</a></li>
    <li><a href="#" id="link3">Brooke Leaf</a></li>
</ul>

<div id="menulink0" class="sub-menu">Some text for the first link</div>
<div id="menulink1" class="sub-menu">Some text for the second link</div>
<div id="menulink2" class="sub-menu">Some text for the third link</div>
<div id="menulink3" class="sub-menu">Some text for the fourth link</div>

Jquery:

var $submenus = $('.sub-menu');
var $links = $('.menu a, .sub-menu').hover(function(e) {
  e.stopPropagation();
    $submenus.filter('#menu' + this.id).show();
}, function(e) {
  e.stopPropagation();

  $submenus.filter('#menu' + this.id).hide();
});

Sample code: http://jsfiddle.net/6hqd1fa3/31/

Upvotes: 0

Views: 53

Answers (1)

Cobus Kruger
Cobus Kruger

Reputation: 8605

This is one of those cases where I would skip the JavaScript altogether because what you want can be easily achieved with CSS only.

The key to make it work is to structure your HTML so that the <div> is nested within your <li>:

<li><a href="#" id="link0">Caviar</a><span>test</span>
  <div id="menulink0" class="sub-menu">Some text for the first link</div>
</li>

Now, a simple stylesheet can show the <div> whenever you hover over the menu item:

li:hover .sub-menu { 
  display: block;
}

The next question is how you want the submenu displayed. As it stands, the top-level menu will resize to accommodate the submenu. The usual solution is to use relative and absolute positioning. I've added a snippet to show you how that works.

.sub-menu {
  border: solid 2px black;
  background-color: red;
  display: none;
  padding: 20px;
  margin-top: 10px;
  position: absolute;
  left: 0;
  width: 100vw; 
  box-sizing: border-box;
}

nav {
  margin: 0 80px;
}

ul {
  padding: 10px;
  list-style: none;
  display: inline;
}

li {
  padding: 10px;
  float: left;
}

.logo {
  float: left;
  display: inline-block;
  padding-top: 10px;
  padding-right: 40px;
}


/* Add this to make the hover work */

li:hover .sub-menu {
  display: block;
}

a {
  border: solid 1px;
}

.show {
  display: block;
}
<nav>
  <a class="logo" href=""><img src="" alt="">logo</a>
  <ul class="menu">
    <li><a href="#" id="link0">Caviar</a><span>test</span>
      <div id="menulink0" class="sub-menu">Some text for the first link</div>
    </li>
    <li><a href="#" id="link1">Athena</a>
      <div id="menulink1" class="sub-menu">Some text for the second link</div>
    </li>
    <li><a href="#" id="link2">Knot</a>
      <div id="menulink2" class="sub-menu">Some text for the third link</div>
    </li>
    <li><a href="#" id="link3">Brooke Leaf</a>
      <div id="menulink3" class="sub-menu">Some text for the fourth link</div>
    </li>
  </ul>
</nav>

Upvotes: 1

Related Questions