MENU DÉROULANT EN IMAGES
astro53
Messages postés
48
Date d'inscription
jeudi 18 octobre 2007
Statut
Membre
Dernière intervention
5 août 2009
-
3 sept. 2009 à 10:40
jdmcreator Messages postés 647 Date d'inscription samedi 30 décembre 2000 Statut Membre Dernière intervention 20 juillet 2012 - 5 sept. 2009 à 19:34
jdmcreator Messages postés 647 Date d'inscription samedi 30 décembre 2000 Statut Membre Dernière intervention 20 juillet 2012 - 5 sept. 2009 à 19:34
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
https://codes-sources.commentcamarche.net/source/50510-menu-deroulant-en-images
5 sept. 2009 à 19:34
Cordialement,
JDMCreator
4 sept. 2009 à 04:04
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.
3 sept. 2009 à 23:11
+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
3 sept. 2009 à 10:40
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