Menu déroulent dans une page web

Télécharger le projet
Commenter

Description

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.
Télécharger le projet

Codes Sources

A voir également

S'inscrire maintenant

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.

Du même auteur (Guechtouli_Madani)