mouseover and mouseout functions in dropdown menu

Question

html

<div class="hidden-nav">
    <h4>lorem</h4>
    <ul class="decor-menu-list">
        <li><a href="#">123</a></li>
        <li><a href="#">123</a></li>
        <li><a href="#">123</a></li>
        <li><a href="#">321</a></li>
        <li><a href="#">123</a></li>
    </ul>
</div><!-- hidden-nav -->
<aside class="fixed-col">
<div class="fix-wrap cf">
    <div class="fixed-col-inner">
        <h1>123</h1>
        <div class="menu-button">
            <a href="#" onclick="return false" class="close-menu"></a>
        </div><!-- menu-button -->
        <div class="menu-side">

            <ul class="second-nav">
                <li class="open-hidden-nav"><a href="#" onclick="return false">SHOW HIDDEN MENU</a></li>
                <li><a href="#">7</a></li>
                <li><a href="#">6</a></li>
                <li><a href="#">5</a></li>
                <li><a href="#">4</a></li>
            </ul>
        </div><!-- menu-side -->
    </div><!-- fixed-col-inner -->
    </div><!-- fix-wrap -->
</aside><!-- fixed-col -->
<aside class="fixed-col-closed">
    <div class="fix-wrap">
        <div class="fixed-col-closed-inner">
            <div class="menu-button">
                <a href="#" onclick="return false" class="open-menu"></a>
            </div><!-- menu-button -->
            <ul class="closed-fav">
                <li class="fav-ico"></li>
                <li><a href="#">0</a></li>
            </ul>
            <ul class="closed-social">
                <li class="facebook"><a href="#"></a></li>
                <li class="vk"><a href="#"></a></li>
            </ul>
        </div>
    </div><!-- fix-wrap -->
</aside><!-- fixed-col-close -->


<div class="to-top">
    <a href="#" class="scrollup">Scroll</a>
</div>
<section class="main-section cf opened-side">
    <div class="col">
        <article class="item">
            <a href="#"><img src="img/img1.jpg" height="286" width="366" alt=""></a>
            <h2><a href="#">header text</a></h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus possimus ab adipisci sit tenetur assumenda cupiditate iure modi minus repellat corrupti reiciendis sapiente sunt porro autem temporibus impedit quaerat perspiciatis?</p>
            <p>Unde consectetur vitae consequuntur error rerum laborum atque sequi explicabo aut necessitatibus omnis doloremque beatae voluptatum soluta fugiat nulla reiciendis deserunt. Dolore molestiae sint atque labore at quam ducimus itaque?</p>
            <p>Architecto facere eius magnam sed quae odit doloribus dicta. Aperiam consectetur magnam reprehenderit quod sint consequuntur quisquam ab delectus tempore in laudantium quis voluptate iure voluptatem minus placeat nulla officiis.</p>
            <a href="#" class="read-more">22</a>
            <div class="hidden-article-item">
                <p class="author"><a href="#">123</a></p>
                <p class="like-and-view"><span class="view">12</span> <span class="like">5</span></p>
            </div><!-- hidden-article-item -->
        </article>
        </div>
    </section>

I need it so that:

When user hover in .open-hidden-nav a - appears dropdown menu, and if hovered .hidden-nav it stays visible
When user changes target (anything else instead .open-hidden-nav a and .hidden-nav) - dropdown menu hold 1s and disappear.

I wrote this jQuery:

$(window).load(function(){
$(".open-hidden-nav a").on("mouseover", function () {
    $(".hidden-nav").addClass('open');
});

$(".hidden-nav").on("mouseover", function () {
    $(".hidden-nav").addClass('open');
    $(".open-hidden-nav").addClass('active');
});

$(".open-hidden-nav a").on("mouseout", function () {
    setTimeout( function(){
        $('.hidden-nav').removeClass('open');
    }, 1000);
});

$(".hidden-nav").on("mouseout", function () {
    setTimeout( function(){
        $(".hidden-nav").removeClass('open');
        $(".open-hidden-nav").removeClass('active');
    }, 1000);
});
});

but it does not work correctly, and css transitions are working in mouseover but are not working on mouseout..

One other question - Is it that mouseover and mouseout functions can be used cross browser or on mobile devices such as iPad?

Here is JsFiddle Link, I hope you'll help me)

This could do with another edit to make it easyer to read, but im not sure how to word it. (the section about what you need the code to do) — Sam Denton
– Sam Denton, Commented Aug 21, 2014 at 12:57

score 1 · Accepted Answer · 2014-08-21 13:37:44Z

1

Okay, tuned your code a little and I believe it covers the desired functionality.

Fiddle: Horizontal dropdown menu

Code:

$(window).load(function () { var closeTimeout;

$(".open-hidden-nav a").hover(
//Hoverin;
function () {
    clearTimeout(closeTimeout);
    $(".hidden-nav").addClass('open');
},
//Hoverout;
function () {
    closeTimeout = setTimeout(function () {
        $(".hidden-nav").removeClass('open');
        $(".open-hidden-nav").removeClass('active');
    }, 1000);
});

$(".hidden-nav").hover(
//Hoverin;
function () {
    clearTimeout(closeTimeout);
    $(".hidden-nav").addClass('open');
    $(".open-hidden-nav").addClass('active');
},
//Hoverout;
function () {
    closeTimeout = setTimeout(function () {
        $(".hidden-nav").removeClass('open');
        $(".open-hidden-nav").removeClass('active');
    }, 1000);
});

});

Explanation:

Basically I've changed the mouseover and mouseout events with hover syntax, which accepts two functions as parameters. One for hoverin and one for hoverout, this fixes the problem you have with the inconsistency of mouseout.

The second change is exposing your timeout as a globally accessible variable so you can shut it down if you happen to move your mouse from the hidden menu back to the button that opens it. Because, after all, we don't want it to hide considering your mouse is over what opened it in the first place.

In all other cases it will close within one second.

edited Aug 21, 2014 at 13:37

answered Aug 21, 2014 at 13:23

user1372494

Sign up to request clarification or add additional context in comments.

2 Comments

CroaToa Over a year ago

Thank you, but I need close that menu when user hover anything else except .open-hidden-nav and .hidden-nav. In your fiddle I hover some other menu item (eg 7) and menu dont dissapears.

user1372494 Over a year ago

Yeah, fixed now, check again the link.

Collectives™ on Stack Overflow

mouseover and mouseout functions in dropdown menu

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related