Seeking your kind assistance once again...
I am attempting to design a navigation bar that
- displays the dropdown section upon hovering over the buttons AND
- shows a bottom border on the button that was last hovered over
My code functions properly when I move my mouse
- from menu button --> dropdown area --> outside or
- from menu button --> menu button
However, the issue arises when I move my cursor
- from menu button --> outside (i.e. left or right of the buttons, not below)
In this case, I wish for the border style to disappear but it remains visible.
Below is the code snippet.
$(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 attempted modifying the second last line of jQuery:
if($(this).is(".topnav-dropdown"))
to
if($(this).is("#menu1,#menu2,.topnav-dropdown"))
however, this also eliminates the border when transitioning from the button to the dropdown area..
Your assistance in this matter would be highly appreciated!