CODEWITHSUNDEEP
htmljquerycss
stedy
stedy

Reputation: 263

jQuery: Dynamic CSS on the drop-down menu button itself

looking for your gracious help again...

I'm trying to create a navbar that

My code works fine when I move my cursor

But the problem is when I move my cursor

I want the border style to disappear in the above case but it sticks there.

Here is my code.

$(document).ready(function(){
  var count = 0;
  $("#menu1,#menu2,.topnav-dropdown").mouseenter(function(){
    count++;
    $(".topnav-dropdown").css({"height": "6em","transition-duration":"0.1s"});
    if($(this).is("#menu1,#menu2")){
      $(".menuitem").children().css({"border-bottom":"none"});
      $(this).children().css({"border-bottom":"0.2em solid #111"});
    }
  })
  $("#menu1,#menu2,.topnav-dropdown").mouseleave(function(){
    count--;
    if (!count){
      $(".topnav-dropdown").css({"height": "0","transition-duration":"0.2s"});
      if($(this).is(".topnav-dropdown")){
        $(".menuitem").children().css({"border-bottom":"none"});
      }
    }
  });
});
* {
  box-sizing: border-box;
  margin: 0;
  font-size: 100%;
}

.clearfix {
  clear: both;
}

.top-section {
  height: 2em;
}

.topnav {
  width: 70%;
  margin: auto;
}

.menuitem {
  float:left;
  margin: -0.1em;
  height: 3em;
  display: flex;
  align-items: center;
  overflow:hidden;
  padding-top: 1em;
}

.menuitem-a {
  font-size: 1em;
  margin: 0 1em 0;
  text-decoration: none;
  color: black;
  height: 100%;
}

.menuitem-a:visited {
  color: black;
}

.topnav-dropdown {
  position: absolute;
  top: 2.9em;
  width: 100%;
  background-color: #333;
  z-index: 1;
  height: 0;
}
<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
  <div class="top-section">
    <div class="topnav">
      <div id="menu1" class="menuitem">
        <a class="menuitem-a" href="#">Menu1</a>
      </div>
      <div id="menu2" class="menuitem">
        <a class="menuitem-a" href="#">Menu2</a>
      </div>
    </div>
    <div class="clearfix"></div>
    <div class="topnav-dropdown">
    </div>
  </div>
</body>
</html>

I tried changing the second last line of jQuery:

if($(this).is(".topnav-dropdown"))

to

if($(this).is("#menu1,#menu2,.topnav-dropdown"))

but this also removes the border when I move my cursor from the button to the dropdown area..

Any help will be greatly appreciated!

Upvotes: 0

Views: 67

Answers (1)

wazz
wazz

Reputation: 5078

Harder than it sounds. I think I covered all the bases.

$(document).ready(function() {

  $("#menu1").mouseenter(function() {
    $("#menu2").children().css({
      "border-bottom": "none"
    });
    $(this).children().css({
      "border-bottom": "0.2em solid #111"
    });
    $(".topnav-dropdown").css({
      "height": "6em",
      "transition-duration": "0.1s"
    });
  });

  $("#menu2").mouseenter(function() {
    $("#menu1").children().css({
      "border-bottom": "none"
    });
    $(this).children().css({
      "border-bottom": "0.2em solid #111"
    });
    $(".topnav-dropdown").css({
      "height": "6em",
      "transition-duration": "0.1s"
    });
  });

  $("#menu1, #menu2").mouseleave(function() {
    if (!$(".topnav-dropdown").is(":hover")) {
      $(".menuitem").children().css({
        "border-bottom": "none"
      });
      $(".topnav-dropdown").css({
        "height": "0",
        "transition-duration": "0.2s"
      });
    }
  });

  $(".topnav-dropdown").mouseleave(function() {
    $(".menuitem").children().css({
      "border-bottom": "none"
    });
    $(this).css({
      "height": "0",
      "transition-duration": "0.2s"
    });
  });

});
* {
  box-sizing: border-box;
  margin: 0;
  font-size: 100%;
}

.clearfix {
  clear: both;
}

.top-section {
  height: 2em;
}

.topnav {
  width: 70%;
  margin: auto;
}

.menuitem {
  float: left;
  margin: -0.1em;
  height: 3em;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding-top: 1em;
}

.menuitem-a {
  font-size: 1em;
  margin: 0 1em 0;
  text-decoration: none;
  color: black;
  height: 100%;
}

.menuitem-a:visited {
  color: black;
}

.topnav-dropdown {
  position: absolute;
  top: 2.9em;
  width: 100%;
  background-color: #333;
  z-index: 1;
  height: 0;
}
<!DOCTYPE html>
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
  <input type="hidden" id="hid">
  <div class="top-section">
    <div class="topnav">
      <div id="menu1" class="menuitem">
        <a class="menuitem-a" href="#">Menu1</a>
      </div>
      <div id="menu2" class="menuitem">
        <a class="menuitem-a" href="#">Menu2</a>
      </div>
    </div>
    <div class="clearfix"></div>
    <div class="topnav-dropdown">
    </div>
  </div>
</body>

</html>

Upvotes: 1

Related Questions