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

Get only the text content from a hyperlink using Tinymce-4

Within tinymce.activeEditor, I currently have this line of innerHTML code (part of a ul-list): <li><a href="#">Important words</a></li> When I place the caret within the sentence "Important words," and click a button with the foll ...

javascripthtmltinymce-4

The jQuery plugin fails to display properly when used in conjunction with AngularJS

Currently, I am working on a tabs application and have implemented an angularJS directive to utilize the jquery tabs plugin. Unfortunately, I am facing issues with the view not updating properly and the tabs not being displayed as expected. Here is a link ...

jqueryangularjsjquery-pluginsangularjs-directiveangular-ui

Issue with BlueImp JQuery Upload: File Queue Not Being Cleared Post Upload

I am currently facing two issues that seem to be related. My situation involves using BlueImp's Upload plugin to upload multiple files to an ASP.NET MVC controller, which then returns the necessary JSON response upon completion. The uploading process ...

jqueryajaxfile-uploaduploadblueimp

Hide/Show overflow causing a disruption in my perspective

I am puzzled as to why my paragraph is not starting on a new line despite the overflow property set on the previous element. Take a look at my plunker, adjust the overflow property in line 11 to hidden and it will display correctly. When set to visible, i ...

htmlcss

Is there a way to create a dynamic associative array using jquery?

I am looking to create an array structured like the following:- arr[0][from] = value arr[0][to] = value arr[1][from] = value arr[1][to] = value . . And so forth. I have input array html elements for the from & to fields. <input type="text" name ...

javascriptjqueryhtmlarrays

Using Flexbox to align content in a column with space between items

Is there a way to move the read more button to the bottom of the card using flexbox in a column layout? The top section, middle paragraph, and see more button are each contained within their own div inside the parent card div. https://i.stack.imgur.com/NG ...

cssflexboxtailwind-css

AutoComplete issues a warning in red when the value assigned to the useState hook it is associated with is altered

const [selectedCountry, setSelectedCountry] = useState(); <Autocomplete autoHighlight={true} //required autoSelect={true} id="geo-select-country" options={availableCountries} value={se ...

javascripthtmlreactjsautocompletematerial-ui

Variety of formatting options for menu items when the menu is in its collapsed state

I am working with a Bootstrap nav-bar that collapses into a button by default. Within my nav-bar, I have opted for images instead of text links. However, when the nav-bar is collapsed, I would like these images to be smaller in size. Is there a way to cu ...

csstwitter-bootstrap

Hover over images for cool effects

Check out the code snippet I created on this link The current functionality enlarges images by 20 percent and overlaps into the table on hover. How can I enlarge both the image and table dimensions simultaneously? Below is the HTML code: <table borde ...

htmlcss

Automatically forward after submitting the form

I am utilizing the Mingle plugin on my Wordpress website to allow users to register and post on a dedicated Mingle Forum. Although the signup process is functioning correctly, I wish to enhance user experience by redirecting them to the forum page after t ...

phphtmlwordpressforms

Angular 2 component stays static despite changes in route parameters

So, I am in need of a way to refresh my component after the URL parameter's id has been altered. The following code is from my player.component.ts: import {Component, OnInit, AfterViewInit} from '@angular/core'; import {ActivatedRoute, Rout ...

javascriptjqueryangularangular2-routing

How to place a div within another div without using absolute positioning

I've been searching for a solution to this issue, but nothing seems to be working. I want the inner div to be positioned at the bottom of the outer div, with a 5px margin separating them. However, using absolute positioning disrupts the width and cent ...

jqueryhtmlcss

Change the element's status from clickable to unclickable, and then back to clickable

I am looking to make a div element non-clickable initially, and then have it become clickable only after another element is clicked. For instance, when the element with class .case is clicked: $('.case').click(function() { $('#patient&ap ...

jquery

Having trouble with AngularJS not rendering on your HTML page?

This question has probably been asked countless times, but I'm genuinely unsure about what I'm doing wrong. The solutions I've come across so far haven't fixed the issue for me. Just to provide some context, I'm currently followin ...

javascripthtmlangularjs

Encountering issues while retrieving information from database through AJAX and PHP

Update: The initial section of this question has been resolved and is now updated with the working code. ~ I'm currently developing a JavaScript application, and I'm encountering challenges with making an AJAX call function properly. While I ha ...

javascriptphpjqueryajaxjson

Ways to extract a specific line of text from HTML code

Can someone help me extract a specific line from an HTML code using Python? For instance, in this website: The snippet of code is as follows: var episodes = [[8,54514],[7,54485],[6,54456],[5,54430],[4,54400],[3,54367],[2,54327],[1,54271]]; I am lookin ...

pythonhtmlweb

Search for a div element in jQuery that has a specific data attribute

Hey there, I'm currently working with the following HTML: <div class="yay" data-pi="23"></div> <div class="yay" data-pi="24"></div> <div class="yay" data-pi="25"></div> <div class="yay" data-pi="26"></div& ...

jquery

What is the best way to ensure my php variable is easily accessed?

Recently, I've been working on implementing a timer and came across the idea in a post on Stack Overflow. <?php if(($_SERVER['REQUEST_METHOD'] === 'POST') && !empty($_POST['username'])) { //secondsDif ...

javascriptphpjqueryhtmlajax

What is the best way to extract this content from the HTML using Selenium Webdriver?

My goal is to extract the text "1532.6788418669355" from this HTML code, but I've been facing challenges in doing so. Here's what I've attempted: IList options = Driver.FindElements(By.XPath(".//span//*")); Options[0].Text = "" There are n ...

htmlseleniumxpathhighcharts

constant element within mat-menu in Angular

This coding snippet displays unread notifications to users: <mat-menu #menu="matMenu"> <div class="menu-item" mat-menu-item *ngFor="let item of notifications"> ...item content </div> <b ...

cssangularangular-material