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

Array Filtering Results in an Empty Array of Objects

Using a modal within a map function: Tips and tricks

When the document is fully loaded and processed, a script will be executed immediately following

Mozilla browser experiencing issues with mouse move event functionality

Tips for waiting for an event from a specific element in Playwright

Encountering a NullPointerException while trying to load a resource from a directory that is not within

Protecting a Web Function

Something seems off with the performance of Gulp-filter and it is not

The most effective way to align text in a right-to-left language is by utilizing the text-align property with a

What is the best way to nest _app.js within several providers?

Remove dynamically created elements from an AngularJS div

Encountering an issue with my code in CodeIgniter

Certain hyperlinks are refusing to open within an embedded iframe

Unusual host value being returned by next/headers in Next.js version 13

AngularJS Module Instantiation Error

Guide to horizontally aligning a div with a dynamic width in the center

Tips on how to ensure the navigation menu is the same size as its child elements in the navigation menu

Dynamic CSS Changes in AngularJS Animations

Having trouble accessing properties that are undefined while using react JS, specifically when trying to read a 'map' property

Styling HTML elements using CSS within PHP echo statements