I have a dropdown menu, which the sub-menu placed on different element. So basically when the mouse leave the menu item, the sub-menu get closed immediately because the sub-menu is not the child.
var menuItem = $(".menu-item");
menuItem.hover(hoverIn, hoverOut);
function hoverIn() {
var mnItemMeta = $(this)[0].getBoundingClientRect();
$(".sub-menu").css({
opacity: 1,
left: mnItemMeta.left
})
}
function hoverOut() {
$(".sub-menu").css({
opacity: 0
})
}
html,body{background-color: #efefef;}
.menu {
list-style: none;
padding-left: 0;
display: flex;
justify-content: center;
}
a {
display: block;
padding: 10px 20px;
text-decoration: none;
color: inherit;
}
.sub-menu {
opacity: 0;
background-color: white;
position: absolute;
transition: .2s ease;
}
.sub-menu-list {
list-style: none;
padding-left: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="menu">
<li class="menu-item"><a href="#">Menu Item</a>
</li>
</ul>
<div class="sub-menu">
<ul class="sub-menu-list">
<li><a href="#">Sub Menu 1</a>
</li>
<li><a href="#">Sub Menu 2</a>
</li>
<li><a href="#">Sub Menu 3</a>
</li>
<li><a href="#">Sub Menu 4</a>
</li>
</ul>
</div>
https://jsfiddle.net/yans_fied/6wj0of90/
The question is how to extend the hover area, so when the cursor point into sub-menu it ignore the hoverOut
action.
NOTE: don't tell me to place the sub-menu inside the menu-item, I already how that worked. It's for different case that need the sub-menu to be placed outside the menu-item.
Just add: background-clip: padding-box; To make sure the background does not show under the borders.
To display the element on hover, make them invisible by default using display: none property. Then add :hover property on that element with display: block to make it visible on hover.
There are two ways you can create a hover text for your HTML elements: Adding the global title attribute for your HTML tags. Creating a tooltip CSS effect using :before selector.
You can simply use the CSS :hover pseudo-class selector in combination with the jQuery mousemove() to check whether the mouse is over an element or not in jQuery. The jQuery code in the following example will display a hint message on the web page when you place or remove the mouse pointer over the DIV element's box.
You could just place the sub-menu
in the menu-item
.
var menuItem = $(".menu-item");
menuItem.hover(hoverIn, hoverOut);
function hoverIn() {
var mnItemMeta = $(this)[0].getBoundingClientRect();
$(".sub-menu").css({
opacity: 1,
left: mnItemMeta.left
})
}
function hoverOut() {
$(".sub-menu").css({
opacity: 0
})
}
html, body {
background-color: #efefef;
}
.menu {
list-style: none;
padding-left: 0;
display: flex;
justify-content: center;
}
a {
display: block;
padding: 10px 20px;
text-decoration: none;
color: inherit;
}
.sub-menu {
opacity: 0;
background-color: white;
position: absolute;
transition: .2s ease;
}
.sub-menu-list {
list-style: none;
padding-left: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="menu">
<li class="menu-item"><a href="#">Menu Item</a>
<div class="sub-menu">
<ul class="sub-menu-list">
<li><a href="#">Sub Menu 1</a></li>
<li><a href="#">Sub Menu 2</a></li>
<li><a href="#">Sub Menu 3</a></li>
<li><a href="#">Sub Menu 4</a></li>
</ul>
</div>
</li>
</ul>
Another way would be to check the hover
state of .menu-item
and .sub-menu
. You need to work with a little timeout here, to prevent it from closing to early.
var timeout,
hovered = false,
menuItem = $(".menu-item, .sub-menu").hover(hoverIn, hoverOut);;
function hoverIn() {
hovered = true;
var mnItemMeta = this.getBoundingClientRect();
$(".sub-menu").show().css({
opacity: 1,
left: mnItemMeta.left,
});
}
function hoverOut() {
hovered = false;
clearTimeout(timeout);
timeout = setTimeout(function() {
if (!hovered) {
$(".sub-menu").css({
opacity: 0,
}).hide()
}
}, 100);
}
html, body {
background-color: #efefef;
}
.menu {
list-style: none;
padding-left: 0;
display: flex;
justify-content: center;
}
a {
display: block;
padding: 10px 20px;
text-decoration: none;
color: inherit;
}
.sub-menu {
opacity: 0;
background-color: white;
position: absolute;
transition: .2s ease;
}
.sub-menu-list {
list-style: none;
padding-left: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="menu">
<li class="menu-item"><a href="#">Menu Item</a></li>
</ul>
<div class="sub-menu">
<ul class="sub-menu-list">
<li><a href="#">Sub Menu 1</a></li>
<li><a href="#">Sub Menu 2</a></li>
<li><a href="#">Sub Menu 3</a></li>
<li><a href="#">Sub Menu 4</a></li>
</ul>
</div>
You could add
.sub-menu::before{
content:'';
height: <height of menu item>
width: 100%;
position:absolute;
bottom:100%;
}
and place the hoverOut
on the .sub-menu
.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With