Script Masters : Javascript : Index

Script Masters

Espace membre

Langages

Autres ressources

Emploi avec Jobintree

Ressources graphiques

Recherche

Kit graphique

Liens

Statistiques

Javascript >> Catégorie >> Liens >> Menu Déroulant Dynamique (dhtml)

Description

Ce menu déroulant est programmé en dhtml. Il est du même type que celui que l'on peut trouver sur microsoft. Bref, un très bon script qui méritera d'être placé sur vos pages, d'autant que son installation est à la portée de tous.
12/07/2002 : Fixation d'un bug qui faisait disparaître le menu.

Exemple

[Cliquez ici pour visualiser l'exemple]

Informations et statistiques

Internet Explorer : oui
Netscape Navigator : non
Auteur : Daniel Fabien
Date de création : 18/01/2002

Visualiser : 88122
Dont aujourd'hui : 7
Envoi par mail : 1820
Commentaires : 8 ( Voir )

Conseils pour la personalisation du script

Définissez précisément les couleurs et taille du menu

var couleur_fond = "#525C88"; // Couleur de fond du menu
var couleur_bordure = "#000000"; // Couleur de la bordure
var couleur_police = "#FFFFFF"; // Couleur de la police

var couleur_fond_rollover = "#FFFFFF"; // Couleur du lien surligner par la souris
var couleur_police_rollover = "#525C88"; // Couleur de la police surligner par la souris

var taille_menu_deroule = "150"; // largeur du menu déroulé
var taille_police = "10"; // taille de la police

Copier et modifier ce code pour éditer les entrées de votre menu


<TD CLASS="td_furtif">Javascript
<TABLE CLASS="menu_deroulant">


<TR><TD CLASS="objet_du_menu" onClick="javascript:window.location='http://www.adresse.com/'">Exemples</TD>
</TR><TR><TD CLASS="objet_du_menu" onClick="javascript:window.location='http://www.adresse.com/'">Tutorial</TD>
</TR><TR><TD CLASS="objet_du_menu" onClick="javascript:window.location='http://www.adresse.com/'">Astuces</TD>
</TR><TR><TD CLASS="objet_du_menu" onClick="javascript:window.location='http://www.adresse.com/'">Liens</TD></TR>
</TABLE>
</TD>

Le script

Insérer ce script entre les balises <Head> </Head>

Insérer ce code entre les balises <Body> </Body>

/*
Insérer ce code entre les balises <Body> </Body>
*/

<TABLE CLASS="menu">
    <TD CLASS="td_furtif" width="100">Javascript
        <TABLE CLASS="menu_deroulant">
            <TR><TD CLASS="objet_du_menu" onClick="javascript:alert('Les liens ont été modifié pour les besoins du script. Vous pouvez bien entendu les diriger vers l\'adresse que vous voulez.')">Exemples</TD></TR>
            <TR><TD CLASS="objet_du_menu" onClick="javascript:alert('Les liens ont été modifié pour les besoins du script. Vous pouvez bien entendu les diriger vers l\'adresse que vous voulez.')">Tutorial</TD></TR>
            <TR><TD CLASS="objet_du_menu" onClick="javascript:alert('Les liens ont été modifié pour les besoins du script. Vous pouvez bien entendu les diriger vers l\'adresse que vous voulez.')">Astuces</TD></TR>
            <TR><TD CLASS="objet_du_menu" onClick="javascript:alert('Les liens ont été modifié pour les besoins du script. Vous pouvez bien entendu les diriger vers l\'adresse que vous voulez.')">Liens</TD></TR>
        </TABLE>
    </TD>

<TD CLASS="td_furtif" width="100">Php/MySql
        <TABLE CLASS="menu_deroulant">
            <TR><TD CLASS="objet_du_menu" onClick="javascript:alert('Les liens ont été modifié pour les besoins du script. Vous pouvez bien entendu les diriger vers l\'adresse que vous voulez.')">Exemples</TD></TR>
            <TR><TD CLASS="objet_du_menu" onClick="javascript:alert('Les liens ont été modifié pour les besoins du script. Vous pouvez bien entendu les diriger vers l\'adresse que vous voulez.')">Astuces</TD></TR>
            <TR><TD CLASS="objet_du_menu" onClick="javascript:alert('Les liens ont été modifié pour les besoins du script. Vous pouvez bien entendu les diriger vers l\'adresse que vous voulez.')">Tutorial</TD></TR>
        </TABLE>
    </TD>

<TD CLASS="td_furtif" width="100">Forum
        <TABLE CLASS="menu_deroulant">
            <TR><TD CLASS="objet_du_menu" onClick="javascript:alert('Les liens ont été modifié pour les besoins du script. Vous pouvez bien entendu les diriger vers l\'adresse que vous voulez.')">Nouveau Message</TD></TR>
            <TR><TD CLASS="objet_du_menu" onClick="javascript:alert('Les liens ont été modifié pour les besoins du script. Vous pouvez bien entendu les diriger vers l\'adresse que vous voulez.')">Lire Un Message</TD></TR>
            <TR><TD CLASS="objet_du_menu" onClick="javascript:alert('Les liens ont été modifié pour les besoins du script. Vous pouvez bien entendu les diriger vers l\'adresse que vous voulez.')">Répondre</TD></TR>
        </TABLE>
    </TD>

<TD CLASS="td_furtif" width="100">Contact
        <TABLE CLASS="menu_deroulant">
            <TR><TD CLASS="objet_du_menu" onClick="javascript:alert('Les liens ont été modifié pour les besoins du script. Vous pouvez bien entendu les diriger vers l\'adresse que vous voulez.')">Webmaster</TD></TR>
            <TR><TD CLASS="objet_du_menu" onClick="javascript:alert('Les liens ont été modifié pour les besoins du script. Vous pouvez bien entendu les diriger vers l\'adresse que vous voulez.')">Service clientèle</TD></TR>
            <TR><TD CLASS="objet_du_menu" onClick="javascript:alert('Les liens ont été modifié pour les besoins du script. Vous pouvez bien entendu les diriger vers l\'adresse que vous voulez.')">Partenariat</TD></TR>
        </TABLE>
    </TD>

<TD CLASS="td_furtif" width="100">Partenaires
        <TABLE CLASS="menu_deroulant">
            <TR><TD CLASS="objet_du_menu" onClick="javascript:alert('Les liens ont été modifié pour les besoins du script. Vous pouvez bien entendu les diriger vers l\'adresse que vous voulez.')">Editeur Javascript</TD></TR>
            <TR><TD CLASS="objet_du_menu" onClick="javascript:alert('Les liens ont été modifié pour les besoins du script. Vous pouvez bien entendu les diriger vers l\'adresse que vous voulez.')">Swisstools.net</TD></TR>
        </TABLE>
    </TD>
</TABLE>

Télécharger le fichier

Recevoir ce script par email

Entrez votre email ci-dessous pour recevoir ce script dans votre boite à lettre

Poster un commentaires :

Plus d'info :

Un problème ? Consultez le forum de Script Masters pour trouver la réponse !