Adapter mon menu deroulant pour ie6

Question

zugolin

2 Jun 2010 à 15:32

bonjour a tous,
voic donc mon probleme: adapter mon menu deroulant pour ie6 !
...car je ne sais pas trop comment faire tout seul ... Smiley decu

j'ai bien un autre style de menu deroulant avec un javascript, mais je ne sais pas le modifier, et je ne sais meme pas si c'est adaptable a mon menu

pouvez vous m'aider, sioux plait ?
voici mon code simplifié, avec le javascript de l'autre menu, si ça peut aider ...

merci d'avance a vous tous !! Smiley cligne


<!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 name="Description" content="" >
<meta name="keywords" content="" >
<meta name="language" content="fr" >
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<script type="text/JavaScript">
<!--
window.onload=montre2;
function montre2(id) {
var d = document.getElementById(id);
for (var i = 1; i<=10; i++) {
if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
}
if (d) {d.style.display='block';}
}
-->
</script>
<!--
ici le type de ligne a inserer pour ce style de menu avec js :
<dd style="display: none;" id="smenu1" onmouseover="javascript:montre2('smenu1');" onmouseout="javascript:montre2();">-->
<style type="text/css">
<!--
body {
	padding: 0;
    margin: 0;
    text-align: center;/**/
    background-image:url(../images/images_site/fond-2010.jpg);/**/
    background-repeat:no-repeat;
    background-position: center top;
    background-color:#19564E;/**/
    font-family:
    "Palatino Linotype",
    Palatino,
    Palladio,
    "URW Palladio L",
    "Book Antiqua",
    Baskerville,
    "Bookman Old Style",
    "Bitstream Charter",
    "Nimbus Roman No9 L",
    Garamond,
    "Apple Garamond",
    "ITC Garamond Narrow",
    "New Century Schoolbook",
    "Century Schoolbook",
    "Century Schoolbook L",
    Georgia,
    serif;
}
#header{
	border: 1px solid red;/**/
	position:relative;
    margin-left: auto;
    margin-right: auto;
	width:950px;
	height:143px;
	z-index:2;
	/*background-image:url(../images/images_site/bandeau2-2010.png); */
	text-align: left;
}
#global{
	border: 1px solid red;/**/
	position:relative;
     margin-left: auto;
     margin-right: auto;
     width: 950px;
	 text-align: left;
    min-height:600px;
	z-index:1;
}
#menu_gauche{
	border: 1px solid red;/**/
	float:left;
	position:relative;
	width: 120px;
	height:395px;
	 text-align: left;
}
#page_principale a{color:#E3DCC2; }
#page_principale{
	border: 1px solid red;/**/
	/*float:left;*/
	color:#E3DCC2;
	padding-top:30px;
	margin-left:140px;
	position:relative;
	left:0px;
	width:790px;
    height:630px;
	z-index:3;
	overflow:auto;/**/
	 /*text-align: left;*/
}
#onglets{
	/*float:right;*/
	position:relative;
	width: 650px;
	/*height:155px;*/
    /*top:-50px;*/
	margin-left:250px;
	text-align: center;
	font-weight:bold;
	z-index:4;
}
#footer{
	border: 1px solid red;/**/
	position:relative;
	width: 950px;
	height:80px;
	clear:both;
	 text-align: left;
}
#menuDeroulant
{
	background: #5B1900;
	width: 600px;
	height: 30px;
	list-style-type: none;
	margin: 0;
	padding: 0;
	border: 0;
	position: absolute;
	top: 0;
	left: 0;
}
#menuDeroulant li
{
	float: left;
	width: 150px;
	margin: 0;
	padding: 0;
	border: 0;
}
#menuDeroulant li a:link, #menuDeroulant li a:visited
{
	display: block;
	height: 1%;
	color: #E3DCC2;
	margin: 0;
	padding: 3px 8px;
	border-right: 1px solid #E3DCC2;
        border-left: 1px solid #E3DCC2;
	text-decoration: none;
}
#menuDeroulant li a:hover { background-color: #000; }
#menuDeroulant li a:active { background-color: #000; }

#menuDeroulant .sousMenu
{
	display: none;
	list-style-type: none;
	margin: 0;
	padding: 0;
	border: 0;
	text-align:left;
}
#menuDeroulant .sousMenu li
{
	float: none;
	margin: 0;
	padding: 0;
	border: 0;
	width: 150px;
	background-color: #5B1900;
	border-top: 1px solid transparent;
	border-right: 1px solid transparent;
}
#menuDeroulant .sousMenu li a:link, #menuDeroulant .sousMenu li a:visited
{
	display: block;
	color: #E3DCC2;
	margin: 0;
	border: 0;
	text-decoration: none;
}
#menuDeroulant .sousMenu li a:hover
{
	background-image: none;
	background-color: #000;
}
#menuDeroulant li:hover > .sousMenu { display: block; }
-->
</style>
<title> Bienvenue </title>

</head>
<body>
 <noscript><h2 align="center">Activez Javascript, il est necessaire pour ce site !<h2></noscript>
<!--[if lt IE 7]> <h2>l'affichage sera bien mieux avec une version plus recente de internet explorer ou bien avec firefox</h2><![endif]-->
<div id="header">
  <div id="onglets">
	<ul id="menuDeroulant"> <!-- -->
		<li><a href="index.php">Accueil</a></li>

		<li><a href="catalogue_realisations.php">Réalisations</a>
			<ul class="sousMenu">
				<li><a href="produits.php?cat=1">&nbsp; Constructions</a></li>
				<li><a href="produits.php?cat=2">&nbsp; Sites Web</a></li>
				<li><a href="produits.php?cat=3">&nbsp; Atelier</a></li>

				<li><a href="produits.php?cat=4">&nbsp; Autres</a></li>	
				<li><a href="produits.php?cat=4">&nbsp; essai</a></li>	
			</ul>
		</li>
		<li><a href="liens.php">Liens</a></li>
		<li><a href="contact.php">Contact</a></li>
	</ul> 

</div>
</div>

<div id="global">
  <div id="menu_gauche"> 
  Dimanche 30 mai 2010
<br><br><b>Dernière réalisation :</b><br>
<a href="detail_produit.php?num=9&numoption=52" border="0"  title="renovation-chambre-09-01.jpg"><img src="images/images_produits/vignettes/renovation-chambre-09-01.jpg" 
title="voir la derniere réalisation" width="80" border="1"></a> 
  </div>
  <!--<div id="menu_droite">
  <br>
  MENU DROITE  
  </div>-->

<div id="page_principale">
<br><br>
<h3 align="center">Bienvenue<br/>

Vous pouvez accéder à mes réalisations<br> 
en cliquant sur l'image en dessous<br/></h3><br/><br/>
<div align="center">
<br><a href="catalogue_realisations.php" title="Le catalogue des réalisations"> 
              <img src="images/images_produits/08-10-10-portail_avant-reparation.jpg" width="350" /></a>
			  <br/>Une réalisation au hasard !
</div>
 </div><!--principal-->
  <div id="footer"> 
<!----><p style="padding-top:20px;" align="center">
<span style="padding-left:100px;"></span></p> 
</div>
</div><!--global-->
</body>
</html>

Laurie-Anne

3 Jun 2010 à 13:53

Bonjour,

Pour IE6 (et pour plein d'autre raisons) il est préférable d'utiliser JavaScript pour réaliser un menu déroulant.

Tu trouvera un tutoriel utilisant JQuery dans la section "Apprendre" du site.

nenes

3 Jun 2010 à 17:34

Une solution alternative qui m'a bien aidée : http://code.google.com/p/ie7-js/

Inclure ce petit javascript permet de corriger certains comportements problématiques d'IE 6

Tu peux voir en détails les effets de ce script sur la page suivante (en) http://www.charlescooke.me.uk/web/lab_notes/ie7_script.html

L'usage de ce script m'a permis d'éviter l'utilisation du javascript dans la création du menu déroulant.

zugolin

3 Jun 2010 à 22:04

il va falloir que je revois ma copie alors ...
pour la section apprendre ... ça ne correspond pas a ce que je veux et je vais re-perdre encore du temps a comprendre ....hummf !
par contre , seulement avec l'insertion du code google, j'ai deja l'affichage de mon menu deroulant sous ie6, mais il me passe mon onglet "contact" sous le l'onglet "liens" , mais c'est deja une avancée ...
merci a vous, je continue ...

Laurie-Anne

3 Jun 2010 à 22:06

nenes a écrit :
L'usage de ce script m'a permis d'éviter l'utilisation du javascript dans la création du menu déroulant.

LOL

L'usage de JavaScript permet d'éviter JavaScript... Si on dit qu'un menu déroulant doit être fait avec JS c'est pas juste pour embêter les gens ^^;

zugolin

15 Jun 2010 à 21:26

bon, j'ai revu la copie avec un autre menu,
manque de pot, j'ai encore un bug sous ie6 et ie7 :
les sous menus s'affichent, mais je n'ai pas le temps de déplacer ma souris, et ils disparaissent ...
hummmfff, decidément! Smiley bawling

c'est une source différente, donc je renvoi tout (j'ai indiqué le lien des sources dans le code)
note 1 :a savoir que, sur le code d'origine, ça fonctionne parfaitement sous ie 6 et 7
note 2 : j'ai mis un menu en image jpg(129X63px, pour info), mais que ça soit le lien image ou le lien texte, les 2 déconnent ...


<!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" lang="fr">
<head>
	<title>Menu horizontal déroulant</title>
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
/*http://skitime.free-h.org/sdz/tuto_menu.html */
/*http://www.siteduzero.com/tutoriel-3-37795-creer-un-menu-horizontal-deroulant-en-css.html*/

/* Pour la démonstration */
body
{
	background-color: #666;
	color: #2C485C;
	margin: auto;
	text-align: center;
	width: 800px;
	font-family: Arial;
	font-size: 12px;
}

div
{
	background-color: #F4F9FD;
	border: 1px solid rgb(234,244,251);
	padding: 20px;
	padding-bottom:40px;
	overflow:hidden;
	margin-right: 5px;
	margin-bottom: 10px;
	margin-top: 20px;
	border: 1px solid #848686;
	text-align: left;
}

.centre
{text-align: center;}
/* Menu */
#menu, #menu ul /* Liste */	
{
	padding : 0; /* pas de marge intérieure */
	margin : 0; /* ni extérieure */
	list-style : none; /* on supprime le style par défault de la liste */
	line-height : 63px; /* on défini une hauteur pour chaque élément */
	text-align : center; /* on centre le texte qui se trouve dans la liste */
}
#menu /* Ensemble du menu */
{
	font-weight : bold; /* on met le texte en gras */
	font-family : Arial; /* on utilise Arial c'est plus beau ^^ */
	font-size : 12px; /* hauteur du texte : 12 pixels */
}
#menu a /* Contenu des listes */
{
	display	: block; /* on change le type d'élément, les liens deviennent des balises de type block */
	padding	: 0; /* aucune marge intérieure */
	/*background : #005aae;  couleur de fond non survolé*/	
	color : #000; /* couleur du texte non survolé*/
	/*text-decoration : none;  on supprime le style par défault des liens (la pluspart du temps = souligné) */
	width : 129px; /* largeur */
}
#menu li /* Elements des listes */	
{ 
	float : left; 
	/* pour ie qui ne reconnait pas "transparent" */
	/* border-right : 1px solid #fff; on met une bordure blanche à droite de chaque élément */
}
/* ie ne reconnaissant pas le sélecteur ">" */
html>body #menu li
{
	border-right: 1px solid transparent ;  /*on met une bordure transparante à droite de chaque élément */
}
#menu li ul /* Sous-listes */
{ 
	position: absolute; /* Position absolu */
	width: 129px; /* Largeur des sous-listes */
	left: -999em; /* Hop, on envoi loin du champ de vision */
}
#menu li ul li /* Eléments de sous-listes */
{
	/* pour ie qui ne reconnait pas "transparent" (comme précédement) */
	/*border-top : 1px solid #fff;  on met une bordure blanche en haut de chaque élément d'une sous liste */
}
/* ie ne reconnaissant pas le sélecteur ">" */
html>body #menu li ul li		
{
	border-top : 1px solid transparent;/*  on met une bordure transparante en haut de chaque élément */
}
#menu li ul ul 
{
	margin		: -63px 0 0 129px ; /* On décale les sous-sous-listes qu'elles ne soient pas au dessus des sous-listes */	
	/* pour ie qui ne reconnait pas "transparent" (comme précédement) */
	border-left	: 1px solid #fff ; /* Petite bordure à gauche pour ne pas coller ... */	
}
/* ie ne reconnaissant pas le sélecteur ">" ... je me répète  [cligne] */
html>body #menu li ul ul		
{
	border-left	: 1px solid transparent ; /* on met une bordure transparante sur la gauche de chaque élément */
}
#menu a:hover, #menu li ul a:hover /* Lorsque la souris passe sur un des liens */	
{
	color: #000; /* texte survolé */
	/*background: #fff; fond survolé*/
}
#menu li:hover ul ul, #menu li.sfhover ul ul /* Sous-sous-listes lorsque la souris passe sur un élément de liste */
{
	left: -999em; /* On expédie les sous-sous-listes hors du champ de vision */
}
#menu li:hover ul, #menu li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul  /* Sous-listes lorsque la souris passe sur un élément de liste ET sous-sous-lites lorsque la souris passe sur un élément de sous-liste */
{
	left: auto; /* Repositionnement normal */
	min-height: 0; /* Corrige un bug */
}
a
{
	text-decoration: none;/**/
	color: #000;
}
a:hover
{
	font-weight: bold;
}
-->
</style>
<script type="text/javascript">
		sfHover = function() {
		var sfEls = document.getElementById("menu").getElementsByTagName("LI");
		for (var i=0; i<sfEls.length; i++) {
			sfEls[i].onmouseover=function() {
				this.className+="sfhover";
			}
			sfEls[i].onmouseout=function() {
				this.className=this.className.replace(new RegExp("sfhover\\b"), "");
			}
		}
		}
		if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>

</head>
<body>
				<ul id="menu">
					<li>
						<a href="#">accueil</a>
					</li>	
					<li>
						<a href="#"><img src="vetement-2010.jpg" border="0"/></a>
						<ul>
							<li><a href="#">connexion</a></li>
							<li><a href="#">inscription</a></li>
						</ul>
					</li>
					<li>
						<a href="#">images</a>
						<ul>
							<li><a href="#">photos</a>
							<ul>
								<li><a href="#">catégorie 1</a></li>
								<li><a href="#">catégorie 2</a></li>
							</ul></li>
							<li><a href="#">vidéos</a></li>
						</ul>
					</li>
					<li>
						<a href="#">téléchargements</a>
						<ul>
							<li><a href="#">vidéos</a></li>
							<li><a href="#">musiques</a></li>
						</ul>
					</li>
					<li>
						<a href="#">plus</a>
						<ul>
							<li><a href="#">forum</a></li>
							<li><a href="#">liens</a></li>
							<li><a href="#">nous contacter</a></li>
							<li><a href="#">recherche</a></li>
						</ul>
					</li>
				</ul><br />
</body>
</html>

merci d'avance !! [/i][/i]
Modifié par zugolin (15 Jun 2010 - 21:27)

jefedp

28 Jul 2010 à 15:36

Bonjour zugolin,

As- tu trouvé la solution au bug ie 6 et 7 ??
J'ai le même code que toi et aussi le même bug : le menu se déroule mais au passage de la souris il disparait...

Merci beaucoup de ton aide !

Sujet clos

CSS et mise en forme, CSS3

Adapter mon menu deroulant pour ie6