CODEWITHSUNDEEP
javascriptjqueryhtmlcsshover
user2615031
user2615031

Reputation:

Drop-Down Menu with jQuery

I'm working on an Drop-Down Menu but without success.
I want the same function like the Drop-Down menu by Sony.I have even tried to imitate this effect, but I had a few difficulties.

My HTML:

<div id="main_menu">
<div id="main_menu_container">
    <div id="main_menu_links">
        <a href="" class="main_menu_link">Startseite</a>
        <a id="drop_down_link1" class="main_menu_link">Events</a>
        <a id="drop_down_link2" class="main_menu_link">Clan</a>
        <a id="drop_down_link3" class="main_menu_link">Irgendetwas</a>
    </div>
</div>
<div id="drop_down_container">
    <div id="drop_down_content1" class="drop_down_content"></div>
    <div id="drop_down_content2" class="drop_down_content"></div>
    <div id="drop_down_content3" class="drop_down_content"></div>
</div>

jQuery:

$("#drop_down_link1").mouseenter(function (){
    $("#drop_down_content1").stop().slideDown();
});
$("#drop_down_content1, #drop_down_link1").mouseleave(function (){
    $("#drop_down_content1").delay(350).slideUp();
});

FIDDLE

The problem in my script is, when i leave drop_down_link1 or drop_down_content1 then the content 'slideUp' but when i hover from drop_down_link1 to drop_down_content1 then there shouldn't be the function.

So my question is:

  1. How can I do this that I can move between the link and the 'content' with my mouse without 'content' close?
  2. My code is very unprofessional. How do I make it so that I do not repeat myself when 'Events' and 'Clan' have the same function?

Upvotes: 3

Views: 144

Answers (2)

Bellash
Bellash

Reputation: 8184

Very simple! Just handle both #drop_down_link1 and #drop_down_content1 mouseenter events as follows

    $("#drop_down_link1,#drop_down_content1").mouseenter(function (){
       $("#drop_down_content1").stop().slideDown();
     });
   $("#drop_down_content1, #drop_down_link1").mouseleave(function (){
      $("#drop_down_content1").delay(350).stop().slideUp();
    });

2.

   $('#main_menu_container a.main_menu_link').each(function(index,item){
      alert(index);
      var $this=$(this),
          $dropdownContent=$('#drop_down_container .drop_down_content')
      [index];

     ......

  });

Upvotes: 0

Preslav Panayotov
Preslav Panayotov

Reputation: 312

http://jsfiddle.net/PKvZ2/

Try with this code. I added : 

$("#drop_down_link1,#drop_down_container").mouseenter(function (){
    $("#drop_down_content1").stop().slideDown();
});
$("#drop_down_content1, #drop_down_link1,#drop_down_container").mouseleave(function (){
    $("#drop_down_content1").delay(350).stop().slideUp();
});

Or this 

$("#drop_down_link1,#drop_down_container").hover(function (){
    $("#drop_down_content1").stop().slideDown();
},function(){
        $("#drop_down_content1").stop().slideUp();

});

http://jsfiddle.net/bT8Cp/

Upvotes: 1

Related Questions