Interactive sub-menu that only appears when hovered over

Question

Interactive sub-menu that only appears when hovered over

One of the issues I am facing is with a "sub-menu" that only appears on :hover. Check out the JSFiddle here for reference.

$('.prices').hover(function () {
    $('.sub-menu').fadeIn(150);
}, function () {
    $('.sub-menu').fadeOut(120);
});

Issue #1 - Whenever I hover over the main menu and try to click on a sub-menu link, it disappears.

Issue #2 - Resolving the first problem may lead to another concern: the sub-menu contains numerous links, so when a user tries to navigate to the last link by drawing a triangle (as seen in the illustration below), the sub-menu disappears again. How can this be avoided?

Note: While I understand that typically the sub-menu should be within an li element, in this case it does not work for what I am trying to achieve. The JSFiddle provided is just a simplified version of the actual scenario.

javascript jquery css

Answer 1

Answer №1

When dealing with situations where your sub-menu cannot be an actual child of its parent, there is a workaround that may be helpful. You can try implementing the following solution (View fiddle):

var priceTimeout;

function hide_prices() {
    clearTimeout(priceTimeout);
    $(".sub-menu").fadeOut(150);
}

$(".prices").on("mouseenter", function() {
    $(".sub-menu").fadeIn(150);
});

$(".prices").on("mouseleave", function() {
    clearTimeout(priceTimeout);
    priceTimeout = setTimeout(hide_prices, 1000);
});

$(".sub-menu").on("mouseenter", function() {
    clearTimeout(priceTimeout);
});

$(".sub-menu").on("mouseleave", hide_prices);

There are a couple of points to keep in mind:

Since your .sub-menu is not a direct descendant of .prices, the mouseleave event on prices will always trigger when transitioning between them. To address this issue and prevent unexpected mouse movement behavior, we use a timeout mechanism to manage the visibility of the sub-menu. If we enter the sub-menu before the timeout triggers, we clear it to ensure continuous display.
You have the option to condense this code by utilizing the shorthand .hover() method as you previously did, but for clarity purposes, I prefer employing the explicit .on() approach consistently.

Answer 2

When dealing with situations where your sub-menu cannot be an actual child of its parent, there is a workaround that may be helpful. You can try implementing the following solution (View fiddle):

var priceTimeout;

function hide_prices() {
    clearTimeout(priceTimeout);
    $(".sub-menu").fadeOut(150);
}

$(".prices").on("mouseenter", function() {
    $(".sub-menu").fadeIn(150);
});

$(".prices").on("mouseleave", function() {
    clearTimeout(priceTimeout);
    priceTimeout = setTimeout(hide_prices, 1000);
});

$(".sub-menu").on("mouseenter", function() {
    clearTimeout(priceTimeout);
});

$(".sub-menu").on("mouseleave", hide_prices);

There are a couple of points to keep in mind:

Since your .sub-menu is not a direct descendant of .prices, the mouseleave event on prices will always trigger when transitioning between them. To address this issue and prevent unexpected mouse movement behavior, we use a timeout mechanism to manage the visibility of the sub-menu. If we enter the sub-menu before the timeout triggers, we clear it to ensure continuous display.
You have the option to condense this code by utilizing the shorthand .hover() method as you previously did, but for clarity purposes, I prefer employing the explicit .on() approach consistently.

Answer 3

Answer №2

The issue you are facing is caused by including the mouseout event handler (the second parameter in hover) which leads to hiding the sub menu every time it's triggered. A simple fix is to introduce a short delay of around 100 ms before actually hiding the submenu. This slight delay doesn't affect the visual appearance but allows the hovering on the submenu to interrupt the ongoing animation of the submenu, involving the delay and subsequent fadeOut functions. Therefore, the following snippet can be integrated:

// .prices:hover reveals .submenu
$('.prices').hover(function () {
    $('.sub-menu').stop(true,true).fadeIn(150);
}, function () {
    $('.sub-menu').stop(true,true).delay(100).fadeOut(120);
});
//
$('.sub-menu').hover(function(){        
    $(this).stop(true);  
    $(this).fadeIn(0);
}, function(){
    $(this).fadeOut(120);
});

Live Demo.

NOTE: The secondary issue doesn't require significant attention. Ideally, users should first hover over the submenu. Otherwise, we are left with no viable solution except keeping the submenu visible when the cursor moves away from the Prices menu.

Answer 4

The issue you are facing is caused by including the mouseout event handler (the second parameter in hover) which leads to hiding the sub menu every time it's triggered. A simple fix is to introduce a short delay of around 100 ms before actually hiding the submenu. This slight delay doesn't affect the visual appearance but allows the hovering on the submenu to interrupt the ongoing animation of the submenu, involving the delay and subsequent fadeOut functions. Therefore, the following snippet can be integrated:

// .prices:hover reveals .submenu
$('.prices').hover(function () {
    $('.sub-menu').stop(true,true).fadeIn(150);
}, function () {
    $('.sub-menu').stop(true,true).delay(100).fadeOut(120);
});
//
$('.sub-menu').hover(function(){        
    $(this).stop(true);  
    $(this).fadeIn(0);
}, function(){
    $(this).fadeOut(120);
});

Live Demo.

NOTE: The secondary issue doesn't require significant attention. Ideally, users should first hover over the submenu. Otherwise, we are left with no viable solution except keeping the submenu visible when the cursor moves away from the Prices menu.

Answer 5

Answer №3

Here is the answer, give this a try.

http://jsfiddle.net/iamrmin/tQcX9/3/

<ul class="menu">
    <li class="home">
        <a href="#">Home</a>
    </li>
    <li class="contact">
        <a href="#">Contact</a>
    </li>
    <li class="location">
        <a href="#">Location</a>
    </li>
    <li class="prices">
        <a href="#">Prices &raquo;</a>
        <ul class="sub-menu">
            <li>
                <a href="#">Year 2005</a>
            </li>
            <li>
                <a href="#">Year 2006</a>
            </li>
            <li>
                <a href="#">Year 2007</a>
            </li>
            <li>
                <a href="#">Year 2008</a>
            </li>
            <li>
                <a href="#">Year 2009</a>
            </li>
            <li>
                <a href="#">Year 2010</a>
            </li>
            <li>
                <a href="#">Year 2011</a>
            </li>
            <li>
                <a href="#">Year 2012</a>
            </li>
            <li>
                <a href="#">Year 2013</a>
            </li>
            <li>
                <a href="#">Year 2014</a>
            </li>
        </ul>
    </li>
    <li class="jobs">
        <a href="#">Jobs</a>
    </li>
</ul>


.sub-menu {
    display: none;
    position: absolute;
    left: 100px;
    background: #F4F4F4;
    list-style: none;
    padding: 10px;
}


a
{
    width: 101px;
    display: inline-block;
}

Answer 6

Here is the answer, give this a try.

http://jsfiddle.net/iamrmin/tQcX9/3/

<ul class="menu">
    <li class="home">
        <a href="#">Home</a>
    </li>
    <li class="contact">
        <a href="#">Contact</a>
    </li>
    <li class="location">
        <a href="#">Location</a>
    </li>
    <li class="prices">
        <a href="#">Prices &raquo;</a>
        <ul class="sub-menu">
            <li>
                <a href="#">Year 2005</a>
            </li>
            <li>
                <a href="#">Year 2006</a>
            </li>
            <li>
                <a href="#">Year 2007</a>
            </li>
            <li>
                <a href="#">Year 2008</a>
            </li>
            <li>
                <a href="#">Year 2009</a>
            </li>
            <li>
                <a href="#">Year 2010</a>
            </li>
            <li>
                <a href="#">Year 2011</a>
            </li>
            <li>
                <a href="#">Year 2012</a>
            </li>
            <li>
                <a href="#">Year 2013</a>
            </li>
            <li>
                <a href="#">Year 2014</a>
            </li>
        </ul>
    </li>
    <li class="jobs">
        <a href="#">Jobs</a>
    </li>
</ul>


.sub-menu {
    display: none;
    position: absolute;
    left: 100px;
    background: #F4F4F4;
    list-style: none;
    padding: 10px;
}


a
{
    width: 101px;
    display: inline-block;
}

Answer 7

Answer №4

If nesting the ul elements is causing issues, here is an alternative solution to consider.

Show the menu by fading it in when hovering over .prices. To fade out, only do so when the mouse cursor is positioned to the left of .sub-menu. This approach addresses both concerns effectively.

$('.prices').hover(function () {
    $('.sub-menu').fadeIn(150);
});
$('.sub-menu').mouseleave(function () {
    $(this).fadeOut(150);
});

You might also want to automatically hide the sub menu after a set timeout period if the user does not enter the .sub-menu.

Fiddle Link

Answer 8

If nesting the ul elements is causing issues, here is an alternative solution to consider.

Show the menu by fading it in when hovering over .prices. To fade out, only do so when the mouse cursor is positioned to the left of .sub-menu. This approach addresses both concerns effectively.

$('.prices').hover(function () {
    $('.sub-menu').fadeIn(150);
});
$('.sub-menu').mouseleave(function () {
    $(this).fadeOut(150);
});

You might also want to automatically hide the sub menu after a set timeout period if the user does not enter the .sub-menu.

Fiddle Link

Interactive sub-menu that only appears when hovered over

Answer №1

Answer №2

Live Demo.

Answer №3

Answer №4

Similar questions

How can I modify my for loop with if else statements so that it doesn't just return the result of the last iteration in

Implement the ability for Hubot to create and publish posts

the message sent from a webpage to a Chrome extension using chrome.runtime.sendMessage does not receive

What is the method for condensing content using a Bootstrap toggle button (checkbox)?

MVC framework encountering unexpected behavior with jQuery ajax() function returning undefined object

Can you tell me which specific font Adobe Edge Code (Brackets) uses in its code editor?

Reflection mask feature in Chrome for Android that uses Webkit technology

Inspired by the organization and depth provided by nested lists

A Node.js feature that enables atomic file replacement, triggering watchers only once

Update the information in the table with jQuery using AJAX

The lookAt method in THREE.js is not functioning properly when called after the rendering process

Trigger click events based on specific coordinates x and y in Fabric.js

What is the best way to identify specific strings within a given syntax and then separate them into an array without considering their original order

AngularJS navigation structure

Rotating the face normal in ThreeJS, just not specifically on the floor

Utilizing JSON format, handling special characters, and storing data in a database

Deleting a row from a table and then adding it back to the end of the table

Rails ajax request failing to convert embedded Ruby elements into HTML

How to accentuate search results using Angular filters and conceal non-matching text?

I designed my higher-order component to allow for dual invocations. How can I integrate Redux within this framework?