Menu déroulent dans une page web

Soyez le premier à donner votre avis sur cette source.

Vue 16 024 fois - Téléchargée 1 297 fois

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.

Codes Sources

A voir également

Ajouter un commentaire Commentaires
Messages postés
503
Date d'inscription
mercredi 29 décembre 2004
Statut
Membre
Dernière intervention
20 mars 2012

lol, moi je pensais que c es la gaminne qu a fait ce travail,
je voulais telecharger le code...
Mais...
Messages postés
127
Date d'inscription
mardi 19 août 2003
Statut
Membre
Dernière intervention
13 mars 2010

On peux m'expliquer pourquoi ya une gamine en photo du script ?
Messages postés
2
Date d'inscription
mercredi 30 mars 2005
Statut
Membre
Dernière intervention
30 mars 2005

Ca ne marche pas avec mozilla !!

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.