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.
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>
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/
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.