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 remove line between two diagonally opposite css scalene triangles?

    How to reorganize the page using “div” and “css”?

    How do I vertically align multiple text next to an image with CSS?

    How to link external CSS stylesheets on a Chromebook

    How do I add a CSS class to a BoundField, so I can find it with jQuery?

    CSS: how to “plot” invisible text over an image?

    How to clip canvas with CSS clip-path?

    How to put a picture on top of other without using Positioning, Divs or Backgrounds?

    How to change CSS of a website depending on whether it is being viewed on mobile or computer? [closed]

    How to make div width almost 100%

    How to create the timetabling with div properly?

    How to transition a CSS class between two separate additional classes?

    how to create divs rowwise in css

    How could i make CSS apply to all in a div?

    how to get image to show up to the left of panel (both in same row)

    CSS selector: How to select element sibling AND element itself?

    How to implement Star Rating in Intel XDK by App Framework 3.0

    How to move an image upwards in html/css

    How to get CSS to select ID of specific pattern? [duplicate]

    HTML Tables - how can I make all cells other than the last always be wide enough?

    How to edit rails app in production env, specifically CSS

    How to apply css using ng-class in angularjs

    How to add padding to the cells of a table with CSS [closed]

    How do I get ui-sortable to only work on a specific id in CSS?

    How to use first-child?

    how to apply conditional stylesheet $this->headLink()->appendStylesheet('css/css.css') with zend-framework

    How to generate width CSS from JavaScript / C#

    how do i allign my div containers using css

    How to prevent opening multiple popup windows?

    How to create desired form with css without using too many div tags?