jQuery Dropdown Menu Not Working

Question

I'm trying to make a website with a settings feature and I have this button. I want the options and other links to appear in a dropdown menu when hovered over. I have the code that I think should work but it won't work for some reason.

JSFiddle Here

Javascript ,CSS and HTML:-

$(document).ready(function(){
  $('#settings').mouseenter(function(){
    $('#settingDrop').css('visibilty', 'visible'); 
  });
  $('#settingDrop, #settings').mouseleave(function(){
    $('#settingDrop').css('visibilty', 'hidden'); 
  });
});

#settings {
  width: 40px;
  background-image: url(http://cdn.flaticon.com/png/256/23171.png);
  background-repeat: no-repeat;
  background-size: 40px 40px;
  background-color: #F0F0F0;
  bottom: 0px;
  position: relative;
  height: 30px;
  background-position: center;
  float:left;
}

#settingDrop {
  position: absolute;
  width: 200px;
  height: 300px;
  background-color: #F0F0F0;
  float:left;
  top:55px;
  visibility: hidden;
}
.navbar {
  margin-left:
    width: 170px;
  padding: 10px 5px 10px 5px;
  text-align: center;
  display: inline-block;
  margin-right: 30px;
  height: 30px;
}

<div id = 'settings' class='navbar'></div>
<div id = 'settingDrop'></div>

Nothing happens. I checked my Javascript and everything seems to be all right. The dropdown just doesn't appear — Jasch1
– Jasch1, Commented Dec 29, 2014 at 22:46
That is because of a typo, it should be visibility instead of visibilty in the click-function. Fixed in Fiddle: jsfiddle.net/z0ta8Ly9 — matthias_h
– matthias_h, Commented Dec 29, 2014 at 22:51
Works somewhat, but doesn't stay when I hover over the dropdown. I still feel like an idiot though..... — Jasch1
– Jasch1, Commented Dec 29, 2014 at 22:56
@Jasch1 you need to make drop down appear on hover and hide when cursor moved — sanoj lawrence
– sanoj lawrence, Commented Dec 29, 2014 at 22:57

Mr.Web · Accepted Answer · 2014-12-29 23:04:57Z

2

You have a typo for visibility.

$(document).ready(function(){
    $('#settings').mouseenter(function(){
       $('#settingDrop').css('visibility', 'visible'); 
    });
    $('#settingDrop, #settings').mouseleave(function(){
       $('#settingDrop').css('visibility', 'hidden'); 
    });
});

As a note and for a shorter code, using the CSS display:none and jQuery show(milliseconds)and hide(milliseconds) is quicker, you can even animate it by using time, like this:

$(document).ready(function(){

    $('#settings').mouseenter(function(){
       $('#settingDrop').show(500); 
    });

    $('#settingDrop, #settings').mouseleave(function(){
        $('#settingDrop').hide(500); 
    });

});

Same with fadeIn(milliseconds) and fadeOut(milliseconds)

And change visibility:hidden to display:none.

* EDIT *

This is for the time, to have the menu go away after a few seconds (in this case 2, 2000 is in milliseconds):

$(document).ready(function(){

    $('#settings').click(function(){
       $('#settingDrop').fadeIn(500);
    });

    $('#settingDrop, #settings').mouseleave(function(){
        var time = setInterval(function(){
            $('#settingDrop').fadeOut(500);
            clearInterval(time);
        }, 2000);            
    });

});

This is the updated Fiddle: http://jsfiddle.net/xp4rfLbL/2/

edited Dec 29, 2014 at 23:04

answered Dec 29, 2014 at 22:51

Mr.Web

7,2078 gold badges56 silver badges90 bronze badges

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

2 Comments

Jasch1 Over a year ago

Works somewhat, but doesn't stay when I hover over the dropdown. I still feel like an idiot though.....

Mr.Web Over a year ago

Ok, then you should add a timer to make it go away after a few seconds. I'm changing the code, hold on.

Collectives™ on Stack Overflow

jQuery Dropdown Menu Not Working

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related