MENU DÉROULANT EN IMAGES

Signaler
Messages postés
48
Date d'inscription
jeudi 18 octobre 2007
Statut
Membre
Dernière intervention
5 août 2009
-
Messages postés
647
Date d'inscription
samedi 30 décembre 2000
Statut
Membre
Dernière intervention
20 juillet 2012
-
Cette discussion concerne un article du site. Pour la consulter dans son contexte d'origine, cliquez sur le lien ci-dessous.

https://codes-sources.commentcamarche.net/source/50510-menu-deroulant-en-images

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