Hide jQuery dropdown when mouse moves away

I am working on designing a navigation bar with dropdown functionality.

Is there a way to hide the dropdown menu when the mouse pointer leaves both the navbar menu and the dropdown itself? I have tried using hover, mouseenter, and mouseleave but due to my lack of understanding and being new at this, I am facing some issues.

Any assistance or guidance would be greatly appreciated. :)

$(".navbar-menu-each, .submenu-dropdown").hover(function() {
  var menuChoice = $(this).val();
  var menuPosition = $(this).find("a").position();
  var dropdownPosition = menuPosition.left;
  switch(menuChoice) {
    case 0: 
      $(".submenu-dropdown").html("<li class='submenu-dropdown-each'>New Employee Registration</li><li class='submenu-dropdown-each submenu-selected'>Employee List</li><li class='submenu-dropdown-each'>Employee Rehire</li><li class='submenu-dropdown-each'>Employee Without Bank Account</li><li class='submenu-dropdown-each'>Employee Without PPh 21</li>");
      break;
    case 1:
      $(".submenu-dropdown").html("<li class='submenu-dropdown-each'>Memo Template</li><li class='submenu-dropdown-each'>Print Memo</li>");
      break;
    case 2:
      $(".submenu-dropdown").html("<li class='submenu-dropdown-each'>Download & Upload</li><li class='submenu-dropdown-each'>Send Email</li>");
      break;
    case 3:
      $(".submenu-dropdown").html("<li class='submenu-dropdown-each'>Employee Data Approvals</li><li class='submenu-dropdown-each'>Employment Status Undo</li>");
      break;
    case 4:
      $(".submenu-dropdown").html("<li class='submenu-dropdown-each'>Employee Data Report</li><li class='submenu-dropdown-each'>Headcount Report</li><li class='submenu-dropdown-each'>Employee Recapitulation Report</li>");
      break;
  }
  var dropdownWidth = $(".submenu-dropdown").width();
  var rightEdge = $(document).width();
  if ((dropdownPosition + dropdownWidth) >= (rightEdge - 16)) {
    var adjustRight = rightEdge - dropdownWidth - 16;
     $(".submenu-dropdown").css({"left": adjustRight + "px"});
  }
  else {
    if (dropdownPosition <= 16) {
      $(".submenu-dropdown").css({"left": "16px"});
    }
    else {
      $(".submenu-dropdown").css({"left": dropdownPosition + "px"}); 
    }
  }
  $(".submenu-dropdown").show();
});

$(".navbar-menu-each").click(function() {
  $(".navbar-menu-each").removeClass("menu-on");
  $(this).addClass("menu-on");
});
.navbar {
  display: block; 
  width: 100%;
  position: relative;
  margin-bottom: 240px;
}

.navbar-logo-wrapper {
  position: absolute;
  height: 60px;
  width: 100%;
  top: 0;
  left: 0;
  text-align: center;
}

.navbar-logo-wrapper img {
  width: 32px;
  height: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.navbar-top {
  width: 100%;
  min-height: 60px;
  box-shadow: 0px 1px 8px 0 rgba(0,0,0,0.1);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 0 24px;
  box-sizing: border-box;
}

.navbar-top-left {

}

.burger-btn-wrapper {
  display: inline-block;
  text-align: center;
  margin: 0 16px 0 0;
}

.burger-btn-wrapper i {
  font-size: 16px; 
  color: #333;
  line-height: 60px;
  transform: translateY(1px);
}

.module-name {
  height: 60px;
  line-height: 60px;
  text-transform: uppercase;
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  color: #333;
}

.navbar-top-right {

}

.navbar-top-middle {
  height: 60px;
  text-align: center;
  position: relative;
  line-height: 0;
}

.modules-icon {
  vertical-align: middle;
  display: inline-block;
  width: 60px;
  text-align: center;
}

.modules-icon i {
  font-size: 16px; 
  color: #333;
  line-height: 60px;
}

.navbar-profile {
  display: inline-block;
  vertical-align: middle;
  line-height: 0;
}
.navbar-profile img {
    vertical-align: top;
}
.profpic-wrapper {
  display: inline-block;
  vertical-align: middle;
  width: 60px;
  height: 60px;
}

.navbar-profpic {
  width: 40px;
  height: 40px;
  background-color: #00c983;
  border-radius: 40px;
  position: relative;
  margin-left: 10px;
  margin-top: 10px;
}

.profile-initial {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
}

.profile-name {
  display: inline-block;
  vertical-align: middle;
  font-size: 13px;
}

.profile-dropdown {
  vertical-align: middle;
  display: inline-block; 
  margin-left: 8px;
}

.navbar-wrapper {
  display: inline-block;
  width: 100%;
}

.navbar-top-middle img {
  height: 32px; 
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.navbar-menu {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
}

.navbar-menu-list {
  width: 750px;
  list-style-type: none;
  margin: 0;
  padding: 15px 0;
  cursor: pointer;
  
  margin-left: 0;
}

.navbar-menu-each {
  padding-left: 32px;
  padding-right: 32px;
  
  display: inline-block;
}

.navbar-menu-each:first-child {
  padding-left: 24px; 
}

.navbar-menu-each a {
  color: #333;
  font-size: 13px;
  text-decoration: none;
}

.menu-on a {
  font-weight: 700;
  color: #00c983;
}

.navbar-page-name {
  display: block;
  font-size: 22px;
  height: 60px;
  line-height: 60px;
  border-top: solid 0.5px #DEF5ED;
  border-bottom: solid 0.5px #DEF5ED;
  background-color: #F0FBF7;
  color: #333;
  padding-left: 24px;
}

.navbar-menu::-webkit-scrollbar {
  height: 0;
}

.navbar-menu::-webkit-scrollbar-thumb {
  background-color: transparent;
}

.submenu-dropdown {
  background-color: #fff; 
  box-shadow: 0px 3px 6px 0 rgba(0,0,0,0.15);
  position: absolute;
  cursor: pointer;
  top: 106px;
}

.submenu-dropdown-each {
  display: block;
  line-height: 48px;
  font-size: 13px;
  color: #333;
  width: auto;
  padding: 0 32px 0 24px;
}

.submenu-dropdown-each:hover {
  background: #f8f8f8; 
}

.submenu-selected {
  font-weight: 700;
  color: #00c983;
}

@media (max-width: 575px) {
  .module-name {
    display: none; 
  }
  
  .profile-name {
    display: none; 
  }
  
  .modules-icon {
    display: none; 
  }
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.11/css/all.css" integrity="sha384-p2jx59pefphTFIpeqCcISO9MdVfIm4pNnsL08A6v5vaQc4owkQqxMV8kg4Yvhaw/" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i" rel="stylesheet">

<div class="navbar">
  <div class="navbar-logo-wrapper">
    <img class="navbar-tree" src="https://cdn.frontify.com/api/screen/thumbnail/7UV_lfX5OBfHxFn5lc3ygK8UTU3z5pivwY9QDSDIOiFemj-DdmDzmwiPvbibaG63IMXz-MmGOs4aH-UqgoT9gw/350">
  </div>
  <div class="navbar-top">
    <div class="navbar-top-left">
      <div class="burger-btn-wrapper">
        <i class="fas fa-bars"></i>
      </div>
      <div class="module-name">Employee</div>
    </div>
    <div class="navbar-top-right">
      <div class="modules-icon"><i class="fas fa-th"></i></div>
      <div class="navbar-profile">
        <div class="profpic-wrapper">
          <div class="navbar-profpic">
            <div class="profile-initial">DJ</div>
          </div>
        </div>
        <div class="profile-name">Dennis Jonathan</div>
        <div class="profile-dropdown"><i class="fas fa-chevron-down"></i></div>
      </div>
    </div>
  </div>
  <div class="navbar-menu">
    <ul class="navbar-menu-list">
      <li class="navbar-menu-each menu-on" value=0><a href="#">Employee Directory</a></li>
      <li class="navbar-menu-each" value=1><a href="#">Memo</a></li>
      <li class="navbar-menu-each" value=2><a href="#">Bulk Update</a></li>
      <li class="navbar-menu-each" value=3><a href="#">Approvals and Undo</a></li>
      <li class="navbar-menu-each" value=4><a href="#">Report</a></li>
    </ul>
  </div>
  <div class="navbar-page-name">
    Employee List
  </div>
</div>
<ul class="submenu-dropdown">
  
</ul>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

javascriptjqueryhtmlcss

Answer №1

It appears to me that you are making a simple process more complex than it needs to be.

Hover functionality can be easily implemented using CSS alone.

.navbar-menu-list {
  width: 750px;
  list-style-type: none;
  margin: 0;
  padding: 15px 0;
  cursor: pointer;
  margin-left: 0;
}

.navbar-menu-each {
  padding-left: 32px;
  padding-right: 32px;
  display: inline-block;
  position:relative;
}

.navbar-menu-each a {
  color: #333;
  font-size: 13px;
  text-decoration: none;
}

.navbar-menu-each:hover a {
  font-weight: 700;
  color: #00c983;
}

.navbar-page-name {
  display: block;
  font-size: 22px;
  height: 60px;
  line-height: 60px;
  border-top: solid 0.5px #DEF5ED;
  border-bottom: solid 0.5px #DEF5ED;
  background-color: #F0FBF7;
  color: #333;
  padding-left: 24px;
}

.submenu-dropdown {
  display: none;
  background-color: #fff;
  box-shadow: 0px 3px 6px 0 rgba(0, 0, 0, 0.15);
  position: absolute;
  cursor: pointer;
  top: 20px;
  left:0;
}

.navbar-menu-each:hover > .submenu-dropdown,
.submenu-dropdown:hover{
  display: block;
}

.submenu-dropdown-each {
  display: block;
  line-height: 48px;
  font-size: 13px;
  color: #333;
  width: auto;
  padding: 0 32px 0 24px;
}

.submenu-dropdown-each:hover {
  background: #f8f8f8;
}

.submenu-selected {
  font-weight: 700;
  color: #00c983;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.11/css/all.css" integrity="sha384-p2jx59pefphTFIpeqCcISO9MdVfIm4pNnsL08A6v5vaQc4owkQqxMV8kg4Yvhaw/" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i" rel="stylesheet">

<div class="navbar-menu">
  <ul class="navbar-menu-list">
    <li class="navbar-menu-each">
      <a href="#">Employee Directory</a>
      <ul class="submenu-dropdown">
        <li class='submenu-dropdown-each'>New Employee Registration</li>
        <li class='submenu-dropdown-each submenu-selected'>Employee List</li>
        <li class='submenu-dropdown-each'>Employee Rehire</li>
        <li class='submenu-dropdown-each'>Employee Without Bank Account</li>
        <li class='submenu-dropdown-each'>Employee Without PPh 21</li>
      </ul>
    </li>
    <li class="navbar-menu-each">
      <a href="#">Memo</a>
      <ul class="submenu-dropdown">
        <li class='submenu-dropdown-each'>Memo Template</li>
        <li class='submenu-dropdown-each'>Print Memo</li>
      </ul>
    </li>
    <li class="navbar-menu-each"><a href="#">Bulk Update</a>
      <ul class="submenu-dropdown">
        <li class='submenu-dropdown-each'>Download & Upload</li>
        <li class='submenu-dropdown-each'>Send Email</li>
      </ul>
    </li>
    <li class="navbar-menu-each">
      <a href="#">Approvals and Undo</a>
      <ul class="submenu-dropdown">
        <li class='submenu-dropdown-each'>Employee Data Approvals</li>
        <li class='submenu-dropdown-each'>Employment Status Undo</li>
      </ul>
    </li>
    <li class="navbar-menu-each">
      <a href="#">Report</a>
      <ul class="submenu-dropdown">
        <li class='submenu-dropdown-each'>Employee Data Report</li>
        <li class='submenu-dropdown-each'>Headcount Report</li>
        <li class='submenu-dropdown-each'>Employee Recapitulation Report</li>
      </ul>
    </li>
  </ul>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issue: "StoreController Undefined" error in Python Flask + Angular application

In the python flask application that I have built with Angular JS for the front end, there are three main files. app.py import json import flask import numpy as np app = flask.Flask(__name__) @app.route("/") def index(): ...

javascriptpythonangularjsflask

This error message occurs when trying to access JSON keys from an object with an invalid operand in the 'in' operation

Check out the fiddle I created here: http://jsfiddle.net/kc11/h6nh1gvw/2/ I'm attempting to extract keys from a JSON string using this code: var keys = $.map(a, function(element,key) { return key; }); . But unfortunately, I keep encountering the er ...

javascriptjson

Obtain the URL value using jQuery and place it inside a <span> element

How can I insert a href value into the span tag like this? <p class="name"> <a download="adja-lo.pdf" title="adja-lo.pdf" href="http://localhost/MatrixDRSnews/apps/Matrix/server/php/files/adja-lo.pdf">adja-lo.pdf</a> </p> ...

javascriptjqueryhtmlhref

Ajax function implemented successfully with stylish design

Hi there! :) I'm encountering an issue with my code. I am trying to create a dropdown filter using ajax, php, and json. The first dropdown menu (for selecting the build year of a car) is populated through php. The second dropdown menu allows users to ...

jquerycssajax

Issue with displaying ChartJS on Django HTML page

I am attempting to create a horizontal bar chart in HTML, but unfortunately, it is not displaying correctly. I have sent 2 variables from views.py, which are {{top5StockCode}} and {{top5TotalSales}}. The values of {{top5StockCode}} that were sent from vi ...

pythonhtmldjangochart.js

CSS Navigation Menu - Submenu displaying above main link

<div id="header"> <div class="cont"> <div id="banner"> <div id="nav"> <ul> <li><a href="index.htm">home</a></li> <li><a href="work.html">Works»</a> <ul> ...

htmlcss

What is the best way to create several sets of a numerical field and a checkbox? (checkbox will deactivate a specific number field)

I'm having an issue with generating multiple pairs of a number field and a checkbox. When I click the checkbox, it should disable the number field. However, only the first pair seems to be working. Can anyone lend a hand? Here's the code snippe ...

javascriptphpjqueryangularjs

Adjusting the display of HTML elements depending on geolocation authorization

I am currently facing an issue with my HTML code where I want to show an element only if the user declines to share their location with the browser. However, my code is not functioning as expected when the user rejects the location request. On the other ha ...

javascripthtmlcss

Trouble with margins on tr elements and borders in CSS and HTML

Here are my current findings: http://jsfiddle.net/62hKs/2/ What I desire to achieve: 1) Create a 15px margin between the two red boxes displayed 2) Modify the appearance of the 4 boxes so they resemble only 2, by eliminating the middle red line caused ...

htmlcss

A Step-by-Step Guide to Setting Up and Utilizing V-Calendar in Vue.js

I am currently trying to incorporate the V-Calendar library into my Vuetify application. Up until now, the app was working fine, but I seem to have hit a roadblock with the correct installation of the V-Calendar library. Although no error messages are bei ...

javascriptvue.jsnpmvuejs2vuetify.js

Performing an XMLHttpRequest to Submit an HTML Form

Our Current HTML Form Setup This is an example of the HTML form we are currently using. <form id="demo-form" action="post-handler.php" method="POST"> <input type="text" name="name" value=" ...

javascriptajaxxmlhttprequestformshttp-post

Using jQuery to create a blinking effect on a specific letter in a string

I'm looking to create a text adventure using Canvas, and I want the parser to blink continuously, similar to the one in a Dos Console. The parser is stored as a global variable. How can I use jQuery to permanently change the character of this global v ...

javascriptjquerycanvas

Which option's value was recently removed from the fetch command?

I created a function to handle duplicate selections in a select element. It is functioning properly, but I noticed that when I remove an option from the select, my array remains unchanged. If I remove an option, I want my code to detect the value of that ...

javascriptjqueryarraysjquery-chosen

tips for effectively utilizing getters in array sorting operations

I've been encountering some issues with vuex getters. My objective is to arrange the cart data, which consists of an array of objects, by date using the getter named myCartItems. The problem I'm facing is that when I add a second payload {prod_ ...

javascriptvue.jsvuex

Looking for a script that automatically swaps out a div at set intervals? You'll need to tweak it so that it only

I created a js script that dynamically changes the content of certain div elements at specified intervals. While I appreciate how it functions, I now need to modify it so that the script only executes once. Can someone help me achieve this? <script typ ...

javascript

Avoiding interference with adjacent elements caused by long content in a div

Hey there, I could really use some help with my CSS layout, I'm pretty new to CSS and Flexbox and I'm trying to create a simple layout. The issue I'm running into is how to stop long content inside a pre tag from pushing other divs. Here& ...

htmlcssflexbox

Tips for updating div content when using dynamic content with EJS

I have created a blog using EJS and Node.js where the post content is stored in MongoDB as strings with HTML tags. However, when rendering the posts on the frontend, my current solution is replacing all div elements with the class of "blog_content" with th ...

jquerynode.jsmongodbwysiwygejs

Learning how to utilize getDerivedStateFromProps over componentWillReceiveProps in React

To address a deprecated error, I am looking to update my code from using componentWillReceiveProps to getDerivedStateFromProps. The component is being passed a date prop, and whenever this date changes, the getList function needs to be run with the new dat ...

javascriptreactjsreact-nativegetderivedstatefrompropscomponentwillreceiveprops

How can I adjust the brightness, contrast, saturation, and hue in HTML5?

Is there a way to adjust the brightness without turning the image grey? I've been attempting to do so, but only managed to change it to greyscale. My objective is to increase and decrease the brightness of the image. Here is the current code: HTML ...

javascriptcsshtmlcanvas

Tips for turning off hash-based redirection in AngularJS

Here is a specific URL: http://www.something.com/sometest/test/#registration Some code has been written based on #registration for Internet Explorer. However, when using AngularJS, it redirects to the following URL, which disrupts the logic: http://www ...

javascriptjqueryangularjsangular-ui-router