Hover your mouse over the menu to activate a timeout feature

Having an issue with my multi-level menu - when I hover over a main menu item, the sub-menu items are supposed to display. However, if I move the mouse too quickly from the main item to the sub-item and it goes off the path, the sub-menu disappears and I have to hover again to show it.

I've searched online and found several guides, such as one on StackOverflow: http://stackoverflow.com/questions/2316213/simple-jquery-dropdown-cleartimeout-settimeout-issues

However, using this guide causes an issue where if I hover quickly among main menu items, the next sub-menu item will display, but the previous one remains visible due to the timeout setting.

Any suggestions on how to handle this more effectively? Any hints or help would be greatly appreciated!

You can view my code at: http://jsfiddle.net/v4aWZ/9/

Thank you for any assistance you can provide.

jqueryhtmlcssmenu

Answer №1

Consider implementing HoverIntent to minimize accidental hover interactions.

Answer №2

Presenting: a straightforward script

This snippet showcases an example of HTML code. The main idea is to incorporate the JavaScript (along with jQuery) and specify in your CSS file that each li:hover element should have a property li.hover as shown below:

#nav li:hover, #nav li.hover {
    /* your css */
}


/* timeout on hover: big menu */ var hoverTimeout; //declare timeout $('#nav li').hover(function() { //mouse enter clearTimeout(hoverTimeout); //remove timeout, we're taking over control
$('#nav li').removeClass('hover'); //clear all that are hovered $(this).parents('li').addClass('hover'); //add class to all our parents
},function() { //mouse leave
var $this=$(this); //create local copy hoverTimeout = setTimeout(function() {
$this.parents('li').removeClass('hover'); //un-hover all parents },1000); //1 second after we remove our mouse });
@charset "UTF-8";
body { background: #aaa;
} nav { display: table-row; padding: 0; margin: 0; border: 0; } nav a { display: block; line-height: 1em; text-decoration: none; } #nav, nav li { list-style: none; margin: 0; padding: 0; } #nav { position: relative; z-index: 597; *display: inline-block; padding-left: .75rem; display: table-cell; width: 99%; } #nav li { float: left; min-height: 1px; vertical-align: middle; } #nav li.hover, #nav li:hover { position: relative; z-index: 599; cursor: default; } #nav ul { visibility: hidden; position: absolute; top: 100%; left: 0; z-index: 598; width: 100%; bottom: 0; left...
… 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <nav> <ul id="nav">

<li class="hassubmenu"> <a href="link">Menu-item</a>

<ul> <li class="hassubmenu"> <a href="link">Sub-menu-item</a>

<ul> <li> <a href="link">Sub-sub-menu-item</a> </li>

<li> <a href="link">Sub-sub-menu-item</a> </li>

…

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

Could there be an issue with my website's bootstrap where badges are not being applied properly?

Currently, I am in the process of learning ReactJS and running into an issue where my bootstrap is not working within my .jsx file. Despite following a tutorial (MOSH) diligently and extensively researching on stack overflow, I have not been able to find a ...

javascriptcssreactjs

Sending JSON data through an AJAX post request will not work

After struggling for hours trying to debug this issue on my own, I've come to the point of seeking assistance. I need to send a substantial amount of data to an ashx handler and here's how it looks: var value = [{"start":["3,0"],"block":["0,0", ...

jqueryajaxjsonashx

Exploring Font-Awesome 5: Using CSS Pseudo-elements to Mirror or Rotate Icons

I am utilizing CSS pseudo elements to display icons (jsfiddle) body { font-family: Arial; font-size: 13px; } a { text-decoration: none; color: #515151; } a:before { font-family: "Font Awesome 5 Free"; content: "\f07a"; di ...

cssfont-awesomefont-awesome-5

Creating an overlay with CSS hover on a separate element and the ::before pseudo class

Issue: I am struggling to display the overlay when hovering over the circle element, rather than just the image itself. I have attempted to achieve this using CSS, but can't seem to make it work as intended. Any guidance and examples using JavaScript ...

javascriptjqueryhtmlcss

"Having trouble with a non-functioning button in PHP and jQuery AJAX after an extensive

In my PHP code, I have implemented a feature to remove certain items from a database. This functionality includes a search mechanism that hides the existing table and displays search results when a user performs a search. The issue I'm facing is relat ...

phpjquerymysqlajax

jQuery hover once the DOM has been updated

Here's my approach to utilizing jQuery hover: hover( handlerIn(eventObject), handlerOut(eventObject) ) $(".box").each(function() { var $this = $(this); $this.data('baseColor', $this.css('background-color')); $thi ...

jqueryjquery-hover

utilize text offsets to insert tags within strings

I've been facing challenges with using JavaScript string methods and regular expressions. It seems like I might be missing something obvious here. Please forgive me if I'm repeating the question asked by tofutim in more detail, which can be found ...

javascriptjqueryregextextoffset

Align the content evenly on several cards using Material-UI

Trying to work on some frontend coding, but struggling with getting the content justified properly in fixed-height MUI cards. Each card consists of a title, description, divider, and author, but I can't seem to get everything aligned correctly within ...

cssreactjsmaterial-ui

Showcase three elements next to each other on the same row (Photo Gallery, Description, and Contact Form)

I am attempting to showcase three divs in a single line while working on a Subtheme for the Drupal 8 Bootstrap Theme. These particular divs are fields nested within a view known as viewproducts. The divs include: Juicebox Photo Gallery; ...

csswebformsbootstrap-4drupal-8drupal-views

Assigning active classes based on the href attributes of child <a> tags

I've created a navigation structure as follows: <ul class="page-sidebar-menu"> <li class="menu"> <a href=""> <span class="title">Menu Item</span> <span class="arrow"></span> < ...

javascriptjquerycss

Interact with Anchor Tags Created Dynamically Using jQuery

i am populating my repeater with database values and anchor tags using the code snippet below <asp:Repeater ID="Repeater1" runat="server"> <ItemTemplate> <a href='#Roles' id='<%# DataBinder.Eval(Container.DataI ...

jquerydynamicanchor

Attempting to create a dynamic grid layout utilizing CSS to ensure optimal responsiveness

I am working on creating a webpage layout similar to the one in the link below: The maximum width for the layout is set to 1600px. However, I am facing challenges in making it fully responsive. This is because all the boxes are given widths in percentages ...

htmlcss

Step-by-step guide on how to load an Ext JS tab after clicking on it

I have an Ext JS code block that creates 4 tabs with Javascript: var tabs; $(document).ready( function() { fullscreen: true, renderTo: 'tabs1', width:900, activeTab: 0, frame:true, ...

javascriptjqueryextjs

What is the best way to transition an absolute positioned element from right to center?

When hovering over an overlay element, I want the <h3> tag to appear with a transition effect from right to center, similar to the example shown here. Could someone please assist me in achieving this? Thank you in advance. HTML <div class="row m ...

javascriptjquerycss

What is the best way to create a new row at a specific index in an ng-repeat loop?

My Goal: I am aiming to insert a new row of ul after every 2 elements in my ng-repeat loop. For example: <ul class="col-sm-2"> <li><p>Automobile & Motorcycle</p></li> ...

javascripthtmlangularjs

"Dynamic navigation bar that remains in place even while scrolling past Adsense advertisements

Looking to implement a sticky menu for my blog using jQuery. The menu is functioning as desired, however, the issue arises when I scroll down on a page that contains adsense - the menu ends up going under the ad. What could be causing this problem? Below ...

jqueryhtmlcss

What's the best way to position a child fixed DIV in relation to a parent fixed div?

Here is the HTML snippet I am working with: <div class="parent"> <div class="child"></div> </div> The corresponding CSS styles are as follows: .parent { position: fixed; } .child { position: fixed; left: ...

htmlcssbootstrap-4

Impact on adjacent div

Within my code, I have two sibling divs that contain additional nested divs as shown below: <div class="btn_lists"> <div class="btn green_btn"> <img src="<?= asset_url() ?>images/escolar_07__1.png" /> </div> & ...

htmlcss

Java Script Custom Print Preview: A unique way to showcase your content

Is there a way to create a custom print preview dialog similar to the browser's print preview using Java Script? I am working on a book reader application that requires customization of the print preview dialog for page counting, automatic pagination, ...

javascripthtml

Filter out the selection choice that begins with 'aa' in the drop-down menu

Here is a select field with various options: <select id="sel"> <option value="1">aadkdo</option> <option value="2">sdsdf</option> <option value="3">aasdfsddkdo</option> <option value="4"> ...

javascriptjqueryhtml