Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jquery menu hovering

i have a menu that when i mouse over a div it will show and on mouse out it will fade out. the problem is that if you roll over any of the menu's children the menu will disappear(because technically if you're over one of the children then you're not over the parent) is there a way so that rolling over the children will not count as a mouseout? here is my code: http://jsfiddle.net/32bLg/

like image 650
zero Avatar asked Feb 07 '12 22:02

zero


People also ask

How do I make a drop-down menu go over content?

Example Explained. HTML) Use any element to open the dropdown content, e.g. a <span>, or a <button> element. Use a container element (like <div>) to create the dropdown content and add whatever you want inside of it. Wrap a <div> element around the elements to position the dropdown content correctly with CSS.

How do I make a drop-down menu clickable in HTML?

Use any element to open the dropdown menu, e.g. a <button>, <a> or <p> element. Use a container element (like <div>) to create the dropdown menu and add the dropdown links inside it. Wrap a <div> element around the button and the <div> to position the dropdown menu correctly with CSS.

What is hover function?

The hover() method specifies two functions to run when the mouse pointer hovers over the selected elements. This method triggers both the mouseenter and mouseleave events. Note: If only one function is specified, it will be run for both the mouseenter and mouseleave events.

How do I get a dropdown value?

The value of the selected element can be found by using the value property on the selected element that defines the list. This property returns a string representing the value attribute of the <option> element in the list. If no option is selected then nothing will be returned.


2 Answers

This is a very simple problem most people tend to massively overcomplicate with timers and special case checks. The easy solution is via markup. Place both hover target and the menu under the same parent, and track hover on the parent. Like this. You may also want to use hoverIntent jQuery plugin to avoid false hover events.

A UX note: fade animations lasting over 500ms are just rude. Please don't do that.

like image 86
Ilia G Avatar answered Sep 18 '22 14:09

Ilia G


Here's a simple solution: http://jsfiddle.net/32bLg/16/

like image 31
Sal Avatar answered Sep 22 '22 14:09

Sal