super Simple-useful Drop Down Menu

It is a One Level Drop-Down Menu with Timeout effect.

Internet has a lot of scripts with the name “Drop Down Menu”. One day I needed to make such menu for my site. I have rummaged a heap of sites and archives with scripts. And not found what I looked for. On the Net scripts shared on two variants. The first – utterly worthless scripts. The second – too complex heap up and chargeable.

And I just wrote this simple script:

 

 

HTML Code

HTML code is very simple and without tables. It used unordered list for menu items and hidden layers near own parent items.

Parent items and hidden layers have unique identifiers. Also these have event handlers onmouseover and onmouseout:

CSS Code

  • tag have loat: left; declaration. sumbmenu layer have visibility: hidden; and position: absolute;. Anchor tag set to display: block;

    Everything else is usual decoration:

    #sddm
    { margin: 0;
    padding: 0;
    z-index: 30}

    #sddm li
    { margin: 0;
    padding: 0;
    list-style: none;
    float: left;
    font: bold 11px arial}

    #sddm li a
    { display: block;
    margin: 0 1px 0 0;
    padding: 4px 10px;
    width: 60px;
    background: #5970B2;
    color: #FFF;
    text-align: center;
    text-decoration: none}

    #sddm li a:hover
    { background: #49A3FF}

    #sddm div
    { position: absolute;
    visibility: hidden;
    margin: 0;
    padding: 0;
    background: #EAEBD8;
    border: 1px solid #5970B2}

    #sddm div a
    { position: relative;
    display: block;
    margin: 0;
    padding: 5px 10px;
    width: auto;
    white-space: nowrap;
    text-align: left;
    text-decoration: none;
    background: #EAEBD8;
    color: #2875DE;
    font: 11px arial}

    #sddm div a:hover
    { background: #49A3FF;
    color: #FFF}

    JavaScript Code

    Insert this code between your tags. Look to the code for the comments:

    // Copyright 2006-2007 javascript-array.com

    var timeout = 500;
    var closetimer = 0;
    var ddmenuitem = 0;

    // open hidden layer
    function mopen(id)
    {
    // cancel close timer
    mcancelclosetime();

    // close old layer
    if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';

    // get new layer and show it
    ddmenuitem = document.getElementById(id);
    ddmenuitem.style.visibility = 'visible';

    }
    // close showed layer
    function mclose()
    {
    if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
    }

    // go close timer
    function mclosetime()
    {
    closetimer = window.setTimeout(mclose, timeout);
    }

    // cancel close timer
    function mcancelclosetime()
    {
    if(closetimer)
    {
    window.clearTimeout(closetimer);
    closetimer = null;
    }
    }

    // close layer when click-out
    document.onclick = mclose;

    Download: http://www.htmldrive.net/items/download/758

    Be Sociable, Share!
  • Leave a comment