Sujet Précédent Sujet Suivant

Transformer un menu horizontal deroulant

Fermé
tricour - 30 avril 2008 à 10:47
 tricour - 30 avril 2008 à 11:03
Bonjour,

voilà mon probleme:
j'ai un menu horizontal deroulant avec sous menus affichés sur une seule ligne horizontale.
Je voudrais dorenavant que les sous menus s'affichent les uns sous les autres et sis possible alignés en dessous du menu principal.
Je en sais pas comment faire.
Ci dessous, mon code:
<table id="bandeau" height="98" width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="105" height="98"><a href="index_gb.php"><img src="images/drapeau.jpg" width="98" height="70" border="0"></a><a href="index.php"><img src="images/logo_seppal.jpg" alt="SEPPAL Accueil" width="98" height="27" border="0"></a></td>
<td><a href="http://www.isitec-lab.com" target="_blank"><img src="images/logo-isitec-xs.jpg" width="93" height="99" border="0"></a></td>
<td width="100%"> <table id="menu_images" width="100%" height="65" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="center" width="111" height="65"><img src="images/secteurs.jpg" alt="" name="secteurs" width="111" height="65" id="secteurs">
<a href="#" style="color:#000066" onMouseOver="
MM_changeProp('menu_secteurs','','style.backgroundColor','7E220A','DIV');
MM_changeProp('menu_secteurs','','style.color','FFFFFF','DIV');
MM_changeProp('menu_machines','','style.backgroundColor','FFFFFF','DIV');
MM_changeProp('menu_machines','','style.color','000066','DIV');
MM_changeProp('menu_reactifs','','style.backgroundColor','FFFFFF','DIV');
MM_changeProp('menu_reactifs','','style.color','000066','DIV');
MM_changeProp('menu_accuvin','','style.backgroundColor','FFFFFF','DIV');
MM_changeProp('menu_accuvin','','style.color','000066','DIV');
MM_changeProp('menu_conso','','style.backgroundColor','FFFFFF','DIV');
MM_changeProp('menu_conso','','style.color','000066','DIV');
MM_changeProp('menu_services','','style.backgroundColor','FFFFFF','DIV');
MM_changeProp('menu_services','','style.color','000066','DIV');
MM_changeProp('menu_partenaires','','style.backgroundColor','FFFFFF','DIV');
MM_changeProp('menu_partenaires','','style.color','000066','DIV');
MM_changeProp('menu_contact','','style.backgroundColor','FFFFFF','DIV');
MM_changeProp('menu_contact','','style.color','000066','DIV');
MM_swapImage('secteurs','','images/secteurs_on.jpg',1);
MM_swapImage('machines','','images/machines.jpg',1);
MM_swapImage('reactifs','','images/reactifs.jpg',1);
MM_swapImage('conso','','images/consomables.jpg',1);
MM_swapImage('accuvin','','images/accuvin.jpg',1);
MM_swapImage('services','','images/services.jpg',1);
MM_swapImage('partenaires','','images/partenaires.jpg',1);
MM_swapImage('contact','','images/contact.jpg',1);
MM_changeProp('submenu_secteurs','','style.display','block','DIV');
MM_changeProp('submenu_machines','','style.display','none','DIV');
MM_changeProp('submenu_reactifs','','style.display','none','DIV');
MM_changeProp('submenu_conso','','style.display','none','DIV');
MM_changeProp('submenu_accuvin','','style.display','none','DIV');
MM_changeProp('submenu_services','','style.display','none','DIV');
MM_changeProp('submenu_partenaires','','style.display','none','DIV')">
<div id="menu_secteurs">Secteurs / Clients</div>
</a></td>
<td><img src="images/spacer.gif"></td>
<td width="76" height="65" align="center"><img src="images/machines.jpg" alt="" name="machines" width="76" height="65" id="machines">
<a href="#" onMouseOver="
MM_changeProp('menu_machines','','style.backgroundColor','7E220A','DIV');
MM_changeProp('menu_machines','','style.color','FFFFFF','DIV');
MM_changeProp('menu_secteurs','','style.backgroundColor','FFFFFF','DIV');
MM_changeProp('menu_secteurs','','style.color','000066','DIV');
MM_changeProp('menu_reactifs','','style.backgroundColor','FFFFFF','DIV');
MM_changeProp('menu_reactifs','','style.color','000066','DIV');
MM_changeProp('menu_accuvin','','style.backgroundColor','FFFFFF','DIV');
MM_changeProp('menu_accuvin','','style.color','000066','DIV');
MM_changeProp('menu_conso','','style.backgroundColor','FFFFFF','DIV');
MM_changeProp('menu_conso','','style.color','000066','DIV');
MM_changeProp('menu_services','','style.backgroundColor','FFFFFF','DIV');
MM_changeProp('menu_services','','style.color','000066','DIV');
MM_changeProp('menu_partenaires','','style.backgroundColor','FFFFFF','DIV');
MM_changeProp('menu_partenaires','','style.color','000066','DIV');
MM_changeProp('menu_contact','','style.backgroundColor','FFFFFF','DIV');
MM_changeProp('menu_contact','','style.color','000066','DIV');
MM_swapImage('secteurs','','images/secteurs.jpg',1);
MM_swapImage('machines','','images/machines_on.jpg',1);
MM_swapImage('reactifs','','images/reactifs.jpg',1);
MM_swapImage('conso','','images/consomables.jpg',1);
MM_swapImage('accuvin','','images/accuvin.jpg',1);
MM_swapImage('services','','images/services.jpg',1);
MM_swapImage('partenaires','','images/partenaires.jpg',1);
MM_swapImage('contact','','images/contact.jpg',1);
MM_changeProp('submenu_secteurs','','style.display','none','DIV');
MM_changeProp('submenu_machines','','style.display','block','DIV');
MM_changeProp('submenu_reactifs','','style.display','none','DIV');
MM_changeProp('submenu_conso','','style.display','none','DIV');
MM_changeProp('submenu_accuvin','','style.display','none','DIV');
MM_changeProp('submenu_services','','style.display','none','DIV');
MM_changeProp('submenu_partenaires','','style.display','none','DIV')">
<div id="menu_machines">Machines</div>
</a></td>
<td><img src="images/spacer.gif"></td>
<td width="81" height="65" align="center"><img src="images/reactifs.jpg" alt="" name="reactifs" width="81" height="65" id="reactifs">
<a href="#" onMouseOver="
MM_changeProp('menu_reactifs','','style.backgroundColor','7E220A','DIV');
MM_changeProp('menu_reactifs','','style.color','FFFFFF','DIV');
MM_changeProp('menu_secteurs','','style.backgroundColor','FFFFFF','DIV');
MM_changeProp('menu_secteurs','','style.color','000066','DIV');
MM_changeProp('menu_machines','','style.backgroundColor','FFFFFF','DIV');
MM_changeProp('menu_machines','','style.color','000066','DIV');
MM_changeProp('menu_accuvin','','style.backgroundColor','FFFFFF','DIV');
MM_changeProp('menu_accuvin','','style.color','000066','DIV');
MM_changeProp('menu_conso','','style.backgroundColor','FFFFFF','DIV');
MM_changeProp('menu_conso','','style.color','000066','DIV');
MM_changeProp('menu_services','','style.backgroundColor','FFFFFF','DIV');
MM_changeProp('menu_services','','style.color','000066','DIV');
MM_changeProp('menu_partenaires','','style.backgroundColor','FFFFFF','DIV');
MM_changeProp('menu_partenaires','','style.color','000066','DIV');
MM_changeProp('menu_contact','','style.backgroundColor','FFFFFF','DIV');
MM_changeProp('menu_contact','','style.color','000066','DIV');
MM_swapImage('secteurs','','images/secteurs.jpg',1);
MM_swapImage('machines','','images/machines.jpg',1);
MM_swapImage('reactifs','','images/reactifs_on.jpg',1);
MM_swapImage('conso','','images/consomables.jpg',1);
MM_swapImage('accuvin','','images/accuvin.jpg',1);
MM_swapImage('services','','images/services.jpg',1);
MM_swapImage('partenaires','','images/partenaires.jpg',1);
MM_swapImage('contact','','images/contact.jpg',1);
MM_changeProp('submenu_secteurs','','style.display','none','DIV');
MM_changeProp('submenu_machines','','style.display','none','DIV');
MM_changeProp('submenu_reactifs','','style.display','block','DIV');
MM_changeProp('submenu_conso','','style.display','none','DIV');
MM_changeProp('submenu_accuvin','','style.display','none','DIV');
MM_changeProp('submenu_services','','style.display','none','DIV');
MM_changeProp('submenu_partenaires','','style.display','none','DIV')">
<div id="menu_reactifs">Réactifs</div>
</a></td>
<td><img src="images/spacer.gif"></td>
<td align="center" width="84" height="65"> <img src="images/consomables.jpg" alt="" name="conso" width="84" height="65" id="conso">
<a href="#" onMouseOver="
MM_changeProp('menu_secteurs','','style.backgroundColor','FFFFFF','DIV');
MM_changeProp('menu_secteurs','','style.color','000066','DIV');
MM_changeProp('menu_machines','','style.backgroundColor','FFFFFF','DIV');
MM_changeProp('menu_machines','','style.color','000066','DIV');
MM_changeProp('menu_reactifs','','style.backgroundColor','FFFFFF','DIV');
MM_changeProp('menu_reactifs','','style.color','000066','DIV');
MM_changeProp('menu_accuvin','','style.backgroundColor','FFFFFF','DIV');
MM_changeProp('menu_accuvin','','style.color','000066','DIV');
MM_changeProp('menu_conso','','style.backgroundColor','7E220A','DIV');
MM_changeProp('menu_conso','','style.color','FFFFFF','DIV');
MM_changeProp('menu_services','','style.backgroundColor','FFFFFF','DIV');
MM_changeProp('menu_services','','style.color','000066','DIV');
MM_changeProp('menu_partenaires','','style.backgroundColor','FFFFFF','DIV');
MM_changeProp('menu_partenaires','','style.color','000066','DIV');
MM_changeProp('menu_contact','','style.backgroundColor','FFFFFF','DIV');
MM_changeProp('menu_contact','','style.color','000066','DIV');
MM_swapImage('secteurs','','images/secteurs.jpg',1);
MM_swapImage('machines','','images/machines.jpg',1);
MM_swapImage('reactifs','','images/reactifs.jpg',1);
MM_swapImage('conso','','images/consomables_on.jpg',1);
MM_swapImage('accuvin','','images/accuvin.jpg',1);
MM_swapImage('services','','images/services.jpg',1);
MM_swapImage('partenaires','','images/partenaires.jpg',1);
MM_swapImage('contact','','images/contact.jpg',1);
MM_changeProp('submenu_secteurs','','style.display','none','DIV');
MM_changeProp('submenu_machines','','style.display','none','DIV');
MM_changeProp('submenu_reactifs','','style.display','none','DIV');
MM_changeProp('submenu_conso','','style.display','block','DIV');
MM_changeProp('submenu_accuvin','','style.display','none','DIV');
MM_changeProp('submenu_services','','style.display','none','DIV');
MM_changeProp('submenu_partenaires','','style.display','none','DIV')">
<div id="menu_conso">Consommables</div>
</a></td>
<td><img src="images/spacer.gif"></td>
<td align="center" width="87" height="65"> <img src="images/accuvin.jpg" alt="" name="accuvin" width="87" height="65" id="accuvin">
<a href="accuvin.php" onMouseOver="
MM_changeProp('menu_secteurs','','style.backgroundColor','FFFFFF','DIV');
MM_changeProp('menu_secteurs','','style.color','000066','DIV');
MM_changeProp('menu_machines','','style.backgroundColor','FFFFFF','DIV');
MM_changeProp('menu_machines','','style.color','000066','DIV');
MM_changeProp('menu_reactifs','','style.backgroundColor','FFFFFF','DIV');
MM_changeProp('menu_reactifs','','style.color','000066','DIV');
MM_changeProp('menu_accuvin','','style.backgroundColor','7E220A','DIV');
MM_changeProp('menu_accuvin','','style.color','FFFFFF','DIV');
MM_changeProp('menu_conso','','style.backgroundColor','FFFFFF','DIV');
MM_changeProp('menu_conso','','style.color','000066','DIV');
MM_changeProp('menu_services','','style.backgroundColor','FFFFFF','DIV');
MM_changeProp('menu_services','','style.color','000066','DIV');
MM_changeProp('menu_partenaires','','style.backgroundColor','FFFFFF','DIV');
MM_changeProp('menu_partenaires','','style.color','000066','DIV');
MM_changeProp('menu_contact','','style.backgroundColor','FFFFFF','DIV');
MM_changeProp('menu_contact','','style.color','000066','DIV');
MM_swapImage('secteurs','','images/secteurs.jpg',1);
MM_swapImage('machines','','images/machines.jpg',1);
MM_swapImage('reactifs','','images/reactifs.jpg',1);
MM_swapImage('conso','','images/consomables.jpg',1);
MM_swapImage('accuvin','','images/accuvin_on.jpg',1);
MM_swapImage('services','','images/services.jpg',1);
MM_swapImage('partenaires','','images/partenaires.jpg',1);
MM_swapImage('contact','','images/contact.jpg',1);
MM_changeProp('submenu_secteurs','','style.display','none','DIV');
MM_changeProp('submenu_machines','','style.display','none','DIV');
MM_changeProp('submenu_reactifs','','style.display','none','DIV');
MM_changeProp('submenu_conso','','style.display','none','DIV');
MM_changeProp('submenu_accuvin','','style.display','none','DIV');
MM_changeProp('submenu_services','','style.display','none','DIV');
MM_changeProp('submenu_partenaires','','style.display','none','DIV')">
<div id="menu_accuvin">Tests Accuvin</div>
</a></td>
<td><img src="images/spacer.gif"></td>
<td align="center" width="75" height="65"><img src="images/services.jpg" alt="" name="services" width="75" height="65" id="services">
<a href="#" onMouseOver="
MM_changeProp('menu_secteurs','','style.backgroundColor','FFFFFF','DIV');
MM_changeProp('menu_secteurs','','style.color','000066','DIV');
MM_changeProp('menu_machines','','style.backgroundColor','FFFFFF','DIV');
MM_changeProp('menu_machines','','style.color','000066','DIV');
MM_changeProp('menu_reactifs','','style.backgroundColor','FFFFFF','DIV');
MM_changeProp('menu_reactifs','','style.color','000066','DIV');
MM_changeProp('menu_accuvin','','style.backgroundColor','FFFFFF','DIV');
MM_changeProp('menu_accuvin','','style.color','000066','DIV');
MM_changeProp('menu_conso','','style.backgroundColor','FFFFFF','DIV');
MM_changeProp('menu_conso','','style.color','000066','DIV');
MM_changeProp('menu_services','','style.backgroundColor','7E220A','DIV');
MM_changeProp('menu_services','','style.color','FFFFFF','DIV');
MM_changeProp('menu_partenaires','','style.backgroundColor','FFFFFF','DIV');
MM_changeProp('menu_partenaires','','style.color','000066','DIV');
MM_changeProp('menu_contact','','style.backgroundColor','FFFFFF','DIV');
MM_changeProp('menu_contact','','style.color','000066','DIV');
MM_swapImage('secteurs','','images/secteurs.jpg',1);
MM_swapImage('machines','','images/machines.jpg',1);
MM_swapImage('reactifs','','images/reactifs.jpg',1);
MM_swapImage('conso','','images/consomables.jpg',1);
MM_swapImage('accuvin','','images/accuvin.jpg',1);
MM_swapImage('services','','images/services_on.jpg',1);
MM_swapImage('partenaires','','images/partenaires.jpg',1);
MM_swapImage('contact','','images/contact.jpg',1);
MM_changeProp('submenu_secteurs','','style.display','none','DIV');
MM_changeProp('submenu_machines','','style.display','none','DIV');
MM_changeProp('submenu_reactifs','','style.display','none','DIV');
MM_changeProp('submenu_conso','','style.display','none','DIV');
MM_changeProp('submenu_accuvin','','style.display','none','DIV');
MM_changeProp('submenu_services','','style.display','block','DIV');
MM_changeProp('submenu_partenaires','','style.display','none','DIV')">
<div id="menu_services">Services</div>
</a></td>
<td><img src="images/spacer.gif"></td>
<td align="center" width="62" height="65"><img src="images/partenaires.jpg" alt="" name="partenaires" width="62" height="65" id="partenaires">
<a href="#" onMouseOver="
MM_changeProp('menu_secteurs','','style.backgroundColor','FFFFFF','DIV');
MM_changeProp('menu_secteurs','','style.color','000066','DIV');
MM_changeProp('menu_machines','','style.backgroundColor','FFFFFF','DIV');
MM_changeProp('menu_machines','','style.color','000066','DIV');
MM_changeProp('menu_reactifs','','style.backgroundColor','FFFFFF','DIV');
MM_changeProp('menu_reactifs','','style.color','000066','DIV');
MM_changeProp('menu_accuvin','','style.backgroundColor','FFFFFF','DIV');
MM_changeProp('menu_accuvin','','style.color','000066','DIV');
MM_changeProp('menu_conso','','style.backgroundColor','FFFFFF','DIV');
MM_changeProp('menu_conso','','style.color','000066','DIV');
MM_changeProp('menu_services','','style.backgroundColor','FFFFFF','DIV');
MM_changeProp('menu_services','','style.color','000066','DIV');
MM_changeProp('menu_partenaires','','style.backgroundColor','7E220A','DIV');
MM_changeProp('menu_partenaires','','style.color','FFFFFF','DIV');
MM_changeProp('menu_contact','','style.backgroundColor','FFFFFF','DIV');
MM_changeProp('menu_contact','','style.color','000066','DIV');
MM_swapImage('secteurs','','images/secteurs.jpg',1);
MM_swapImage('machines','','images/machines.jpg',1);
MM_swapImage('reactifs','','images/reactifs.jpg',1);
MM_swapImage('conso','','images/consomables.jpg',1);
MM_swapImage('accuvin','','images/accuvin.jpg',1);
MM_swapImage('services','','images/services.jpg',1);
MM_swapImage('partenaires','','images/partenaires_on.jpg',1);
MM_swapImage('contact','','images/contact.jpg',1);
MM_changeProp('submenu_secteurs','','style.display','none','DIV');
MM_changeProp('submenu_machines','','style.display','none','DIV');
MM_changeProp('submenu_reactifs','','style.display','none','DIV');
MM_changeProp('submenu_conso','','style.display','none','DIV');
MM_changeProp('submenu_accuvin','','style.display','none','DIV');
MM_changeProp('submenu_services','','style.display','none','DIV');
MM_changeProp('submenu_partenaires','','style.display','block','DIV')">
<div id="menu_partenaires">Partenaires</div>
</a></td>
<td><img src="images/spacer.gif"></td>
<td align="center" width="75" height="65"> <img src="images/contact.jpg" alt="" name="contact" width="75" height="65" id="contact">
<a href="contact.php" onMouseOver="
MM_changeProp('menu_secteurs','','style.backgroundColor','FFFFFF','DIV');
MM_changeProp('menu_secteurs','','style.color','000066','DIV');
MM_changeProp('menu_machines','','style.backgroundColor','FFFFFF','DIV');
MM_changeProp('menu_machines','','style.color','000066','DIV');
MM_changeProp('menu_reactifs','','style.backgroundColor','FFFFFF','DIV');
MM_changeProp('menu_reactifs','','style.color','000066','DIV');
MM_changeProp('menu_accuvin','','style.backgroundColor','FFFFFF','DIV');
MM_changeProp('menu_accuvin','','style.color','000066','DIV');
MM_changeProp('menu_conso','','style.backgroundColor','FFFFFF','DIV');
MM_changeProp('menu_conso','','style.color','000066','DIV');
MM_changeProp('menu_services','','style.backgroundColor','FFFFFF','DIV');
MM_changeProp('menu_services','','style.color','000066','DIV');
MM_changeProp('menu_partenaires','','style.backgroundColor','FFFFFF','DIV');
MM_changeProp('menu_partenaires','','style.color','000066','DIV');
MM_changeProp('menu_contact','','style.backgroundColor','7E220A','DIV');
MM_changeProp('menu_contact','','style.color','FFFFFF','DIV');
MM_swapImage('secteurs','','images/secteurs.jpg',1);
MM_swapImage('machines','','images/machines.jpg',1);
MM_swapImage('reactifs','','images/reactifs.jpg',1);
MM_swapImage('conso','','images/consomables.jpg',1);
MM_swapImage('accuvin','','images/accuvin.jpg',1);
MM_swapImage('services','','images/services.jpg',1);
MM_swapImage('partenaires','','images/partenaires.jpg',1);
MM_swapImage('contact','','images/contact_on.jpg',1);
MM_changeProp('submenu_secteurs','','style.display','none','DIV');
MM_changeProp('submenu_machines','','style.display','none','DIV');
MM_changeProp('submenu_reactifs','','style.display','none','DIV');
MM_changeProp('submenu_conso','','style.display','none','DIV');
MM_changeProp('submenu_accuvin','','style.display','none','DIV');
MM_changeProp('submenu_services','','style.display','none','DIV');
MM_changeProp('submenu_partenaires','','style.display','none','DIV')">
<div id="menu_contact">Contact</div>
</a></td>
<td><img src="images/spacer.gif"></td>
</tr>
</table>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="left" width="100%" height="17">
<div id="submenu_secteurs" align="left" style="display:none">
<div id="submenu"> <a href="secteur_medical_pharma.php">Médical & Pharma</a> | <a href="secteur_oeno.php"> Oenologie</a> | <a href="secteur_agro_alim.php">Agro-alimentaire</a> | <a href="secteur_rech_uni.php">Recherche & Université</a> | <a href="secteur_eauxenviro.php">Eaux & Environnement</a></div>
</div>
<div id="submenu_machines" align="left" style="display:none">
<div id="submenu"> <a href="machine-multiparam.php">Analyseurs biochimiques & cliniques</a> | <a href="machine-flux-continus.php">Flux Continus</a> | <a href="machine-pir.php">P.I.R. & UV/ Visible</a> | <a href="machine-titrateur.php">Titrateurs automatiques</a> | <a href="machine-dedies.php">Analyseurs spécifiques</a> | <a href="machine-granulometre.php">Granulomètre</a></div>
</div>
<div id="submenu_reactifs" align="center" style="display:none">
<div id="submenu"> <a href="param_tous.php">Tous nos paramètres</a> | <a href="param_medical_pharma.php">Paramètres Médicaux</a> | <a href="param_oeno.php">Paramètres Oenologie</a> | <a href="param_eaux_&_environnement.php">Paramètres Eaux et Environnement</a> | <a href="param_agroalimentaire.php">Paramètres Agro-alimentaire</a></div>
</div>
<div id="submenu_conso" align="center" style="display:none">
<div id="submenu"> <a href="conso-seppal.php">Consommables analyseurs SEPPAL</a> | <a href="conso-hors-gamme.php">Consommables analyseurs hors gamme SEPPAL</a> | <a href="flux-continus.php">Consommables pour flux continus</a></div>
</div>
<div id="submenu_accuvin" align="center" style="display:none">
<div id="submenu"> <a href="">menu1</a> | <a href="">menu2</a></div>
</div>
<div id="submenu_services" align="right" style="display:none">
<div id="submenu"> <a href="services.php">Services | Conseils | S.A.V.</a></div>
</div>
<div id="submenu_partenaires" align="right" style="display:none">
<div id="submenu"> <a href="partenaires.php">Partenaires </a> | <a href="distributeurs.php">Distributeurs France & International</a></div>
</div></td>
</tr>
</table></td>
</tr>
</table>

Merci pour votre aide
A voir également:

1 réponse

Réponse 1 / 1
tricour
30 avril 2008 à 11:03
Bonjour,

je vodrais juste preciser quelle balise je dois modifier pour passer de l'affichage en horizontal des sous-menus à l'affichage en vertical. J'ai essayé plein de choses mais cela ne fonctionne pas. Et là je sèche...
Merci
Thomas
0

Discussions similaires

Suppression listes déroulantes
Archa -
Sam -

5 réponses
les entrées et les sortées
oussman -
MarsuGL -

2 réponses
transformer un cable telephone en RJ45
jacot55 -
schlepi -

16 réponses
Supprimer liste déroulante Excel
SamAlex -
b@bd -

8 réponses
Transformer Ethernet en wifi
floflo -
floflo -

4 réponses