Troubleshooting: Issues with jQuery Dropdown Menu

I'm currently working on a website that includes a settings feature with a button. My goal is to have the options and other links display in a dropdown menu when hovered over. Although I have written what I believe to be the correct code, it's not functioning as expected.

Check out my JSFiddle here

Here is the Javascript, CSS, and HTML code I'm using:

$(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>
javascriptjqueryhtmlcssdrop-down-menu

Answer №1

You made a mistake with the spelling of visibility.

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

Just a tip for shorter code, you can use CSS properties like display:none and jQuery methods such as show(milliseconds) and hide(milliseconds) to achieve similar results more efficiently. Here's an example:

$(document).ready(function(){

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

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

});

You can also consider using fadeIn(milliseconds) and fadeOut(milliseconds) instead of changing visibility:hidden to display:none.

* EDIT *

To make the menu disappear automatically after a few seconds (in this case 2 seconds, 2000 milliseconds):

$(document).ready(function(){

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

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

});

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Switch the custom audio control button on and off within a v-for loop

I have implemented a unique audio play/pause button in my Vue app for a list of audios. Here is how it looks: <div v-for="(post, p) in post_list"> ... ... ... <v-avatar v-if="!is_played" color="#663399" ...

javascriptvue.jsaudio

Next JS Event Listener Failing to Detect Scroll Events

Currently, I am attempting to change the state and display a shadow in the navigation bar when the user scrolls, but for some reason it is not detecting the event. I am working with nextJS 13 and tailwind css. const [shadow, setShadow] = useState(false) ...

javascriptcssnext.jstailwind-css

Mastering the art of obtaining XPaths through Selenium WebDriver

While working on test automation for a section of Outlook Web App, I focused on checking a designated test mailbox that receives emails from our company. I needed to verify specific texts within an email using Assert, but encountered difficulty in identify ...

javahtmlseleniumselenium-webdriverxpath

The user's input is not being accurately represented when making an AJAX request to the

When attempting to incorporate a user's city input (e.g. Los Angeles) into Ajax URL parameters, there seems to be an issue where the '+' is not being added between "los angels", resulting in a broken URL when console.log(searchURL) is used. ...

javascriptjqueryajax

What is the purpose of having several script tags following the creation of NextJS?

After running next build and next start, my application is still generating many JS files instead of a single entry point. I'm unsure if I missed a step as the documentation suggests this should be all that's required. https://i.stack.imgur.com/7 ...

javascriptnext.js

Gaining entry to specialized assistance through an occasion

Having trouble accessing a custom service from a custom event. Every time the event is fired, the service reference turns out to be null. @Component({ selector: "my-component", template: mySource, legacy: { transclude: true } }) export class myComponent { ...

javascriptangularjsservicetypescript

Cordova encountered an error: Execution of inline script was denied due to violation of Content Security Policy directive

As I delve into the world of Cordova and jquery mobile, I encountered a perplexing error that reads: Refused to execute inline script because it violates the following Content Security Policy directive: "default-src 'self' data: gap: 'un ...

javascriptjqueryhtmlnode.jscordova

What is the best way to transfer data from one function to another file in React without directly calling the component or using props?

filename - Header.jsx import { useEffect, useState } from 'react' import { getValue } from './Input' import TextField from '@mui/material/TextField'; export const Header = () => { const [search, setSearch] = useState( ...

javascripthtmlreactjsreact-props

How to Fix Items Being Pushed Down by 'Particleground' Jquery Plugin Due to Z-Index and Positioning

I'm grappling with understanding z-index and positioning, despite reading various questions and articles on the topic. Currently, I'm attempting to incorporate a Jquery Plugin called 'Particleground': https://github.com/jnicol/particle ...

javascriptjqueryhtmlcssjquery-plugins

Automatically Scrolling Div According to its Content

Struggling to figure out how to make a parent div automatically scroll based on its child's content. I have a menu that expands when clicked and needs to scroll if the height of the child exceeds that of the parent. This is the HTML for the menu wra ...

htmlcssscrolloverflow

Discovering time overlaps with Javascript and moment.js

In my calendar project, I am storing events for a day in an array. The start and end times are stored as String values in the following format: Example of events in a day const events = [{ "_id": "5bdf91a78197f0ced6c03496", "user": "5bd62237d6 ...

javascriptnode.jsreactjsmomentjs

Ajax request and the Ghostery extension in Firefox

I've implemented the following code to detect ad blockers like Ghostery: <script> var request = new XMLHttpRequest(); request.onreadystatechange = function() { if(request.readyState === 4 && request.status === 200 ) { ...

javascriptjqueryajaxfirefox

Create static HTML web pages using information from a text file

Exploring a new concept of a random joke generator that loads a unique html page with a quirky joke every time. Currently, the main index page is structured like this: <!DOCTYPE html> <html> <head><title>Jokes</title> ...

javascriptphpjqueryhtml

Switching the position to fixed causes it to lose its justification functionality

My goal is to create a table using div elements. However, when I set the header to have a fixed position to prevent it from disappearing when scrolling through more data, all the header cells shift to the right. I attempted to adjust the margin-left proper ...

htmlcss

Mongoose Does Not Allow for Duplicate Data Submissions

I'm currently working on a project to develop a basic blog application. Everything works smoothly when submitting content to the database for the first time, but if you try to submit again, Node crashes unexpectedly. I've been struggling to pinpo ...

javascriptnode.jsmongodbmongoose

Passing an array of items as a property to a child component in React with Typescript is not possible

In my project, I have multiple classes designed with create-react-app. I am trying to send an array of objects to child components as illustrated below. Items.tsx import * as React from 'react'; import ItemTable from './ItemTable'; imp ...

javascriptarraysreactjstypescriptproperties

The value in the textarea will stay unchanged even after the form has been submitted

I recently resolved my previous issue, but now I am seeking advice on how to prevent a textarea from clearing its input after submitting a form. You can view the jsFiddle here: http://jsfiddle.net/rz4pnumy/ Should I modify the HTML form? <form id="for ...

javascriptjqueryhtmlforms

Error encountered in SelectInput.js file of React MUI 4: line 340 - TypeError: Unable to access properties of undefined (specifically 'value')

An issue arises when an empty array is provided as the options. The error message: SelectInput.js:340 Uncaught TypeError: Cannot read properties of undefined (reading 'value') at SelectInput.js:340:1 at Array.map (<anonymous>) ...

javascriptreactjs

Do we need to duplicate structured data when listing nested objects, or is it better to avoid doing so?

We are currently focused on implementing JSON structured data for a one-page website that contains extensive information about a local business, including address, pricing, reviews, and services. The JSON snippet provided below represents the structured da ...

htmljsonschemagoogle-rich-snippetsstructured-data

Is it possible to use JavaScript to save and preserve the current state of a webpage?

I'm looking for a way to retrieve the entire content of a webpage using JavaScript and then send it to a server script for saving. This action should be triggered after the user has made some changes to the page using AJAX and other JavaScript tools. ...

javascriptajaxdom