Comment faire un menu déroulent sur votre page web. C'est facile :
Source / Exemple :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD><TITLE>New Page 6</TITLE>
<META http-equiv=Content-Type content="text/html; charset=windows-1252">
<META content="MSHTML 6.00.2719.2200" name=GENERATOR></HEAD>
<BODY>
<P><SPAN id=test style="POSITION: absolute"></SPAN></P>
<SCRIPT language=JavaScript1.2>
<!--
var NS4 = (document.layers) ? true : false;
var IE4 = (document.all) ? true : false;
var maxZ = 1;
function popout(id, posY, width) {
this.id = id; // the element's name (and the variable's name)
this.posY = posY; // the element's top property
this.width = width; // the element's width
this.show = false; // do not show the element
this.makeImage = makeImage; // constructs the image's tab
this.makeElement = makeElement; // constructs the content box
this.showElement = showElement; // sets the element's visibility
}
function makeImage(imgURL, imgHeight, imgWidth, imgAlt) {
document.write(
'<STYLE TYPE="text/css">',
'#', this.id, 'img {',
'position: absolute;',
'left: 0; top: ', this.posY, ';',
'width: ', imgWidth, ';',
'z-index: 1',
'}',
'</STYLE>',
'<DIV ID="', this.id, 'img">',
'<A HREF="javascript:', this.id, '.showElement()">',
'<IMG SRC="', imgURL, '" ALT="', imgAlt, '" BORDER="0" ',
'HEIGHT="', imgHeight, '" WIDTH="', imgWidth, '">',
'</A></DIV>'
);
}
function makeElement(boxBg, boxColor, boxCode) {
var padding = (NS4) ? '' : 'padding: 3 0 3 3;';
document.write(
'<STYLE TYPE="text/css">',
'#', this.id, 'box {',
'position: absolute;',
'left: 0; top: ', this.posY, ';',
'width: ', this.width, ';',
'layer-background-color: ', boxBg, ';',
'background-color: ', boxBg, ';',
'visibility: hidden;',
'border-width: 2;',
'border-style: solid;',
'border-color: ', boxColor, ';',
padding,
'z-index: 1',
'}',
'</STYLE>',
'<DIV ID="', this.id, 'box">',
boxCode,
'</DIV>'
);
}
function showElement() {
this.show = !this.show;
var pos = (this.show) ? this.width : 0;
if (NS4) {
var str = (this.show) ? 'show' : 'hide';
eval('document.' + this.id + 'img.left = ' + pos);
eval('document.' + this.id + 'img.zIndex = ' + (++maxZ));
eval('document.' + this.id + 'box.zIndex = ' + maxZ);
eval('document.' + this.id + 'box.visibility = "' + str + '"');
} else {
var str = (this.show) ? 'visible' : 'hidden';
eval(this.id + 'img.style.left = ' + pos);
eval(this.id + 'img.style.zIndex = ' + (++maxZ));
eval(this.id + 'box.style.zIndex = ' + maxZ);
eval(this.id + 'box.style.visibility = "' + str + '"');
}
}
function styleEnabled() {
return ((NS4 && document.test) || IE4);
}
function init() {
if (!styleEnabled()) return;
menu1 = new popout('menu1', 300, 90); // a global variable
menu1.makeImage('columns.gif', 130, 18,
'JavaScript Columns');
menu1.makeElement('beige', '#0000cc',
'<A HREF="/js/column1/">Column 1</A><BR>' +
'<A HREF="/js/column2/">Column 2</A><BR>' +
'<A HREF="/js/column13/">Column 13</A>'
);
menu2 = new popout('menu2', 440, 200); // a global variable
menu2.makeImage('examples.gif', 130, 18,
'JavaScript Examples');
menu2.makeElement('beige', '#0000cc',
'<IMG SRC="/js/pharmacy/docjx.gif" WIDTH="55" ' +
'HEIGHT="60" HSPACE="2" ALIGN="right">' +
'<A HREF="/js/pharmacy/menu.html">A Popup Menu</A><BR>' +
'<A HREF="/js/pharmacy/date.html">A Text Date</A><BR>' +
'<A HREF="/js/pharmacy/countdown.html">A Date Countdown</A>'
);
}
init();
// -->
</SCRIPT>
</BODY></HTML>
Conclusion :
Vous trouvier la page, avec un menu de deux listes.
Vous n'êtes pas encore membre ?
inscrivez-vous, c'est gratuit et ça prend moins d'une minute !
Les membres obtiennent plus de réponses que les utilisateurs anonymes.
Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.
Le fait d'être membre vous permet d'avoir des options supplémentaires.