Monday, 1 March 2010

Simplified jQuery Poll-down menu, only an anchor and a div elements


This code is adopted from another original article:

It is a simple poll down menu construct from <a> alement and <div> element, just like that:
1.<a id="anchor" onclick="return false;" href="">Menu title</a>
2.<div id="div" style="display:none;position:absolute; z-index:1000;">
3.    <a href="">element1 title</a>
4.    <a href="">element2 title</a>
5.</div>

menu

function
MakeADIVMenu(anchor,div) {    var timeoutID = -1;
    $(
'a#' + anchor)
    .hover(
       
function() {
            clearTimeout(timeoutID);
            $(
'#' + div).css('position', 'absolute');
            $(
'#' + div).css('top', $('a#' + anchor).position().top);
            $(
'#' + div).css('left', $('a#' + anchor).position().left - ($('#' + div).width()/2));
            $(
'#' + div).css({zIndex:20}).show();
        },
       
function() { timeoutID = setTimeout(function() { $('#' + div).hide(); }, 2000); }
    );
   
    $(
'#' + div)
    .hover(
       
function() {
            clearTimeout(timeoutID);
            $(
this)
            .each(
function() {
            $(
this).css('position', 'absolute');
            $(
this).css('top', $('a#' + anchor).position().top);
            $(
this).css('left', $('a#' + anchor).position().left - ($(this).width()/2));
            $(
this).css({ zIndex: 20 }).show();});
        },
       
function() { $(this).hide(); }
    );
   
//1.<a id="anchor" onclick="return false;" href="">
    //2.<div id="div" style="display:none">
    //3. <a href="">element1</a>
    //4. <a href="">element2</a>
    //5.</div>
}

No comments:

Post a Comment