CodeS-SourceS est hébergé par Frontier.fr

Ce site au démarrage

begin process at 2012 02 09 19:52:31

Accueil Codes Tutoriels Forum Livres Emploi Services Connexion

Trouver un code source :

dans

[ Dernières recherches ]

Accueil >

Code

Menu & Co

> MENU DÉROULENT DANS UNE PAGE WEB

MENU DÉROULENT DANS UNE PAGE WEB

Information sur la source

Note :

4,00 / 10

Catégorie :Menu & Co Niveau :Initié Date de création :13/01/2004 Vu / téléchargé :13 825 / 1 114

Auteur : Guechtouli_Madani

Ecrire un message privé

Commentaire sur cette source (3)

Ajouter un commentaire et/ou une note

Description

Cliquez pour voir la capture en taille normale

Comment faire un menu déroulent sur votre page web. C'est facile :

Source

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

<!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.

Fichier Zip

Les Membres Club peuvent télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

COLUMNS.GIF 1 302 octets
EXAMPLES.GIF 1 334 octets
Menu.htm 4 249 octets

Télécharger le zip

Sources du même auteur

AVOIR UNE CALCULATRISE, SUR PAGE WEB.

AFFICHER L'HEURE DU NAVIGATEUR DANS LA BARE DE STATUS

LA DURÉE DE VISITE D'UNE PAGE WEB.

UNE AMINATION AVEC AFFICHAGE D'UN SÉQUENCE D'IMAGES, UNE PAR...

Toutes les sources de Guechtouli_Madani

Sources de la même categorie

UN MENU EN CSS par Julien39

FLÈCHE CLIGNOTANTE AU SURVOL D'UN LIEN par lecurieux41

TREEMENU-2.3.6-MACNIP par neep

MENU CIRCULAIRE par adelmonis

MENU TASKBAR WINDOWSXP HOME par micking

Toutes les sources de la catégorie Menu & Co

Commentaires et avis

Commentaire de pitchoune0112 le 30/03/2005 10:53:28

Ca ne marche pas avec mozilla !!

Commentaire de Anthotill le 28/08/2006 21:01:14

On peux m'expliquer pourquoi ya une gamine en photo du script ?

Commentaire de younes371 le 04/10/2006 14:05:27

lol, moi je pensais que c es la gaminne qu a fait ce travail,
je voulais telecharger le code...
Mais...

Ajouter un commentaire

Nos sponsors

Derniers Blogs

TECHDAYS PARIS 2012 : SESSION PLEINIèRE JOUR 3 par ROMELARD Fabrice

MISHRA READER : UN LECTEUR RSS TRèS ZUNE STYLE EN OPEN SOURCE ! par Vko

[FRAMEWORK 4] LES TASKS ET LE THREAD UI par fathi

WORKFLOW FOUNDATION 3 A UN PIED DANS LA TOMBE par JeremyJeanson

TECHDAYS PARIS 2012 : NOUVELLES TENDANCES DU POSTE DE TRAVAIL - BRING YOUR OWN PC par ROMELARD Fabrice

Forum

PB GETTER ET SETTER SUR IE<9 par aerolyte

CREATION DE SCORING OU RATING par Alex16000

API ANYWHERE DE TWITTER par coach872

RE : VéRIFICATION FORMULAIRE par maha1987

SCROLL D'IMAGES DANS UNE PAGE HTML : ORDRE ALéATOIRE DES IMAGES ? par cyber5784

Côté IT

Offres d'emploi

Formations Video

Appels d'offres

Creation d-un site internet similaire a Meetic CDC Disponible
Budget : 8 000€
Integration E commerce d-une application graphique interactive
Budget : 4 000€
URGENT-Developpement d-un annuaire
Budget : 13 000€

Logiciels

Academy System (17.2.1.0)
ACADEMY SYSTEM (17.2.1.0)

Logiciel de gestion des établissements. - élèves/étudiants (inscription, dossier, absence...) -...

Cliquez pour télécharger Academy System
Easy-Planning (1.0.0.1)
EASY-PLANNING (1.0.0.1)

Basé sur les mêmes principes que MyPlanning, Easy-Planning permet de créer des plannings sous la ...

Cliquez pour télécharger Easy-Planning
COLLECTOR PLUS (3.00B)
COLLECTOR PLUS (3.00B)

COLLECTOR PLUS version 3.00B est un logiciel utilisant une base de données alimentée par : - L...

Cliquez pour télécharger COLLECTOR PLUS
PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO (V7.4)
PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO (V7.4)

PONAMEDIA TV DEVIENS HELLLOOO FLASH LA TV SUR VOTRE ORDINATEUR. Toute une plateforme Multi...

Cliquez pour télécharger PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO
LettresFaciles 2011 (8.0.0.1)
LETTRESFACILES 2011 (8.0.0.1)

LettresFaciles est un logiciel facilitant la création et la rédaction de lettres types. Son inte...

Cliquez pour télécharger LettresFaciles 2011