可能我对hoverIntent的想法不正确

Question

I have a div containing a collection of li to build up a menu.

Outside of the containing ul I have a div that should be displayed only when an item in the original menu is hovered.

Now, I understand the whole mouseout, mouseover effect but what I'm stuck with is to keep the content div active if the mouse is moved over it, but hide (cleared) and then displayed if any of the li elements are selected.

Code (trimmed for legibility)

<div id="menu-ext" class="ext-menu wrapper">
    <div class="navigation">
        <ul>
            <li>
                Menu Item 1
            </li>
            <li>
                Menu Item 2
            </li>
            <li>
                Menu Item 3
            </li>
            <li>
                Menu Item 4
            </li>
        </ul>
    </div>
    <div class="clear"></div>
    <div class="content window" style="display:none;">
        this contains text to be displayed, based on a what is hoverd in the navigation above (template driven)
    </div>
</div>

The important thing here is not the data that will be displayed in div.content.window but rather how to keep it open if the mouse is moved down after visibility has been set, and then how to hide it if the mouse is moved either outside of div.content.window or over any of the navigational items.

I figured hoverIntent would be able to do this, but the intent (I have) is not initialized.

My code for that:

<script type="text/javascript">
    jQuery(document).ready(function ($) {
        'use strict';

        var config = {
            interval: 100,
            sensitivity: 1,
            out: onHoverOut,
            over: onHoverOver
        };

        $("li", $(".navigation")).hoverIntent(config);

    });

    function onHoverOver(parent) {
        'use strict';                     

        var $currentTarget = $(parent.currentTarget),
            $hasTemplate = ($("selector", $currentTarget).length >= 1);

        if ($hasTemplate) {
            onPopulateMenu(parent);
            // show menu
        }
    }

    function onHoverOut(parent) {
        'use strict'

        onClearMenu();
        // TODO: hide the menu
        // I think the problem is here?
    }

    function onClearMenu() {
        'use strict';

        // TODO: clear the menu of all HTML
    }

    function onPopulateMenu(parent) {
        'use strict';

        // TODO: populate the content menu
    }
</script>

I'm sure I would be able to keep the one div active, but I cannot seem to identify the solution to this problem. Is this possible?

Update

Apologies for not being very clear.

Basically, when user hovers over menu item, a mega-menu-type navigation should pop-up with additional links that users can click on. My current problem is that the "mega-menu" window is outside of each of the li elements in the original navigation, which is what hoverIntent is looking for.

My question here is, am I missing something? Because as soon as the mouse cursor is moved away from the li towards the menu pop-up, it disappears, which is not the functionality I'm looking for.

Should the menu window be embedded in each li ? This does not make sense to me so I thought if I put it outside, it would work.

my fiddling

As stated, I need the window to stay active if the cursor is moved away from the li but I need it to disappear if the state is outside of the window.

I can write some intense JS to figure out the position of the cursor, see if the coordinates correspond with accepted locations and then toggle, but this seems a bit excessive as well?

Answer 1

If I understand you correctly you want something similar to this: Making the content-window appear and show some specific content based on which menu item is being hovered over and disappearing when you stop hovering over a menu item?

jQuery(document).ready(function () {

    timeoutId = false;

    $('.navigation li').on('mouseover', function () {
        //If there is a timeoutId set by a previous mouseout event cancel it so the content-window is not hidden
        if (timeoutId != false) {
            clearTimeout(timeoutId);
        }
        $('.content-window').css('display', 'block');
        $('.content-window .demo-content').html($(this).html());
    });

    $('.navigation li, .content-window').on('mouseout', function () {
        //start a countdown of 3000 milliseconds before removing the content-window
        timeoutId = setTimeout(function () {
            $('.content-window').css('display', 'none');
        }, 3000);
    });

    //if cursor moves over to the content-window, stop the timeout from occuring
    $('.content-window').on('mouseover', function () {
        if (timeoutId != false) {
            clearTimeout(timeoutId);
        }
    });
});

http://jsfiddle.net/UHTAk/

Hope that helps,

R.

Update:

Due to your more specific question update I have amended the code above and updated a jsfiddle as below. What it does now is sets a timeout() timer to remove the content-window after a pre-determined time on a mouseout . This removal is halted if there is another mouseover over an li or the .content-window itself.

http://jsfiddle.net/UHTAk/1/