How to make dropdown menu disappear after a certain amount of time JavaScript


Tags: javascript,html,css

Problem :

I have a side menu that drops down when you hover over the Section One within the tag. I want to know how to get the JavaScript code to repeat itself to check what state the list is in again after a certain amount of time so that the menu closes. Can anyone please help me?

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);
}


Solution :

You can do this using the .hover() method in jQuery. Just bind to the link when the page loads.

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

See working example: http://jsfiddle.net/WFN6q/

Here is a working example in Vanilla JS:

<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>

Corresponding JS:

    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);
        }
    }

    CSS Howto..

    How to create new top headers for weebly

    Using flexbox how do I prevent a specific element from inheriting flex layout?

    How to make a bootstrap modal fade in from the bottom?

    How can I select the first paragraph in this code?

    How to position this div next to others?

    How can I use a data attribute to set a background-image in CSS?

    How to center a DIV with CSS?

    How to change the style of an active menu with php + css

    How to find last/first not empty child using only CSS?

    how to alter a css class directly?

    How to set style for n-th td in a table using css

    WordPress admin stylesheet not showing images

    How to remove right border

    how to show button and images in one line using css

    How to Identify Microsoft Edge browser via CSS?

    How to make jQuery target and attach a plugin call to hundreds of CSS ID's with an ID number at the end of them?

    How to increase the distance between table columns in html?

    How to make an image display above the background of an :after element

    How to wrap long lines without spaces in HTML?

    How to create a folding ribbon heading with inside gradient?

    How to trigger one element inside a div on mouse hover in CSS

    How to Prefix this Input element, using CSS

    How to dynamically apply nested base languages in textarea?

    How to using CSS to set content of column to top not center in JSF, primefaces?

    CSS property padding-top only works on the first element of a list. How do I apply to all the elements?

    How can I delay the speed of hover purely via CSS3 for a div?

    How to nest multiple css attributes inside another attribute

    How to use form-inline bootstrap 3?

    How to add custom css in Cognos?

    How to add a border around a canvas?