Probleme avec menu deroulant

HTML5, CSS3, Javascript, support des mobiles... Que penser de votre site ? Vous manquez d'informations pour la construction d'un site qui puisse s'afficher correctement partout ? C'est un problème simple, un peu complexe ? Venez ici !
Répondre
tekken
Arias
Messages : 8
Inscription : 03 mars 2009, 01:22

Probleme avec menu deroulant

Message par tekken »

bonjour à tous,

je suis en train d'essayer de creer un site perso, et depuis 3 jours je me prend la tete avec le menu deroulant horizontal que j'essai de mettre dessus

j'ai telecharger un menu via javascript.com (qui fonctionne quand je le teste) que j'essai d'adapter à ce que je voudrais mais cela ne fonctionne pas une fois que j'ai mis les valeurs perso pour mon site

je vois bien la barre de menu, mais les sous menu ne s'affiche pas ainsi qu'aucun effet au passage de la souris

alors je me resigne à venir demander de l'aide, pourriez vous me donner un coup de main svp car je commence vraiment à saturer

je vous joint ci-dessous la base html que j'ai modifié ainsi que le fichier script

merci d'avance :

base HTML

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="en">
<head>
  <meta content="text/html; charset=ISO-8859-1"
 http-equiv="content-type">
  <title>mon site creations</title>
  <meta content="c&eacute;dric" name="Tekken">
  <script language="Javascript" src="jscript.js"></script>
</head>
<body
 style="color: rgb(255, 0, 0); background-color: rgb(255, 255, 255); background-image: url(file:///C:/Site%20local/Mes%20creations/Montage%20Tekken/monstre%20de%20tendresse.jpg); direction: ltr;">
<div id="ID_MENU0"
 style="border-width: 1px; left: 245px; width: 80px; position: absolute; top: 5px; height: 50px; background-color: rgb(255, 255, 255); color: rgb(255, 0, 0);"
 z-index:1="">
<table bgcolor="#aa0000" border="0" height="50"
 width="80">
  <tbody>
    <tr>
      <td onmouseover="this.bgColor=colorMenu"
 onclick="javascript:window.location='pageaccueil.html'"
 onmouseout="this.bgColor=colorMenuOut" bgcolor="#ffffff">
      <center>Accueil</center>
      </td>
    </tr>
  </tbody>
</table>
</div>
<div id="ID_MENU1" onmouseover="displayMenu11()"
 style="border-width: 1px; left: 323px; width: 80px; position: absolute; top: 5px; height: 50px; background-color: rgb(255, 255, 255); color: rgb(255, 0, 0);"
 onmouseout="hideMenu11()" z-index:1="">
<table bgcolor="#aa0000" border="0" height="50"
 width="150">
  <tbody>
    <tr>
      <td onmouseover="this.bgColor=colorMenuOut"
 onmouseout="this.bgColor=colorMenuOut" bgcolor="#ffffff">
      <center>Mes creations</center>
      </td>
    </tr>
  </tbody>
</table>
</div>
<div id="ID_MENU2" onmouseover="displayMenu21()"
 style="border-width: 1px; left: 471px; width: 150px; position: absolute; top: 5px; height: 50px; background-color: rgb(255, 255, 255); color: rgb(255, 0, 0);"
 onmouseout="hideMenu21()" z-index:1="">
<table bgcolor="#aa0000" border="0" height="50"
 width="150">
  <tbody>
    <tr>
      <td onmouseover="this.bgColor=colorMenuOut"
 onmouseout="this.bgColor=colorMenuOut" bgcolor="#ffffff">
      <center>Mes liens</center>
      </td>
    </tr>
  </tbody>
</table>
</div>
<div id="ID_MENU3" onmouseover="displayMenu31()"
 style="border-width: 1px; left: 619px; width: 150px; position: absolute; top: 5px; height: 50px; background-color: rgb(255, 255, 255); color: rgb(255, 0, 0);"
 onmouseout="hideMenu31()" z-index:1="">
<table bgcolor="#aa0000" border="0" height="50"
 width="150">
  <tbody>
    <tr>
      <td onmouseover="this.bgColor=colorMenuOut"
 onmouseout="this.bgColor=colorMenuOut" bgcolor="#ffffff">
      <center>Telechargement</center>
      </td>
    </tr>
  </tbody>
</table>
</div>
<div id="ID_MENU4" onmouseover="displayMenu41()"
 style="border-width: 1px; left: 767px; width: 150px; position: absolute; top: 5px; height: 50px; background-color: rgb(255, 255, 255); color: rgb(255, 0, 0);"
 onmouseout="hideMenu41()" z-index:1="">
<table bgcolor="#aa0000" border="0" height="50"
 width="150">
  <tbody>
    <tr>
      <td onmouseover="this.bgColor=colorMenuOut"
 onmouseout="this.bgColor=colorMenuOut" bgcolor="#ffffff">
      <center>Livre dor</center>
      </td>
    </tr>
  </tbody>
</table>
</div>
<div id="ID_MENU5" onmouseover="displayMenu51()"
 style="border-width: 1px; left: 915px; width: 80px; position: absolute; top: 5px; height: 50px; background-color: rgb(255, 255, 255); color: rgb(255, 0, 0);"
 onmouseout="hideMenu51()" z-index:1="">
<table bgcolor="#aa0000" border="0" height="50"
 width="80">
  <tbody>
    <tr>
      <td onmouseover="this.bgColor=colorMenuOut"
 onmouseout="this.bgColor=colorMenuOut" bgcolor="#ffffff">
      <center>Contact</center>
      </td>
    </tr>
  </tbody>
</table>
</div>
<div id="ID_MENU11" onmouseover="displayMenu11()"
 style="border-width: 1px; left: 323px; visibility: hidden; width: 150px; position: absolute; top: 53px; height: 180px; background-color: rgb(255, 255, 255); color: rgb(255, 0, 0);"
 onmouseout="hideMenu11()" z-index:1="">
<table bgcolor="#aa0000" border="0" height="180"
 width="150">
  <tbody>
    <tr>
      <td onmouseover="this.bgColor=colorMenu"
 onclick="location='im/mescreationstekken.html'"
 onmouseout="this.bgColor=colorMenuOut" bgcolor="#ffffff">
      <center>Mes creations Tekken</center>
      </td>
    </tr>
    <tr>
      <td onmouseover="this.bgColor=colorMenu"
 onclick="location='im/mescreationsdiverses.html'"
 onmouseout="this.bgColor=colorMenuOut" bgcolor="#ffffff">
      <center>Mes creations diverses</center>
      </td>
    </tr>
    <tr>
      <td onmouseover="this.bgColor=colorMenu"
 onclick="location='im/mestracts.html'"
 onmouseout="this.bgColor=colorMenuOut" bgcolor="#ffffff">
      <center>Mes tracts</center>
      </td>
    </tr>
    <tr>
      <td onmouseover="this.bgColor=colorMenu"
 onclick="location='im/mesbannieres.html'"
 onmouseout="this.bgColor=colorMenuOut" bgcolor="#ffffff">
      <center>Mes bannieres</center>
      </td>
    </tr>
    <tr>
      <td onmouseover="this.bgColor=colorMenu"
 onclick="location='im/meshorloges.html'"
 onmouseout="this.bgColor=colorMenuOut" bgcolor="#ffffff">
      <center>Mes horloges</center>
      </td>
    </tr>
    <tr>
      <td onmouseover="this.bgColor=colorMenu"
 onclick="location='im/mesvideos.html'"
 onmouseout="this.bgColor=colorMenuOut" bgcolor="#ffffff">
      <center>Mes videos</center>
      </td>
    </tr>
    <tr>
      <td onmouseover="this.bgColor=colorMenu"
 onclick="location='im/divers.html'"
 onmouseout="this.bgColor=colorMenuOut" bgcolor="#ffffff">
      <center>Divers</center>
      </td>
    </tr>
    <tr>
      <td onmouseover="this.bgColor=colorMenu"
 onclick="location='im/plus.html'"
 onmouseout="this.bgColor=colorMenuOut" bgcolor="#ffffff">
      <center>plus</center>
      </td>
    </tr>
  </tbody>
</table>
</div>
<div id="ID_MENU21" onmouseover="displayMenu21()"
 style="border-width: 1px; left: 471px; visibility: hidden; width: 150px; position: absolute; top: 53px; height: 60px; background-color: rgb(255, 255, 255); color: rgb(255, 0, 0);"
 onmouseout="hideMenu21()" z-index:1="">
<table bgcolor="#aa0000" border="0" height="60"
 width="150">
  <tbody>
    <tr>
      <td onmouseover="this.bgColor=colorMenu"
 onclick="location='tel/monblog.html'"
 onmouseout="this.bgColor=colorMenuOut" bgcolor="#ffffff">
      <center>Mon blog</center>
      </td>
    </tr>
    <tr>
      <td onmouseover="javascript:displayMenu21_2();"
 onmouseout="javascript:hideMenu21_2();" bgcolor="#ffffff">
      <center>Mon forum</center>
      </td>
    </tr>
    <tr>
      <td onmouseover="this.bgColor=colorMenu"
 onclick="location='tel/monforum.html'"
 onmouseout="this.bgColor=colorMenuOut" bgcolor="#ffffff">
      <center>Site "Association Aidons Nos Molosses</center>
      </td>
    </tr>
  </tbody>
</table>
</div>
<div id="ID_MENU31" onmouseover="displayMenu31()"
 style="border-width: 1px; left: 619px; visibility: hidden; width: 150px; position: absolute; top: 53px; height: 60px; background-color: rgb(255, 255, 255); color: rgb(255, 0, 0);"
 onmouseout="hideMenu31()" z-index:1="">
<table bgcolor="#aa0000" border="0" height="60"
 width="150">
  <tbody>
    <tr>
      <td onmouseover="this.bgColor=colorMenu"
 onclick="location='mul/telechargement1.html'"
 onmouseout="this.bgColor=colorMenuOut" bgcolor="#ffffff">
      <center>Telechargement 1</center>
      </td>
    </tr>
    <tr>
      <td onmouseover="this.bgColor=colorMenu"
 onclick="location='mul/telechargement2.html'"
 onmouseout="this.bgColor=colorMenuOut" bgcolor="#ffffff">
      <center>Telechargement 2</center>
      </td>
    </tr>
  </tbody>
</table>
</div>
<div id="ID_MENU41" onmouseover="displayMenu41()"
 style="border-width: 1px; left: 767px; visibility: hidden; width: 150px; position: absolute; top: 53px; height: 60px; background-color: rgb(255, 255, 255); color: rgb(255, 0, 0);"
 onmouseout="hideMenu41()" z-index:1="">
<table bgcolor="#aa0000" border="0" height="60"
 width="150">
  <tbody>
    <tr>
      <td onmouseover="this.bgColor=colorMenu"
 onclick="location='hyp/livreor1.html'"
 onmouseout="this.bgColor=colorMenuOut" bgcolor="#ffffff">
      <center>Livre d'or 1</center>
      </td>
    </tr>
    <tr>
      <td onmouseover="this.bgColor=colorMenu"
 onclick="location='hyp/livreor2.html'"
 onmouseout="this.bgColor=colorMenuOut" bgcolor="#ffffff">
      <center>Livre d'or 2</center>
      </td>
    </tr>
  </tbody>
</table>
</div>
<div id="ID_MENU51" onmouseover="displayMenu51()"
 style="border-width: 1px; left: 915px; visibility: hidden; width: 150px; position: absolute; top: 53px; height: 60px; background-color: rgb(255, 255, 255); color: rgb(255, 0, 0);"
 onmouseout="hideMenu51()" z-index:1="">
<table bgcolor="#aa0000" border="0" height="60"
 width="150">
  <tbody>
    <tr>
      <td onmouseover="this.bgColor=colorMenu"
 onclick="location='link/contact1.html'"
 onmouseout="this.bgColor=colorMenuOut" bgcolor="#ffffff">
      <center>Contact 1</center>
      </td>
    </tr>
    <tr>
      <td onmouseover="this.bgColor=colorMenu"
 onclick="location='link/contact2.html'"
 onmouseout="this.bgColor=colorMenuOut" bgcolor="#ffffff">
      <center>Contact 2</center>
      </td>
    </tr>
  </tbody>
</table>
</div>
<br style="color: rgb(255, 0, 0);">
<br>
</body>
</html>
fichier script

Code : Tout sélectionner

// VARIABLES GLOBALES


	// Largeur de la fenetre
	var winWidth;

	// Largeur des elts du menu
	var accW = 80;
	var imW = 150;
	var specW = 150;
	var mulW = 150;
	var hypW = 150;
	var linkW = 80;
	var totalW = accW+imW+specW+mulW+hypW+linkW;

	// Position en X des elts du menu
	var accX;
	var imX;
	var specX;
	var mulX;
	var hypX;
	var linkX;
		
	// Couleur du fond
	var bgColor = "#EEEEEE";
	
	
	// Couleur des cases du menu onMouseOn
	var colorMenu = "#777777";
	// Couleur des cases du menu onMouseOut
	var colorMenuOut = "#FFFFFF";
	// Couleur des tableaux
	var colorMenuBorder = "#AA0000";



// INITIALISER LA PAGE
function init()
{
		initValues();
		displayMenu();
		initMenu();
}


// INITIALISER LES VALEURS
function initValues()
{
	winWidth = document.body.clientWidth;
			
	// Position en X des elts du menu
	accX = winWidth/2 - totalW/2 ;
	imX = accX+accW-2;
	specX = imX+imW-2;
	mulX = specX+specW-2;
	hypX = mulX+mulW-2;
	linkX = hypX+hypW-2;		
}


// INIT MENU : cache les sous menu

function initMenu() 
{                    
  if (navigator.appName=='Microsoft Internet Explorer')
  {
       document.all.ID_MENU11.style.visibility='hidden';
       document.all.ID_MENU21.style.visibility='hidden';
       document.all.ID_MENU21_2.style.visibility='hidden';
       document.all.ID_MENU31.style.visibility='hidden';
       document.all.ID_MENU41.style.visibility='hidden';
       document.all.ID_MENU51.style.visibility='hidden';
  }
  else
  {
       document.getElementById('ID_MENU11').style.visibility='hidden';
       document.getElementById('ID_MENU31').style.visibility='hidden';
       document.getElementById('ID_MENU21').style.visibility='hidden';
       document.getElementById('ID_MENU21_2').style.visibility='hidden';
       document.getElementById('ID_MENU41').style.visibility='hidden';
       document.getElementById('ID_MENU51').style.visibility='hidden';
  }
}



// DESSIN DU MENU
function displayMenu()
{
// MENU PRINCIPAL

	document.write(	"<DIV ID='ID_MENU0' style=\"position: absolute; left:"+accX+"px; top:5px; width:"+accW+"px; height:50px;  border-width:1; background-color='#FFFFFF'\" z-index:1 >");
	document.write(	"	<TABLE  BORDER='0' WIDTH='80'  HEIGHT='50' BGCOLOR="+colorMenuBorder+">");
	document.write(	"		<TR>");
	document.write(	"			<TD onmouseover=\"this.bgColor=colorMenu\" onmouseout=\"this.bgColor=colorMenuOut\" onClick=\"javascript:window.location='pageaccueil.html'\"  BGCOLOR="+colorMenuOut+"><CENTER>Accueil</CENTER></TD>");

	document.write(	"		</TR>");
	document.write(	"	</TABLE>");
	document.write(	"</DIV>");


	document.write(	"	<DIV ID='ID_MENU1' style=\"position: absolute; left:"+imX+"px; top:5px; width:"+accW+"px; height:50px; border-width:1; background-color='#FFFFFF'\" z-index:1 onmouseover='displayMenu11()' onmouseout='hideMenu11()'>"); 
	document.write(	"	<TABLE  BORDER='0' WIDTH='150'  HEIGHT='50' BGCOLOR="+colorMenuBorder+">");
	document.write(	"		<TR>");
	document.write(	"			<TD onmouseover=\"this.bgColor=colorMenuOut\" onmouseout=\"this.bgColor=colorMenuOut\"   BGCOLOR="+colorMenuOut+"><CENTER>Mes
Creations
</CENTER></TD>");
	document.write(	"		</TR>");
	document.write(	"	</TABLE>");
	document.write(	"</DIV>");


	document.write(	"	<DIV ID='ID_MENU2' style=\"position: absolute; left:"+specX+"px; top:5px; width:"+specW+"px; height:50px;  border-width:1; background-color='#FFFFFF'\" z-index:1 onmouseover='displayMenu21()' onmouseout='hideMenu21()'>");
	document.write(	"	<TABLE  BORDER='0' WIDTH='150'  HEIGHT='50' BGCOLOR="+colorMenuBorder+">");
	document.write(	"		<TR>");
	document.write(	"			<TD onmouseover=\"this.bgColor=colorMenuOut\" onmouseout=\"this.bgColor=colorMenuOut\"   BGCOLOR="+colorMenuOut+"><CENTER>Mes Liens</CENTER></TD>");

	document.write(	"		</TR>");
	document.write(	"	</TABLE>");
	document.write(	"</DIV>");


	document.write(	"	<DIV ID='ID_MENU3' style=\"position: absolute; left:"+mulX+"px; top:5px; width:"+mulW+"px; height:50px;  border-width:1; background-color='#FFFFFF'\" z-index:1 onmouseover='displayMenu31()' onmouseout='hideMenu31()'>");
	document.write(	"	<TABLE  BORDER='0' WIDTH='150'  HEIGHT='50' BGCOLOR="+colorMenuBorder+">");
	document.write(	"		<TR>");
	document.write(	"			<TD onmouseover=\"this.bgColor=colorMenuOut\" onmouseout=\"this.bgColor=colorMenuOut\"   BGCOLOR="+colorMenuOut+"><CENTER>Telechargements</CENTER></TD>");

	document.write(	"		</TR>");
	document.write(	"	</TABLE>");
	document.write(	"</DIV>");


	document.write(	"	<DIV ID='ID_MENU4' style=\"position: absolute; left:"+hypX+"px; top:5px; width:"+hypW+"px; height:50px;  border-width:1; background-color='#FFFFFF'\" z-index:1 onmouseover='displayMenu41()' onmouseout='hideMenu41()'>");
	document.write(	"	<TABLE  BORDER='0' WIDTH='150'  HEIGHT='50' BGCOLOR="+colorMenuBorder+">");
	document.write(	"		<TR>");
	document.write(	"			<TD onmouseover=\"this.bgColor=colorMenuOut\" onmouseout=\"this.bgColor=colorMenuOut\"   BGCOLOR="+colorMenuOut+"><CENTER>Livre d'or</CENTER></TD>");

	document.write(	"		</TR>");
	document.write(	"	</TABLE>");
	document.write(	"</DIV>");


	document.write(	"	<DIV ID='ID_MENU5' style=\"position: absolute; left:"+linkX+"px; top:5px; width:"+linkW+"px; height:50px;  border-width:1; background-color='#FFFFFF'\" z-index:1 onmouseover='displayMenu51()' onmouseout='hideMenu51()'>");
	document.write(	"	<TABLE  BORDER='0' WIDTH='80'  HEIGHT='50' BGCOLOR="+colorMenuBorder+">");
	document.write(	"		<TR>");
	document.write(	"			<TD onmouseover=\"this.bgColor=colorMenuOut\" onmouseout=\"this.bgColor=colorMenuOut\"   BGCOLOR="+colorMenuOut+"><CENTER>Contact</CENTER></TD>");

	document.write(	"		</TR>");
	document.write(	"	</TABLE>");
	document.write(	"</DIV>");


//<!-- SOUS MENU POUR LES DIFFERENTS TYPES Mes Creations> -->

	document.write(	"	<DIV ID='ID_MENU11' style=\"position: absolute; left:"+imX+"px; top:53px; width:150px; height:180px; border-width:1; background-color='#FFFFFF'\" z-index:1 onmouseover='displayMenu11()' onmouseout='hideMenu11()'>");

	document.write(	"	<TABLE  BORDER='0' WIDTH='150'  HEIGHT='180' BGCOLOR="+colorMenuBorder+">");
	document.write(	"		<TR>");
	document.write(	"			<TD onmouseover=\"this.bgColor=colorMenu\" onmouseout=\"this.bgColor=colorMenuOut\" onClick=\"location='im/mescreationstekken.html'\"  BGCOLOR="+colorMenuOut+">");
	document.write(	"				<CENTER>Mes Creations Tekken</CENTER>");
	document.write(	"			</TD>");
	document.write(	"		</TR>");
	document.write(	"		<TR>");
	document.write(	"			<TD onmouseover=\"this.bgColor=colorMenu\" onmouseout=\"this.bgColor=colorMenuOut\" onClick=\"location='im/mescreationsdiverses.html'\"  BGCOLOR="+colorMenuOut+">");
	document.write(	"				<CENTER>Mes Creations Diverses</CENTER>");
	document.write(	"			</TD>");
	document.write(	"		</TR>");
	document.write(	"		<TR>");
	document.write(	"			<TD onmouseover=\"this.bgColor=colorMenu\" onmouseout=\"this.bgColor=colorMenuOut\" onClick=\"location='im/mestracts.html'\"  BGCOLOR="+colorMenuOut+">");
	document.write(	"				<CENTER>Mes Tracts</CENTER>");
	document.write(	"			</TD>");
			
	document.write(	"		</TR>");
	document.write(	"		<TR>");
	document.write(	"			<TD onmouseover=\"this.bgColor=colorMenu\" onmouseout=\"this.bgColor=colorMenuOut\" onClick=\"location='im/mesbannieres.html'\"  BGCOLOR="+colorMenuOut+">");
	document.write(	"				<CENTER>Mes Bannieres</CENTER>");
	document.write(	"			</TD>");
			
	document.write(	"		</TR>");
	document.write(	"		<TR>");
	document.write(	"			<TD onmouseover=\"this.bgColor=colorMenu\" onmouseout=\"this.bgColor=colorMenuOut\" onClick=\"location='im/meshorloges.html'\"  BGCOLOR="+colorMenuOut+">");
	document.write(	"				<CENTER>Mes Horloges</CENTER>");
	document.write(	"			</TD>");
			
	document.write(	"		</TR>");
	document.write(	"		<TR>");
	document.write(	"			<TD onmouseover=\"this.bgColor=colorMenu\" onmouseout=\"this.bgColor=colorMenuOut\" onClick=\"location='im/mesvideos.html'\"  BGCOLOR="+colorMenuOut+">");
	document.write(	"				<CENTER>Mes Videos</CENTER>");
	document.write(	"			</TD>");
			
	document.write(	"		</TR>");
	document.write(	"		<TR>");
	document.write(	"			<TD onmouseover=\"this.bgColor=colorMenu\" onmouseout=\"this.bgColor=colorMenuOut\" onClick=\"location='im/divers.html'\"  BGCOLOR="+colorMenuOut+">");
	document.write(	"				<CENTER>Divers</CENTER>");
	document.write(	"			</TD>");
			
	document.write(	"		</TR>");
	document.write(	"		<TR>");
	document.write(	"			<TD onmouseover=\"this.bgColor=colorMenu\" onmouseout=\"this.bgColor=colorMenuOut\" onClick=\"location='im/plus.html'\"  BGCOLOR="+colorMenuOut+">");
	document.write(	"				<CENTER>Plus</CENTER>");
	document.write(	"			</TD>");
			
	document.write(	"		</TR>");
	document.write(	"	</TABLE>");

	document.write(	"</DIV>");



//<!-- SOUS MENU POUR LES IMAGES Mes Liens -->

	document.write(	"	<DIV ID='ID_MENU21' style=\"position: absolute; left:"+specX+"px; top:53px; width:150px; height:60px; border-width:1; background-color='#FFFFFF'\" z-index:1 onmouseover='displayMenu21()' onmouseout='hideMenu21()'>");

	document.write(	"	<TABLE  BORDER='0' WIDTH='150'  HEIGHT='60' BGCOLOR="+colorMenuBorder+">");
	document.write(	"		<TR>");
	document.write(	"			<TD onmouseover=\"this.bgColor=colorMenu\" onmouseout=\"this.bgColor=colorMenuOut\" onClick=\"location='tel/monblog.html'\"  BGCOLOR="+colorMenuOut+">");
	document.write(	"				<CENTER>Mon Blog</CENTER>");
	document.write(	"			</TD>");
	document.write(	"		</TR>");
	document.write(	"		<TR>");
	document.write(	"			<TD onmouseover=\"this.bgColor=colorMenu\" onmouseout=\"this.bgColor=colorMenuOut\" onClick=\"location='tel/monforum.html'\"  BGCOLOR="+colorMenuOut+">");
	document.write(	"				<CENTER>Mon Forum</CENTER>");
	document.write(	"			</TD>");
	document.write(	"		</TR>");
	document.write(	"		<TR>");
	document.write(	"			<TD onmouseover=\"this.bgColor=colorMenu\" onmouseout=\"this.bgColor=colorMenuOut\" onClick=\"location='tel/siteassociationaidonsnosmolosses.html'\"  BGCOLOR="+colorMenuOut+">");
	document.write(	"				<CENTER>Site Association "Aidons Nos Molosses"</CENTER>");
	document.write(	"			</TD>");
	document.write(	"		</TR>");

	document.write(	"	</TABLE>");

	document.write(	"</DIV>");



//<!-- SOUS MENU POUR LES IMAGES Telechargements> -->

	document.write(	"	<DIV ID='ID_MENU31' style=\"position: absolute; left:"+mulX+"px; top:53px; width:150px; height:60px; border-width:1; background-color='#FFFFFF'\" z-index:1 onmouseover='displayMenu31()' onmouseout='hideMenu31()'>");

	document.write(	"	<TABLE  BORDER='0' WIDTH='150'  HEIGHT='60' BGCOLOR="+colorMenuBorder+">");
	document.write(	"		<TR>");
	document.write(	"			<TD onmouseover=\"this.bgColor=colorMenu\" onmouseout=\"this.bgColor=colorMenuOut\" onClick=\"location='mul/telechargement1.html'\"  BGCOLOR="+colorMenuOut+">");
	document.write(	"				<CENTER>Telechargement 1</CENTER>");
	document.write(	"			</TD>");
	document.write(	"		</TR>");
	document.write(	"		<TR>");
	document.write(	"			<TD onmouseover=\"this.bgColor=colorMenu\" onmouseout=\"this.bgColor=colorMenuOut\" onClick=\"location='mul/telechargement2.html'\"  BGCOLOR="+colorMenuOut+">");
	document.write(	"				<CENTER>Telechargement 2</CENTER>");
	document.write(	"			</TD>");
	document.write(	"		</TR>");

	document.write(	"	</TABLE>");

	document.write(	"</DIV>");



//<!-- SOUS MENU POUR LES IMAGES Livre d'or> -->

	document.write(	"	<DIV ID='ID_MENU41' style=\"position: absolute; left:"+hypX+"px; top:53px; width:150px; height:60px; border-width:1; background-color='#FFFFFF'\" z-index:1 onmouseover='displayMenu41()' onmouseout='hideMenu41()'>");

	document.write(	"	<TABLE  BORDER='0' WIDTH='150'  HEIGHT='60' BGCOLOR="+colorMenuBorder+">");
	document.write(	"		<TR>");
	document.write(	"			<TD onmouseover=\"this.bgColor=colorMenu\" onmouseout=\"this.bgColor=colorMenuOut\" onClick=\"location='hyp/livreor1.html'\"  BGCOLOR="+colorMenuOut+">");
	document.write(	"				<CENTER>Livre d'or 1</CENTER>");
	document.write(	"			</TD>");
	document.write(	"		</TR>");
	document.write(	"		<TR>");
	document.write(	"			<TD onmouseover=\"this.bgColor=colorMenu\" onmouseout=\"this.bgColor=colorMenuOut\" onClick=\"location='hyp/livreor2.html'\"  BGCOLOR="+colorMenuOut+">");
	document.write(	"				<CENTER>Livre d'or 2</CENTER>");
	document.write(	"			</TD>");
	document.write(	"		</TR>");

	document.write(	"	</TABLE>");

	document.write(	"</DIV>");


//<!-- SOUS MENU POUR LES Contact -->

	document.write(	"	<DIV ID='ID_MENU51' style=\"position: absolute; left:"+linkX+"px; top:53px; width:150px; height:60px; border-width:1; background-color='#FFFFFF'\" z-index:1 onmouseover='displayMenu51()' onmouseout='hideMenu51()'>");

	document.write(	"	<TABLE  BORDER='0' WIDTH='150'  HEIGHT='60' BGCOLOR="+colorMenuBorder+">");
	document.write(	"		<TR>");
	document.write(	"			<TD onmouseover=\"this.bgColor=colorMenu\" onmouseout=\"this.bgColor=colorMenuOut\" onClick=\"location='link/contact1.html'\"  BGCOLOR="+colorMenuOut+">");
	document.write(	"				<CENTER>Contact 1</CENTER>");
	document.write(	"			</TD>");
	document.write(	"		</TR>");
	document.write(	"		<TR>");
	document.write(	"			<TD onmouseover=\"this.bgColor=colorMenu\" onmouseout=\"this.bgColor=colorMenuOut\" onClick=\"location='link/contact2.html'\"  BGCOLOR="+colorMenuOut+">");
	document.write(	"				<CENTER>Contact 2</CENTER>");
	document.write(	"			</TD>");
	document.write(	"		</TR>");

	document.write(	"	</TABLE>");

	document.write(	"</DIV>");

	document.write(	"<BR><BR><BR><BR>	");



//<!-- SOUS SOUS MENU POUR LES Mes Liens 2 -->

	var satX = specX+specW-2;
	document.write(	"	<DIV ID='ID_MENU21_2' style=\"position: absolute; left:"+satX+"px; top:77px; width:150px; height:60px; border-width:1; background-color='#FFFFFF'\" z-index:1 onmouseover='displayMenu21_2();displayMenu21();' onmouseout='hideMenu21_2();hideMenu21();'>");

	document.write(	"	<TABLE  BORDER='0' WIDTH='150'  HEIGHT='60' BGCOLOR="+colorMenuBorder+">");
	document.write(	"		<TR>");
	document.write(	"			<TD onmouseover=\"this.bgColor=colorMenu\" onmouseout=\"this.bgColor=colorMenuOut\" onClick=\"location='tel/mesliens21.html'\"  BGCOLOR="+colorMenuOut+">");
	document.write(	"				<CENTER>Mes Liens 2.1</CENTER>");
	document.write(	"			</TD>");
	document.write(	"		</TR>");
	document.write(	"		<TR>");
	document.write(	"			<TD onmouseover=\"this.bgColor=colorMenu\" onmouseout=\"this.bgColor=colorMenuOut\" onClick=\"location='tel/mesliens22.html'\"  BGCOLOR="+colorMenuOut+">");
	document.write(	"				<CENTER>Mes Liens 2.2</CENTER>");
	document.write(	"			</TD>");
	document.write(	"		</TR>");
	document.write(	"		<TR>");
	document.write(	"			<TD onmouseover=\"this.bgColor=colorMenu\" onmouseout=\"this.bgColor=colorMenuOut\" onClick=\"location='tel/mesliens23.html'\"  BGCOLOR="+colorMenuOut+">");
	document.write(	"				<CENTER>Mes Liens 2.3</CENTER>");
	document.write(	"			</TD>");
	document.write(	"		</TR>");
	document.write(	"		<TR>");
	document.write(	"			<TD onmouseover=\"this.bgColor=colorMenu\" onmouseout=\"this.bgColor=colorMenuOut\" onClick=\"location='tel/mesliens24.html'\"  BGCOLOR="+colorMenuOut+">");
	document.write(	"				<CENTER>Mes Liens 2.4</CENTER>");
	document.write(	"			</TD>");
	document.write(	"		</TR>");

	document.write(	"	</TABLE>");

	document.write(	"</DIV>");




}


// FONCTIONS POUR LES TYPES Mes Creations

function displayMenu11() 
{                     
  if (navigator.appName=='Microsoft Internet Explorer')
  {
       document.all.ID_MENU11.style.visibility='visible';
  }
  else
  {
       document.getElementById('ID_MENU11').style.visibility='visible';
  }
}		

	
function hideMenu11() 
{                    
  if (navigator.appName=='Microsoft Internet Explorer')
  {
       document.all.ID_MENU11.style.visibility='hidden';
  }
  else
  {
       document.getElementById('ID_MENU11').style.visibility='hidden';
  }
}


// FONCTIONS POUR Mes Liens

function displayMenu21() 
{                     
  if (navigator.appName=='Microsoft Internet Explorer')
  {
       document.all.ID_MENU21.style.visibility='visible';
  }
  else
  {
       document.getElementById('ID_MENU21').style.visibility='visible';
  }
}		

	
function hideMenu21() 
{                    
  if (navigator.appName=='Microsoft Internet Explorer')
  {
       document.all.ID_MENU21.style.visibility='hidden';
  }
  else
  {
       document.getElementById('ID_MENU21').style.visibility='hidden';
  }
}



// FONCTIONS POUR Telechargements

function displayMenu31() 
{                     
  if (navigator.appName=='Microsoft Internet Explorer')
  {
       document.all.ID_MENU31.style.visibility='visible';
  }
  else
  {
       document.getElementById('ID_MENU31').style.visibility='visible';
  }
}		

	
function hideMenu31() 
{                    
  if (navigator.appName=='Microsoft Internet Explorer')
  {
       document.all.ID_MENU31.style.visibility='hidden';
  }
  else
  {
       document.getElementById('ID_MENU31').style.visibility='hidden';
  }
}



// FONCTIONS POUR Livre d'or

function displayMenu41() 
{                     
  if (navigator.appName=='Microsoft Internet Explorer')
  {
       document.all.ID_MENU41.style.visibility='visible';
  }
  else
  {
       document.getElementById('ID_MENU41').style.visibility='visible';
  }
}		

	
function hideMenu41() 
{                    
  if (navigator.appName=='Microsoft Internet Explorer')
  {
       document.all.ID_MENU41.style.visibility='hidden';
  }
  else
  {
       document.getElementById('ID_MENU41').style.visibility='hidden';
  }
}


// FONCTIONS POUR Contact

function displayMenu51() 
{                     
  if (navigator.appName=='Microsoft Internet Explorer')
  {
       document.all.ID_MENU51.style.visibility='visible';
  }
  else
  {
       document.getElementById('ID_MENU51').style.visibility='visible';
  }
}		

	
function hideMenu51() 
{                    
  if (navigator.appName=='Microsoft Internet Explorer')
  {
       document.all.ID_MENU51.style.visibility='hidden';
  }
  else
  {
       document.getElementById('ID_MENU51').style.visibility='hidden';
  }
}


// FONCTIONS POUR Mes Liens 2

function displayMenu21_2() 
{                     
  if (navigator.appName=='Microsoft Internet Explorer')
  {
       document.all.ID_MENU21_2.style.visibility='visible';
  }
  else
  {
       document.getElementById('ID_MENU21_2').style.visibility='visible';
  }
}		

	
function hideMenu21_2() 
{                    
  if (navigator.appName=='Microsoft Internet Explorer')
  {
       document.all.ID_MENU21_2.style.visibility='hidden';
  }
  else
  {
       document.getElementById('ID_MENU21_2').style.visibility='hidden';
  }
}
Message envoyé avec : Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; GTB5; .NET CLR 1.0.3705; .NET CLR 1.1.4322; Media Center PC 4.0; InfoPath.2)
Haut
Fabrice.Tres.Net
Tyrannosaurus Rex
Messages : 2390
Inscription : 26 juin 2006, 12:50

Message par Fabrice.Tres.Net »

Puisque tu débutes ton site, il serait peut-être bon de faire un site sans tableau ce qui présente l'avantage d'être maintenable, évolutif,...

Pour les menus déroulants, cela se fait très bien en CSS, avec éventuellement un petit javascript pour le rendre compatible avec les navigateurs ne respectant pas les normes et standard comme IE.
L'avantage, c'est qu'on peut faire de simples menus sous forme de liste html dans un premier temps, puis on complète le css pour le rendre déroulant et finalement on ajoute le javascript.
Mais dès la 1ere étape on a quelque chose d'opérationnelle qui correspondra à la vision de ceux (10 à 15%) qui désactivent le javascript.
Haut
Zefling
Tyrannosaurus Rex
Messages : 2577
Inscription : 21 déc. 2004, 03:45

Message par Zefling »

Fabrice.Tres.Net a écrit :Mais dès la 1ere étape on a quelque chose d'opérationnelle qui correspondra à la vision de ceux (10 à 15%) qui désactivent le javascript.
:roll: Je me demande, avec l'AJAX c'est encore vivable de surfer sur le net sans JS ?

Pour le reste, c'est quand même mieux de faire un menu en CSS. Surtout que c'est très largement faisable. Puis il y n'a pas de support de IE6, tu peux toujours milité contre la mort de ce navigateur antédiluvien. :twisted:


Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr-FR; rv:1.9.0.6) Gecko/2009011913 Firefox/3.0.6 (.NET CLR 3.5.30729)
Mon blog de dév web ― Thème pour le forum Geckozone ― Le clavier Latin-9 fr sous Windows ― Raccourcis clavier pour Firefox
Debian 8 KDE avec Firefox & Nightly
Haut
tekken
Arias
Messages : 8
Inscription : 03 mars 2009, 01:22

Message par tekken »

malheureusement je ne suis pas non plus tres fort en feuille css

si quelqu'un est capable de me l'editer je suis preneur


pour ce qui est des menus simple, j'avais reussis a en faire un en vertical, avec quelques sous menus, mais il faut que je clique 2 a 3 fois sur le "menu parent" pour afficher les sous menus ( si vous avez une solutions pour ca aussi je suis preneur)

Message envoyé avec : Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; GTB5; .NET CLR 1.0.3705; .NET CLR 1.1.4322; Media Center PC 4.0; InfoPath.2)
Haut
calimo
Animal mythique
Messages : 14118
Inscription : 26 déc. 2003, 11:51

Message par calimo »

Beurk, c'est bien le pire menu déroulant que l'on puisse faire avec tableaux et détections de navigateurs !

Un petit tuto pour un menu tout simple mais efficace :
http://tutorials.alsacreations.com/deroulant/

PS : il existe toujours une portion d'utilisateurs qui ne peuvent pas avoir accès à javascript, pour diverses raisons, ou que ça gêne particulièrement. Le fait que plein de sites utilisent ajax n'est pas une raison pour que son propre site ne soit pas accessible :roll:
Haut
Asumbaa
Tyrannosaurus Rex
Messages : 2411
Inscription : 08 déc. 2004, 20:07

Message par Asumbaa »

Salut,

+1 pour le lien pointé par Calimo. Si tu ne maîtrises pas tous les aspects du développement, ce qui est compréhensible, fais confiance à des ressources de qualité (et Alsacreations en est une)


Modération :
Pourras-tu éditer ton premier message et rajouter des balises "code" autour de tes codes, car là comme tu peux le constater, c'est pas très lisible. Merci.

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9) Gecko/2008052906 Firefox/3.0 (.NET CLR 3.5.30729)
Haut
tekken
Arias
Messages : 8
Inscription : 03 mars 2009, 01:22

Message par tekken »

Asumbaa a écrit :Modération :
Pourras-tu éditer ton premier message et rajouter des balises "code" autour de tes codes, car là comme tu peux le constater, c'est pas très lisible. Merci.

euh désolé à quel endroit, sur le fichier script ou le html ?

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9) Gecko/2008052906 Firefox/3.0 (.NET CLR 3.5.30729)
Haut
Asumbaa
Tyrannosaurus Rex
Messages : 2411
Inscription : 08 déc. 2004, 20:07

Message par Asumbaa »

tekken a écrit :
Asumbaa a écrit :Modération :
Pourras-tu éditer ton premier message et rajouter des balises "code" autour de tes codes, car là comme tu peux le constater, c'est pas très lisible. Merci.
euh désolé à quel endroit, sur le fichier script ou le html ?
Les deux :wink: Je l'ai fait pour toi, du coup.

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9) Gecko/2008052906 Firefox/3.0 (.NET CLR 3.5.30729)
Haut
tekken
Arias
Messages : 8
Inscription : 03 mars 2009, 01:22

Message par tekken »

merci calimo pour ton lien qui m'a permis de realiser mon menu

maintenant si je veux rajouter des "sous menus" au "sous menus" que faut il que je rajoute dans ma feuille css ?

Message envoyé avec : Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; GTB5; .NET CLR 1.0.3705; .NET CLR 1.1.4322; Media Center PC 4.0; InfoPath.2)
Haut
calimo
Animal mythique
Messages : 14118
Inscription : 26 déc. 2003, 11:51

Message par calimo »

Faire des sous-sous-menus (si j'ai bien compris) n'est certainement pas une bonne idée, c'est beaucoup trop compliqué, tu devrais plutôt t'efforcer de simplifier l'organisation de ton site.

Si c'est strictement nécessaire, tu dois adopter la même stratégie, à savoir que le bloc est caché au démarrage, puis affiché au survol de l'élément correspondant du sous-menu ;-)
Haut
tekken
Arias
Messages : 8
Inscription : 03 mars 2009, 01:22

Message par tekken »

non ce n'est pas du tout obligatoire, c'était surtout pour apprendre a le faire (pour mes connaissance perso) mais si c'est vraiment trop compliquer je ne vais pas chercher plus loin.

pour information sinon c'est bien juste dans la feuille de style qu'il faut travailler ou faut il adapter un script ?

Message envoyé avec : Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; GTB5; .NET CLR 1.0.3705; .NET CLR 1.1.4322; Media Center PC 4.0; InfoPath.2)
Haut
calimo
Animal mythique
Messages : 14118
Inscription : 26 déc. 2003, 11:51

Message par calimo »

Cela dépend du script.
Je vois que le lien que je t'ai donné n'est malheureusement plus valable, donc je ne sais pas te dire comme ça. Est-ce que ta page est en ligne pour regarder ?
Haut
chinon37
Animal mythique
Messages : 5319
Inscription : 21 mars 2005, 10:17

Message par chinon37 »

A défaut du tuto retiré de chez alsacreations, en voici un autre, très "mode" ces derniers temps: http://www.alsacreations.com/actu/lire/ ... lants.html
Préferez Kompozer 0.8 à Nvu
Défendons nos valeurs, adhérons à l'APRIL
La Démocratie, c'est quand on frappe à votre porte à 6h00 du matin, et que c'est le laitier.
Haut
tekken
Arias
Messages : 8
Inscription : 03 mars 2009, 01:22

Message par tekken »

voila le lien : http://creationtekken.gofreeserve.com/

Message envoyé avec : Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; GTB5; .NET CLR 1.0.3705; .NET CLR 1.1.4322; Media Center PC 4.0; InfoPath.2)
Haut
calimo
Animal mythique
Messages : 14118
Inscription : 26 déc. 2003, 11:51

Message par calimo »

Je pense qu'en procédant exactement de la même façon, c'est à dire en définissant les javascript:show('smenuX'); avec les id correspondant dans les sous-menus, ça devrait fonctionner. Mais le meilleur moyen de le savoir, c'est d'essayer ;-)
Haut
Répondre

Revenir à « Développement web »

Qui est en ligne ?

Utilisateurs parcourant ce forum : Aucun utilisateur inscrit et 1 invité