Plugin that collapses dropdown menus when the mouse hovers over them, powered by jQuery

My webpage has a simple set of links, and one of them triggers a dropdown menu to appear on mouseover (refer to the image below). The dropdown submenu becomes visible when the link "How fast is it?" is hovered over, and remains fixed in place due to the display property being set to block (check out the CSS code for the dropdown-content). I am aiming for this dropdown submenu to disappear when any of the main links on the page are moused over, including those that are partially hidden by the dropdown. To accomplish this, I believe jQuery would be necessary, but I haven't come across the right plugin yet.

Below you will find the HTML code for the links and the dropdown menu:

<div class="left_links">
<div class="C1"><br><button class="button_01" onmouseover="ShowText(1)">What is It?</button></div>

<div class="C1"><br>
<div class="dropdown">
<button class="button_01" onmouseover="ShowText(5)">How fast is It? </button>
<div class="dropdown-content">
   <div class="C1"><button class="button_dropdown" onclick="ShowText(101)">Sub_Link 01</button></div>
   <div class="C1"><button class="button_dropdown" onclick="ShowText(102)">Sub_Link 02</button></div>
   <div class="C1"><button class="button_dropdown" onclick="ShowText(103)">Sub_Link 03</button></div>
   <div class="C1"><button class="button_dropdown" onclick="ShowText(104)">Sub_Link 04</button></div>
   <div class="C1"><button class="button_dropdown" onclick="ShowText(105)">Sub_Link 05</button></div>
   <div class="C1"><button class="button_dropdown" onclick="ShowText(106)">Sub_Link 06</button></div>
   <div class="C1"><button class="button_dropdown" onclick="ShowText(107)">Sub_Link 07</button></div>
   <div class="C1"><button class="button_dropdown" onclick="ShowText(108)">Sub_Link 08</button></div>
</div>
</div>
</div>

<br><br>
<div class="C1"><br><button class="button_01" onmouseover="ShowText(2)">How does It work?</button></div>
<div class="C1"><br><button class="button_01" onmouseover="ShowText(3)">Pricing</button></div>
<div class="C1"><br><button class="button_01" onmouseover="ShowText(4)">Support</button></div>
<div class="C1"><br><button class="button_01" onmouseover="ShowText(5)">FAQs</button></div>
<div class="C1"><br><button class="button_01" onmouseover="ShowText(6)">Documentation</button></div>
<div class="C1"><br><button class="button_01" onmouseover="ShowText(7)">Terms of Service</button></div>
<div class="C1"><br><button class="button_01" onmouseover="ShowText(8)">Privacy</button></div>
<div class="C1"><br><button class="button_01" onmouseover="ShowText(9)">About Us</button></div>
</div>

And here is the CSS code for the links and the dropdown menu:

.dropdown {
    position: absolute;
    z-index: 100;
    display: inline-block;
    overflow: hidden;
}

.dropdown-content {
    display: block;
    background-color: rgb(105,105,105);
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    border-radius: 15px;
    margin-left: 40px;
    margin-top: 0px;
    font-family: camphorW04-Thin,calibri,arial;
    font-size: 16pt;
    max-height: 30%;
}

.button_dropdown {
    background-color: rgb(105,105,105);
    border: none;
    color: #DBDBDB;
    font-family: camphorW04-Thin,calibri,arial;
    font-size: 12pt;
    text-align: left;
    text-decoration: none;
    cursor: ptr;
}

.button_dropdown:hover {color: white;}

.left_links {
    grid-column: 5 / 20;
    grid-row: 5 / 15;
    text-align: left;
}

.C1{
    color:#DBDBDB;
    font-family: sans-serif;
    font-size: 14pt;
    text-indent: 0px;
    width: auto;
    margin: auto;
}

.button_01 {
    background-color: #555555;
    border: none;
    color: rgb(255,255,255);
    text-align: left;
    text-decoration: none;
    font-size: 12pt;
    cursor: pointer;
}

.button_01:hover { color: white;}

In conclusion, my query is - which jQuery plugin, or alternative CSS/JavaScript approach, can be utilized to hide the dropdown submenu upon hovering over any of the main links? I intend for the menu to remain stationary once displayed until a new hover event occurs.

Thank you for any suggestions on resolving this question. A screenshot can be viewed below.

Answer №1

If you're looking to achieve the desired effect without relying on jQuery, pure CSS is the way to go. However, you will need to make some adjustments to the HTML structure for it to work smoothly. An excellent example can be found on the w3schools website (https://www.w3schools.com/css/tryit.asp?filename=trycss_dropdown_button).

Since I currently have some free time, I took the liberty of fixing your code as well (assuming this is what you were aiming for): https://jsfiddle.net/2w45tk0a/10/

The key change lies in the following snippet:

dropdown:hover .dropdown-content {
  display: block;
}

The concept here is that the dropdown menu becomes visible when a user hovers over elements with the 'dropdown' class. Since the button is nested within an element with this class, the functionality works seamlessly. Once the dropdown is displayed, the same hover behavior applies. Moving the cursor outside the designated area resets the dropdown visibility.

While this may not be the most optimal approach, it gets the job done and offers flexibility for customization according to your preferences.

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

Passing large arrays of data between pages in PHP

I'm facing a challenge where I need to pass large arrays of data between pages. Here's the situation: Users input their Gmail login details in a form, which is then sent to an AJAX page for authentication and contact retrieval. If the login fail ...

Using Javascript with AngularJS to integrate with the Leaflet library for translation

I come across the same kind of statement every time I search the internet or read about leaflet, for example : var map = L.mapbox.map('map', { zoomControl:false }); What does this mean? And how can I incorporate it into Angularjs? P.S. : html ...

"Using jQuery to target parent element of a checkbox and apply

Looking to modify the background color of a label based on whether the checkbox inside is checked or unchecked. Please note: Currently, the label's background changes on the first click, but it does not revert back when unchecking the box. <div c ...

What causes AJAX to sometimes output with incorrect encoding?

After receiving a file from a server using AJAX (Angular), the file, a simple XLSX document, is sent as shown below: ob_start(); $file = \PHPExcel_IOFactory::createWriter($xls, 'Excel2007'); $file->save('php://output'); $respon ...

AngularJS directive for automatically resizing Dygraph on page load

Could someone please assist me with resizing my graph inside tabs using Angular? When I initially load the graphs, they don't display unless I manually resize the window. How can I ensure that the graphs are loaded and fill the div on the first load? ...

Steps for Implementing a "Load More" Button on an HTML JSON Page

I'm currently engaged in a project that involves fetching product information from a JSON file and displaying it on an HTML page using JavaScript. While I've successfully implemented the fetch function, I now want to add a "Load More" function/bu ...

"Enhance Your Website with Custom jQuery Preloaders

Currently, I am facing a challenge while developing a website. Specifically, I am struggling with resolving the issue of a blank page being displayed. The website that I am working on involves functionality where swiping right triggers data insertion into ...

Updating a class within an AngularJS directive: A step-by-step guide

Is there a way to change the class (inside directive) upon clicking the directive element? The current code I have updates scope.myattr in the console but not reflected in the template or view: <test order="A">Test</test> .directive("test", ...

Having trouble establishing a connection to SQL Server with tedious in Node.js

Trying to connect to the SQL Server "SQL.SCHOOL.EDU\STUDENTSQLSERVER,4500" from my school has been a real challenge for me using tedious. I am currently working on setting up a connection between my express back end and react front end. For now, I am ...

demonstrate the distinct elements separately using every technique available

Struggling to display only one element at a time by utilizing the each function. However, unsure of how to associate the matching item with the first item so that when you hover over the first "hoverMe", it shows only the first showMe and so on. Here&apos ...

Issues encountered with registration form that involves JavaScript validation and PHP handling

I encountered an issue with my form validation. Interestingly, the validation works flawlessly when I only run the HTML and JavaScript without the PHP part. However, when I include the PHP along with the HTML and JavaScript, the validation fails. For insta ...

"An error occurs when attempting to clear Rad Grid data with javascript: htmlfile: Invalid argument thrown

Hello, I am currently developing an ASP.NET application. I am facing an issue where I need to clear the data in a Rad grid upon button click using JavaScript. The code snippet that I have attempted for this is as follows: document.getElementById(&a ...

Is there a way to arrange the components of my form so that the questions are positioned on the left side and the choices are displayed on the right

As I am creating a form, my goal is to align the information within it in a way that places the questions on the left side and the options on the right. I have experimented with utilizing IDs, centering them, and adjusting their positioning from left to r ...

Using the CSS property `transform:scale(2,2)` causes an image to suddenly appear in the

Currently utilizing Joomla 3.3, I am seeking to enlarge an image on mouseover. The html code for the image is as follows: <img class="enlarge" style="float: right; margin: 10px; border: 5px solid black;" title="Chapter 1: Physical Differences" src="im ...

What strategies can be employed to maintain reliable datetime management for a reservation system operating in diverse time zones?

Looking at the big picture: An interesting scenario arises when a hotel owner specifies a time frame for booking reservations at a restaurant (5pm - 10pm). Along with this information, there is also a timezone provided to ensure that dates are displayed i ...

Using JSON data with PHP, MySQL, and jQuery

I'm encountering an unusual issue. Whenever I try to access my JSON code with the corresponding numbers [0], [1], etc., I only get the first character of the object. Here's a snippet of my code: test2.php if(isset($_POST['getCustomersArr ...

Issue with VideoJS: MP4 file does not play after dynamically updating video URL

I have been using videoJs to display videos on my website. Below is the HTML code: <video id="player-vjs_html5_api" class="vjs-tech" crossorigin="anonymous" preload="auto" src="http://path-to-video/small.mp4"> <p class="vjs-no-vjs">Your bro ...

Building a straightforward RESTful API for user authentication with Node.js, MongoDB, and Express.js

Can someone provide guidance on creating a RESTful API using Node.js, Express.js, and MongoDB? Specifically, I am looking for assistance with writing the schema for login and sign up pages, as well as comparing data in MongoDB using Node.js Express.js. As ...

Using popsicle with Node.js to handle asynchronous operations and promises

Looking for a way to optimize a function that currently makes a single API call, returning a Promise. How can we modify this code to make multiple API calls for different timestamps? The goal is to store the unaggregated data in an object with the timestam ...

What could be causing the overlap between the button and the div element?

My main wrapper div contains a content div and a button. However, I'm facing an issue where the button is overlapping with the content div instead of appearing below it. The content div is styled with the following CSS: #groupMembers { position: ...