[ TUTO ; Javascript ] 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.

Exemple ; cliquez ici pour voir l'exemple.

Infos ;

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

Code:: 
<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 entre les balises

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

<SCRIPT LANGUAGE="JavaScript">

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

</SCRIPT>

<SCRIPT LANGUAGE="JavaScript" src="javascript_104.js">
</SCRIPT>

Insérer ce code entre les balises

Code:: /*
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>

Source: Script Master

» [ TUTO HTML ; FORUM ] Centrer votre profil.
» [ TUTO HTML ; FORUM] Mettre des titres en couleur
» [ TUTO HTML ; FORUM] Mettre de la couleur dans un rang
» [ TUTO HTML ; FORUM ] Titre de forum souligné en pointillé.