CODEWITHSUNDEEP
jqueryhtmlcssdrop-down-menu
cameronmarklewis
cameronmarklewis

Reputation: 264

Jquery Toggle Drop Down Menu

I'm trying to create a drop down menu where when you hover over the buttons a div will appear under it, this is my html code for the nav bar and div i want to be shown when you hover over

<ul class="buttonleft"> 
    <li id="lan"><a href="#language"><img id="topflag" src="images/flags/gb.png" alt="GB"/> English <img src="images/arrow.png" alt="Arrow" /></a></li> 
    <li><a href="#search">Search and Book <img src="images/arrow.png" alt="Arrow" /></a></li> 
    <li><a href="#offers">Latest Offers <img src="images/arrow.png" alt="Arrow" /></a></li> 
    <li><a href="#offers">Car Hire <img src="images/arrow.png" alt="Arrow" /></a></li> 
    <li><a href="#offers">Contact Us <img src="images/arrow.png" alt="Arrow" /></a></li> 
</ul>         

<div id="dropmenu2" class="dropmenudiv" style="width: 150px;">
    <a href="#lan=1"><img id="topflag" src="images/flags/es.png" alt="ES"/> Español</a>
    <a href="#lan=2"><img id="topflag" src="images/flags/de.png" alt="DE"/> Deutsch</a>
    <a href="#lan=3"><img id="topflag" src="images/flags/fr.png" alt="FR"/> Français</a>
    <a href="#lan=4"><img id="topflag" src="images/flags/it.png" alt="IT"/> Italiano</a>
    <a href="#lan=4">More</a>
</div>

This is my jQuery code I'm using:

$(document).ready(function(){
    $("#lan").hover(function(){
        $("#dropmenu2").fadeToggle("fast");
        $(this).toggleClass("active");
    });
});

I have managed to make it so when you hover over the button with the id lan the dropdownmenu div will appear but when the mouse moves away from the button the div drop down meny disappears, is there a way to make the drop down box stay so you can then move over the drop down menu and then when the user moves there mouse out of the drop down menu it will disappear

Upvotes: 0

Views: 1823

Answers (4)

xkeshav
xkeshav

Reputation: 54072

Try

$(document).ready(function(){
   $("#lan>a").bind({    
    mouseout : function(){
      $("#dropmenu2").fadeOut("fast");
      $(this).removeClass("active");
    },
    mouseenter: function() {
        $("#dropmenu2").fadeIn("fast");
        $(this).addClass("active");
    }
})

DEMO

Reference

Upvotes: 2

peirix
peirix

Reputation: 37771

The hover method accepts two functions, one is mouseenter, the other is mouseout.

$("#lan").hover(function() {
    //this is mouseenter
}, function() {
    //this is mouseout
});

Upvotes: 0

Dev
Dev

Reputation: 791

check here.. http://jsfiddle.net/chin/naF4J/1/

Upvotes: 1

Desi
Desi

Reputation: 375

Instead of using hover, use mouseover as your function and then use mouseout and another function with what you want to happen after that. Attached the mouseout function to #ian.

Upvotes: 1

Related Questions