CODEWITHSUNDEEP
javascripthtmlcss
Skyyy
Skyyy

Reputation: 1569

Drop down menu closes when i hover on links

I created a drop down menu

<a href="#" onMouseOver="showMenu('portfolio')"  class="navationlinks">Portfolio</a>

<div id="menu2" onMouseOut="closeMenu()" class="menu">
                    <a href="heave.php">2D</a><br>
                    <a href="#">3D</a><br>
                    <a href="#">Video</a><br>
                    <a href="#">SketchBook</a>
                </div>

My scripts work fine but when i hover on links inside the div element the div get closed.

My javascript ..

function showMenu(x){
    if(x == 'portfolio'){//mouse over to portfolio link
        document.getElementById("menu2").style.display = 'block';//display drop down menu
    }
    else if(x == 'profile'){//mouse over to profile link
        document.getElementById("menu3").style.display = 'block';//display drop down menu
    }   
}

function closeMenu(){
    document.getElementById("menu2").style.display = 'none';
    document.getElementById("menu3").style.display = 'none';    
}

Until i am inside the div element it stays open but when i hover on links inside that div element it closes.

Any solution to this. How can i stay it open when hovering on links inside that div element

Upvotes: 2

Views: 556

Answers (2)

pablopixel
pablopixel

Reputation: 819

Just wrap the whole HTML you've provided with another div and assign the showMenu('portfolio') function to this instead of assigning it to the link. Check it here: http://jsfiddle.net/j2QLt/2/

And this is the HTML I've used:

<div onMouseOver="showMenu('portfolio')">
    <a href="#" class="navationlinks">Portfolio</a>
    <div id="menu2" onMouseOut="closeMenu()" class="menu">
        <a href="heave.php">2D</a><br />
        <a href="#">3D</a><br />
        <a href="#">Video</a><br />
        <a href="#">SketchBook</a>
    </div>
</div>

EDIT: or you can use onMouseEnter and onMouseLeave instead of onMouseOver and onMouseOut, like this: http://jsfiddle.net/j2QLt/4/

<a onMouseEnter="showMenu('portfolio')" href="#" class="navationlinks">Portfolio</a>
<div id="menu2" onMouseLeave="closeMenu()" class="menu">
    <a href="heave.php">2D</a><br />
    <a href="#">3D</a><br />
    <a href="#">Video</a><br />
    <a href="#">SketchBook</a>
</div>

Upvotes: 3

Awena
Awena

Reputation: 1022

Something like ?

$(document).on('click', function(e) {
    var elem = $(e.target).closest('#PortfolioLink'),
    box = $(e.target).closest('#Menu2');
 if (elem.length) {
    e.preventDefault();
    $('#Menu2').toggle();
   } else if (!box.length) {
       $('#Menu2').hide();
    }
 });

Upvotes: 0

Related Questions