Creating a JavaScript function to automatically hide a dropdown menu after a specific duration

Question

Creating a JavaScript function to automatically hide a dropdown menu after a specific duration

I'm currently working on a side menu that drops down when hovering over Section One within the <a> tag. I need some guidance on how to make the JavaScript code continuously check the state of the list after a set amount of time in order to automatically close the menu. Can anyone offer some assistance?

HTML

<div class = "sidebarwrap">
    <ul>
       <li>
        <a href="#" onmouseover="toggle(this); return true;" onmouseout="timer()">Section One</a>
            <ul>
               <li><a href="#" >link page</a></li>
               <li><a href="#" >link page</a></li>
               <li><a href="#" >link page</a></li>
               <li><a href="#" >link page</a></li>
            </ul>
       </li>
     </ul>
   </div>

CSS

.sidebarwrap{
    width:auto;
    height:auto;
}

.sidebarwrap ul{
    float:left;
    display:block;
    background:white;
    padding:10px;
    margin-right:30px;
    margin-left:10px;
    list-style-type:none;
    border:1px dotted #0099CC;
    border-radius:100px/10px;
}

.sidebarwrap ul ul{
    list-style-type:none;
    display:none;
    border:0px dotted #0099CC;
    border-radius:20px/60px;
}

.sidebarwrap li li{
    list-style-type:circle;
    border:0px dotted #0099CC;
    border-radius:20px/60px;
    padding:5px;
}

JavaScript

var cssNode = document.createElement('link');
cssNode.setAttribute('rel','stylesheet');
cssNode.setAttribute('type','text/css');
cssNode.setAttribute('href', 'javascript-overrides.css');
document.getElementsByTagName('head')[0].appendChild(cssNode);


function toggle(toggler) {

    if(document.getElementById){
        targetElement = toggler.nextSibling;

        if(targetElement.className == undefined){
            targetElement = toggler.nextSibling.nextSibling;
        }

        if (targetElement.style.display == "block") {
            targetElement.style.display = "none";
        } else {
            targetElement.style.display = "block";
            timer();
        }
    }
}

function timer(){
    var Time = setTimeout(function(){toggle(toggler)},1000);
}

javascript html css

Answer 1

Answer №1

To achieve this functionality in jQuery, you can utilize the .hover() method. Simply attach the event to the link when the page is loaded.

$(document).ready(function () {
    $("a").hover(function () {
       $(this).next().slideDown(); 
    },
    function () {
        $(this).next().delay(1000).slideUp();
    });
});

For a demonstration, refer to this working example: http://jsfiddle.net/WFN6q/

If you prefer using Vanilla JS, here is a sample implementation:

<ul>
    <li>
        <a href="#" onmouseover="showMenu(this)" onmouseout="hideMenu(this)">Section One </a>
        <ul>
            <li>text</li>
            <li>text</li>
            <li>text</li>
            <li>text</li>
        </ul>
    </li>
</ul>

Include the following JavaScript code:

function showMenu(myLink) {
    myLink.nextElementSibling.style.display = 'block';
}

function hideMenu(myLink) {
    var ulElem = myLink.nextElementSibling;
    if (ulElement.style.display === 'block') {
        setTimeout(function () { myLink.nextElementSibling.style.display = 'none' }, 1000);
    }
}

Answer 2

To achieve this functionality in jQuery, you can utilize the .hover() method. Simply attach the event to the link when the page is loaded.

$(document).ready(function () {
    $("a").hover(function () {
       $(this).next().slideDown(); 
    },
    function () {
        $(this).next().delay(1000).slideUp();
    });
});

For a demonstration, refer to this working example: http://jsfiddle.net/WFN6q/

If you prefer using Vanilla JS, here is a sample implementation:

<ul>
    <li>
        <a href="#" onmouseover="showMenu(this)" onmouseout="hideMenu(this)">Section One </a>
        <ul>
            <li>text</li>
            <li>text</li>
            <li>text</li>
            <li>text</li>
        </ul>
    </li>
</ul>

Include the following JavaScript code:

function showMenu(myLink) {
    myLink.nextElementSibling.style.display = 'block';
}

function hideMenu(myLink) {
    var ulElem = myLink.nextElementSibling;
    if (ulElement.style.display === 'block') {
        setTimeout(function () { myLink.nextElementSibling.style.display = 'none' }, 1000);
    }
}

Answer 3

Answer №2

After analyzing your code, it came to my attention that you have set onmouseout to call timer(), creating an unnecessary timeout function without defining toggler. This leads to a continuous recursion every ~1000ms.

To address this issue, I recommend establishing a global Timers variable to manage your timer references. This will allow you to exit the function and manipulate or cancel the timer as needed. Additionally, implementing a Singleton model can help prevent multiple instances of timers from being created.

var Timers = {}; // initialize a Timers object to store timers.
function timer(target){
    Timers.sectionOne = setTimeout(function(){ toggle(target); }, 1000);
}

Furthermore, consider incorporating the approach suggested by @Bic for a more elegant solution.

Answer 4

After analyzing your code, it came to my attention that you have set onmouseout to call timer(), creating an unnecessary timeout function without defining toggler. This leads to a continuous recursion every ~1000ms.

To address this issue, I recommend establishing a global Timers variable to manage your timer references. This will allow you to exit the function and manipulate or cancel the timer as needed. Additionally, implementing a Singleton model can help prevent multiple instances of timers from being created.

var Timers = {}; // initialize a Timers object to store timers.
function timer(target){
    Timers.sectionOne = setTimeout(function(){ toggle(target); }, 1000);
}

Furthermore, consider incorporating the approach suggested by @Bic for a more elegant solution.

Creating a JavaScript function to automatically hide a dropdown menu after a specific duration

Answer №1

Answer №2

Similar questions

The Discord.js guildMemberUpdate event: Everything you need to know

Is there a way to seamlessly transition between different Angular components without having to refresh the entire webpage?

Leveraging Webpack and Jest for seamless module importing in a development project

Strange response received from $http GET request on Android device running Crosswalk

Accessing a specific element within an array that has been nested within another array, using JavaScript

Ways to retrieve information from a intricate JSON structure?

Ways to display an error notification alongside another message

Learn the method for toggling images in HTML while simultaneously storing a 0 or 1 in a flag variable

Steps to make a pop-up window for text copying by users

"Addclass() function successfully executing in the console, yet encountering issues within the script execution

Is there a way to determine if a value exists within an array of objects?

Creating an adjustable fixed footer using Bootstrap 3

How can I apply styling to Angular 2 component selector tags?

AngularJS's ScrollTo function allows users to scroll to a specific

Typing into the styled M-UI TextFields feels like a never-ending task when I use onChange to gather input field data in a React project

Safari iOS does not display any background for Buttons

I am working with an array of objects in React JavaScript, and I need to find a way to convert it into

Issues with Content-Security-Policy Implementation in Next JS and AMP Technology

Obtaining your CSGO inventory via Steam API using jsonp: A step-by-step guide

Exploring the functionality of Radar Chart within a React component