28220 sujets

CSS et mise en forme, CSS3

[Résolu] Menu anarchique (vraiment ;o))

Bonjour,
nouveau dans le monde de css, j'ai téléchargé http://css.alsacreations.com/xmedia/exemples/deroulant/menu-anarchique.htm et tente de l'adapter (voir http://cjoint.com/?evlFcQhzPw).
J'ai travaillé par analogie pour passer de quatre à sept menus et les ai obtenus. Mais les trois que j'ai rajoutés ne possèdent pas le joli petit cadre des autres ;o((
Le pb vient-il de ce qui est intégré dans <head> :
window.onload=montre;
function montre(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';}
}

Si oui (et sinon d'ailleurs), pourriez-vous m'indiquez la marche à suivre ?

D'avance merci,
Modifié par GwenArBreizhou (21 Apr 2005 - 23:05)
Salutation parmi nous Smiley smile
Je pense que tu devrais aller lire "Aide/Règles" de ce forum.
Cette lecture te permettera de mettre en forme tes messages.
Par exemple si tu pouvais mettre ton script JS entre les balises [code], ca permetterai une meilleure lecture aux autres…


Pour ton problème, je ne pense pas que le problème vienne du JS vu que tous les menus se déroulent, je pense que ça vient du css. J'essaye de comprendre...


PS: Revoit ton lien sur ta page
Smiley smile
Voila j'ai trouvé Smiley lol
Tous les menus sont dans la balise 

<dl id="menu">
</dl>

Enfin pas tous les menus, que les 4 premiers. Toi tu as oublié de mettre tes menus dans cette balise.

Ah oué, en ft tu as mis la balise de fin "</dl>" mais tu n'as pas supprimé l'autre.

Voici ton code Xhtml correcte 

<dl id="menu">
	<div id="menu1">
		<dt onmouseover="javascript:montre('smenu1');"><a href="#">Cinquième</a></dt>
			<dd style="display: block;" id="smenu1" onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre();">
				<ul>
					<li><a href="#">Cours, TD, TP</a></li>
					<li><a href="#">Exercices interactifs</a></li>
					<li><a href="#">Animations</a></li>
					<li><a href="#">Logiciels</a></li>
					<li><a href="#">Liens</a></li>
				</ul>
			</dd>
  </div>	
			
		<div id="menu2">	
		<dt onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre();">Quatrième</dt>
			<dd style="display: none;" id="smenu2" onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre();">
				<ul>
					<li><a href="#">Cours, TD, TP</a></li>
					<li><a href="#">Exercices interactifs</a></li>
					<li><a href="#">Animations</a></li>
					<li><a href="#">Logiciels</a></li>
					<li><a href="#">Liens</a></li>
				</ul>
			</dd>	
		</div>

		<div id="menu3">
		<dt onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre();">Troisième</dt>
			<dd style="display: none;" id="smenu3" onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre();">
				<ul>
					<li><a href="#">Cours, TD, TP</a></li>
					<li><a href="#">Exercices interactifs</a></li>
					<li><a href="#">Animations</a></li>
					<li><a href="#">Logiciels</a></li>
					<li><a href="#">Liens</a></li>
				</ul>
			</dd>
		</div>

		<div id="menu4">
		<dt onmouseover="javascript:montre('smenu4');" onmouseout="javascript:montre();">Seconde</dt>
			<dd style="display: none;" id="smenu4" onmouseover="javascript:montre('smenu4');" onmouseout="javascript:montre();">
				<ul>
					<li><a href="#">Cours, TD, TP</a></li>
					<li><a href="#">Exercices interactifs</a></li>
					<li><a href="#">Animations</a></li>
					<li><a href="#">Logiciels</a></li>
					<li><a href="#">Liens</a></li>
				</ul>
			</dd>
		</div>

	<div id="menu5">	
		<dt onmouseover="javascript:montre('smenu5');" onmouseout="javascript:montre();">Première L</dt>
			<dd style="display: none;" id="smenu5" onmouseover="javascript:montre('smenu5');" onmouseout="javascript:montre();">
				<ul>
					<li><a href="#">Cours, TD, TP</a></li>
					<li><a href="#">Exercices interactifs</a></li>
					<li><a href="#">Animations</a></li>
					<li><a href="#">Logiciels</a></li>
					<li><a href="#">Liens</a></li>
				</ul>
			</dd>	
</div>

		<div id="menu6">
		<dt onmouseover="javascript:montre('smenu6');" onmouseout="javascript:montre();">Première S</dt>
			<dd style="display: none;" id="smenu6" onmouseover="javascript:montre('smenu6');" onmouseout="javascript:montre();">
				<ul>
					<li><a href="#">Cours, TD, TP</a></li>
					<li><a href="#">Exercices interactifs</a></li>
					<li><a href="#">Animations</a></li>
					<li><a href="#">Logiciels</a></li>
					<li><a href="#">Liens</a></li>
				</ul>
			</dd>
		</div>

		<div id="menu7">
		<dt onmouseover="javascript:montre('smenu7');" onmouseout="javascript:montre();">Terminale</dt>
			<dd style="display: none;" id="smenu7" onmouseover="javascript:montre('smenu7');" onmouseout="javascript:montre();">
				<ul>
					<li><a href="#">Cours, TD, TP</a></li>
					<li><a href="#">Exercices interactifs</a></li>
					<li><a href="#">Animations</a></li>
					<li><a href="#">Logiciels</a></li>
					<li><a href="#">Liens</a></li>
				</ul>
			</dd>
		</div>
</dl>


Normalement ca dois marché Smiley cligne
Sujet clos
Aller à