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