CODEWITHSUNDEEP
javascripthtmljquery
Benjk
Benjk

Reputation: 57

dropdown menu not opening and closing correctly

I have gotten it to open and close when hovering over the nav link but how do I keep it open so I can access the content on the menu? I need it to work exactly how a dropdown menu works.

This is what I have done so far I also need the html layout to stay the same.

$('.nav-link--dropdown').mouseover(function() {
  $('.dropdown-menu').css('display', 'block');
});

$('.nav-link--dropdown').mouseleave(function() {
  $('.dropdown-menu').css('display', 'none');
});
ul {
  list-style: none;
  padding: 0px;
  display: flex;
}

li {
  margin-right: 10px;
}

.dropdown-menu {
  display: none;
}

.dropdown-menu ul {
  display: block;
  background-color: grey;
  color: white;
  padding: 10px;
  text-align: center;
  width: 200px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="nav">
  <ul>
    <li class="nav-link">home</li>
    <li class="nav-link--dropdown">dropdown</li>
  </ul>
</div>
<div class="dropdown-menu">
  <ul>
    <li class="dropdown-menu__link">random text</li>
    <li class="dropdown-menu__link">random text</li>
    <li class="dropdown-menu__link">random text</li>
  </ul>
</div>

View on jsFiddle

Upvotes: 0

Views: 65

Answers (4)

lakshitha madushan
lakshitha madushan

Reputation: 669

Should remove margin use padding for that, if not when we enter that margin area mouse leave event will trigger.

enter image description here

$('.nav-link--dropdown').mouseover(function () {
    $('.dropdown-menu').css('display', 'block');
});

$('.dropdown-menu').mouseover(function () {
    $('.dropdown-menu').css('display', 'block');
});

$('.nav-link--dropdown').mouseleave(function () {
    $('.dropdown-menu').css('display', 'none');
});

$('.dropdown-menu').mouseleave(function () {
    $('.dropdown-menu').css('display', 'none');
});
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

ul {
  list-style: none;
  padding: 0px;
  display: flex;
}

li {
  padding: 10px;
}

.dropdown-menu {
  display: none;
}

.dropdown-menu ul {
  display: block;
  background-color: grey;
  color: white;
  padding: 10px;
  text-align: center;
  width: 200px;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<div class="nav">
    <ul>
        <li class="nav-link">home</li>
        <li class="nav-link--dropdown">dropdown</li>
    </ul>
</div>
<div class="dropdown-menu">
    <ul>
        <li class="dropdown-menu__link">random text</li>
        <li class="dropdown-menu__link">random text</li>
        <li class="dropdown-menu__link">random text</li>
    </ul>
</div>

Upvotes: 1

JScoobyCed
JScoobyCed

Reputation: 10413

Since your problem is the mouseleave event will trigger when you try to move the mouse to the bellow dropdown menu, if you really must keep the elements separated, add the dropdown-menu to the class that keeps the display:block

$('.nav-link--dropdown, .dropdown-menu').mouseover(function () {
  $('.dropdown-menu').css('display', 'block');
});

$('.nav-link--dropdown, .dropdown-menu').mouseleave(function () {
  $('.dropdown-menu').css('display', 'none');
});

And remove margin/padding from menu items. Use line-height instead if you want some spacing:

.nav ul li {
  line-height: 40px;
}

ul {
  list-style: none;
  margin: 0;  // <--- I changed this from padding: 0px;
  display: flex;
}

Otherwise the other suggested solutions to include the dropdown within you parent <ul> element is the best.

JSFiddle

Upvotes: 0

down
down

Reputation: 76

You can achieve this by bundling the menu item you want to hover over and it's dropdown in the same div.

<div class="nav">
  <ul>
    <li class="nav-link">home</li>
    <div class="innerNav">
        <li class="nav-link--dropdown">dropdown</li>
        <div class="dropdown-menu">
            <ul>
              <li class="dropdown-menu__link">random text</li>
              <li class="dropdown-menu__link">random text</li>
              <li class="dropdown-menu__link">random text</li>
            </ul>
         </div>
     </div>
  </ul>
</div>

And:

$('.innerNav').mouseover(function () {
    $('.dropdown-menu').css('display', 'block');
});

$('.innerNav').mouseleave(function () {
    $('.dropdown-menu').css('display', 'none');
});

See this JSFiddle: https://jsfiddle.net/rmdfqh6c/

Upvotes: 0

Johannes Stadler
Johannes Stadler

Reputation: 787

The problem you have here is that you leave the nav-link--dropdown when you move to your dropdown-menu. The simple solution: Include your dropdown-menu in your nav item.

$('.nav-link--dropdown').mouseover(function() {
  $('.dropdown-menu').css('display', 'block');
});

$('.nav-link--dropdown').mouseleave(function() {
  $('.dropdown-menu').css('display', 'none');
});
ul {
  list-style: none;
  padding: 0px;
  display: flex;
}

li {
  margin-right: 10px;
}

.dropdown-menu {
  display: none;
}

.dropdown-menu ul {
  display: block;
  background-color: grey;
  color: white;
  padding: 10px;
  text-align: center;
  width: 200px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="nav">
  <ul>
    <li class="nav-link">home</li>
    <li class="nav-link--dropdown">
     dropdown
      <div class="dropdown-menu">
        <ul>
          <li class="dropdown-menu__link">random text</li>
          <li class="dropdown-menu__link">random text</li>
          <li class="dropdown-menu__link">random text</li>
        </ul>
      </div>
    </li>
  </ul>
</div>

Upvotes: 0

Related Questions