Menu déroulant en images

Soyez le premier à donner votre avis sur cette source.

Vue 12 165 fois - Téléchargée 2 468 fois

Description

un menu simple a modifier, il vous suffit de changer le texte sur le PSD et d'enregistrer au format PNG.
si vous modifiez la largeur des images, pensez a redéfinir les marges correspondantes

Source / Exemple :


<!-- tout est dans le Zip -->

Conclusion :


N'hésitez pas à poser des questions !

Codes Sources

A voir également

Ajouter un commentaire Commentaires
Messages postés
647
Date d'inscription
samedi 30 décembre 2000
Statut
Membre
Dernière intervention
20 juillet 2012
7
Ça ne sert à rien de le mettre ici ;) Crée un nouveau ZIP et modifie ta source ;)

Cordialement,

JDMCreator
Messages postés
4
Date d'inscription
mardi 17 février 2009
Statut
Membre
Dernière intervention
4 septembre 2009

pour la première question:
je pensais que c'était plus simple de mettre le code tout en un pour le modifier mais bien sur sur plusieurs pages il est préférable de mettre le .js et le .css en externe.
et merci JDMCREATOR pour le lien: validator.w3.org.

donc voici le code validé et avec le css et js en externe:
________________________________
index.html :
________________________________

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Menu html</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
<script type="text/javascript" src="script.js"></script>

</head>

[index.html - lien 1 ]

[index.html - lien 2 ]

[index.html - lien 3 ]

[index.html - lien 4 ]

[index.html - lien 5 ]

[index.html - lien 6 ]

[index.html - lien 1 ]

[index.html - lien 2 ]

[index.html - lien 3 ]

[index.html - lien 4 ]

[index.html - lien 5 ]

[index.html - lien 6 ]

[index.html - lien 1 ]

[index.html - lien 2 ]

[index.html - lien 3 ]

[index.html - lien 4 ]

[index.html - lien 5 ]

[index.html - lien 6 ]

</html>

______________________________________
style.css :
______________________________________

body
{
width: 100%;
height: 500px;
margin-left: auto;
margin-top: 0px;
background-color: RGB(55,55,55);
background-repeat:no-repeat;
color: white;
margin-left: 50%;
}

a
{
font-size: 30px;
text-decoration: none;
color: RGB(155,155,155);
}

a:hover
{
font-size: 40px;
color: yellow;
}

#menu { position:absolute; width: 622px; height: 60px; margin-left: -311px; margin-top: 50px;}
#bout_gauche { position:absolute; width: 32px; height: 60px; margin-left: 0px; margin-top: 0px;}
#bout_droit { position:absolute; width: 32px; height: 60px; margin-left: 590px; margin-top: 0px;}
#menu_1 { position:absolute; width: 186px; height: 60px; margin-left: 32px; margin-top: 0px;}
#menu_2 { position:absolute; width: 186px; height: 60px; margin-left: 218px; margin-top: 0px;}
#menu_3 { position:absolute; width: 186px; height: 60px; margin-left: 404px; margin-top: 0px;}
#contenu_menu_1 { position:absolute; width: 186px; height: 250px; margin-left: 0px; margin-top: 0px;}
#img_contenu_menu_1 { position:absolute; width: 186px; height: 250px; margin-left: 0px; margin-top: 0px;}
#text_contenu_menu_1 { position:absolute; width: 156px; height: 220px; margin-left: 15px; margin-top: 15px;}
#contenu_menu_2 { position:absolute; width: 186px; height: 250px; margin-left: 0px; margin-top: 0px;}
#img_contenu_menu_2 { position:absolute; width: 186px; height: 250px; margin-left: 0px; margin-top: 0px;}
#text_contenu_menu_2 { position:absolute; width: 156px; height: 220px; margin-left: 15px; margin-top: 15px;}
#contenu_menu_3 { position:absolute; width: 186px; height: 250px; margin-left: 0px; margin-top: 0px;}
#img_contenu_menu_3 { position:absolute; width: 186px; height: 250px; margin-left: 0px; margin-top: 0px;}
#text_contenu_menu_3 { position:absolute; width: 156px; height: 220px; margin-left: 15px; margin-top: 15px;}

___________________________________
script.js :
____________________________________

function disply(d){
switch(d)
{
case 'contenu_menu_1' : document.getElementById('contenu_menu_2').style.display = "none";
document.getElementById('contenu_menu_3').style.display = "none";

break;
case 'contenu_menu_2' : document.getElementById('contenu_menu_1').style.display = "none";
document.getElementById('contenu_menu_3').style.display = "none";

break;
case 'contenu_menu_3' : document.getElementById('contenu_menu_1').style.display = "none";
document.getElementById('contenu_menu_2').style.display = "none";

break;

}

var aff = document.getElementById(d);
//aff.style.display = "";
if(aff.style.display == ""){
aff.style.display = "none";
}
else{
aff.style.display = "";
}
}
________________________________________________

Voila ! et merci de vos commentaires.
Messages postés
647
Date d'inscription
samedi 30 décembre 2000
Statut
Membre
Dernière intervention
20 juillet 2012
7
Bonjour,

+1 à Astro ;) C'est beaucoup plus léger ainsi lorsqu'on doit appeler le menu plusieurs fois. Sinon j'aime beaucoup l'effet.

Côté HTML : de (très) nombreuse erreur sont présentes. Notons évidemment, l'absence de balise de fermeture et </html>. Vérifie ta page avec le validateur W3C : validator.w3.org.

Je donne 6, car malgré le bel effet, ce genre de source est très présent ;)

JDMCreator
Messages postés
48
Date d'inscription
jeudi 18 octobre 2007
Statut
Membre
Dernière intervention
5 août 2009

Salut dlvains,

Je viens de regarder ta source, tout d'abord le code html est bien presente (indente).
Mais pourquoi ne pas mettre le css et le js dans des fichiers separe et les appeler dans le head? (Ca marche tout aussi bien, j'ai fais le test).
Pour l instant je n ai rien d'autre a rajouter a pars bonne chance pour la suite...
A bientot
Astro

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.