11548 sujets

JavaScript, DOM et API Web HTML5

Menu js, section colorée [closed]

Bonjour à tous.
Je suis novice en programmation Web et donc je n'ai pas encore vu le Javascript.
De ce fait, j'ai utilisé un menu trouvé sur le net, mais j'aurais aimé le personnalisé. J'ai réussi a changé la couleur, changer le nombre de section menu, ... C'est un menu de fond blanc où quand la sourie passe sur la section la case devient d'une couleur (chaque section a une couleur différente).

Mon problème est que j'aurais voulu qu'une fois que je suis dans une section (par exemple section "Acceuil") la couleur reste. (en clair, pour savoir où on se trouve dans le site)

Voilà les codes :

... <div id="menu">
<script type="text/javascript" src="ejs_menu_multicolor.js">
</script>
</div> <!-- FIN menu !--> ...




* {padding :0; margin : 0}

body {
	color : white;
	background-color : #0091ac;
}

#wrapper {
	color : white;
	background-color : #0091ac;
}

#bandeau {
	color : black;
	background-color : white;
	height : auto;
	width : 100%;
	border : 0;
	margin : 0;
}

#menu {
	color : black;
	background-color : white;
	margin:0 auto;
	height:auto;
	width:100%;
	}




bgcolor='#FFFFFF';

bgcolor1='#FFD133'; //acceuil';
bgcolor2='#ADFF2F'; //presentation';
bgcolor3='#48D1CC'; //membres';
bgcolor4='#FFB6C1'; //publications';
bgcolor5='#BD8D46'; //seminaires';
bgcolor6='#F13434'; //stages';
bgcolor7='#FF9B04'; //contacts';
bgcolor8='#CD00C7'; //lien';




document.write('<style type="text/css">');
document.write('.popper { POSITION: absolute; VISIBILITY: hidden; z-index:3; }')
document.write('#topgauche { position:absolute; z-index:10; }')
document.write('A:hover.ejsmenu {color:#FFFFFF; text-decoration:none;}')
document.write('A.ejsmenu {color:#FFFFFF; text-decoration:none;}')
document.write('</style>')
document.write('<div style="position:relative;height:25"><DIV class=popper id=topdeck></DIV>');


var nava = (document.layers);
var dom = (document.getElementById);
var iex = (document.all);
if (nava) { skn = document.topdeck }
else if (dom) { skn = document.getElementById("topdeck").style }
else if (iex) { skn = topdeck.style }
skn.top = 24;

function pop(msg,pos)
{
	skn.visibility = "hidden";
	a=true
	skn.left = pos;
	var content ="<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 BGCOLOR=#000000 WIDTH=150><TR><TD><TABLE WIDTH=100% BORDER=0 CELLPADDING=0 CELLSPACING=1>";
	pass = 0
	while (pass < msg.length)
		{
			content += "<TR><TD BGCOLOR="+bgcolor+" onMouseOver=\"this.style.background='"+zgcolor[pass]+"'\" onMouseOut=\"this.style.background='"+bgcolor+"'\" HEIGHT=20><FONT SIZE=1 FACE=\"Verdana\">  "+msg[pass]+"</FONT></TD></TR>";
			pass++;
		}
	content += "</TABLE></TD></TR></TABLE>";
	if (nava)
		{
			skn.document.write(content);
			skn.document.close();
			skn.visibility = "visible";
		}
	else if (dom)
			{
				document.getElementById("topdeck").innerHTML = content;
				skn.visibility = "visible";
			}
		else if (iex)
			{
				document.all("topdeck").innerHTML = content;
				skn.visibility = "visible";
			}
}

function kill()
{
	skn.visibility = "hidden";
}

document.onclick = kill;
document.write('<DIV ID=topgauche><TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 BGCOLOR=#000000 WIDTH=1020><TR><TD><TABLE CELLPADING=0 CELLSPACING=1 BORDER=0 WIDTH=100% HEIGHT=25><TR>')
document.write('<TD WIDTH=12.5% ALIGN=center BGCOLOR='+bgcolor+' onMouseOver="this.style.background=\''+bgcolor1+'\';pop(zlien[7],700)" onMouseOut="this.style.background=\''+bgcolor+'\'"><A onClick="return(false) href=# CLASS=ejsmenu><FONT SIZE=1 FACE="Verdana" href="index.html">Acceuil</FONT></a></TD>')
document.write('<TD WIDTH=12.5% ALIGN=center BGCOLOR='+bgcolor+' onMouseOver="this.style.background=\''+bgcolor2+'\';pop(zlien[0],0)" onMouseOut="this.style.background=\''+bgcolor+'\'"><A onClick="return(false) href=# CLASS=ejsmenu><FONT SIZE=1 FACE="Verdana" href="presentation.html">Pr&eacute;sentation</FONT></a></TD>')
document.write('<TD WIDTH=12.5% ALIGN=center BGCOLOR='+bgcolor+' onMouseOver="this.style.background=\''+bgcolor3+'\';pop(zlien[1],100)" onMouseOut="this.style.background=\''+bgcolor+'\'"><A onClick="return(false) href=# CLASS=ejsmenu><FONT SIZE=1 FACE="Verdana" href="membres.html">Membres</FONT></a></TD>')
document.write('<TD WIDTH=12.5% ALIGN=center BGCOLOR='+bgcolor+' onMouseOver="this.style.background=\''+bgcolor4+'\';pop(zlien[2],200)" onMouseOut="this.style.background=\''+bgcolor+'\'"><A onClick="return(false) href=# CLASS=ejsmenu><FONT SIZE=1 FACE="Verdana" href="publications.html">Publications</FONT></a></TD>')
document.write('<TD WIDTH=12.5% ALIGN=center BGCOLOR='+bgcolor+' onMouseOver="this.style.background=\''+bgcolor5+'\';pop(zlien[3],300)" onMouseOut="this.style.background=\''+bgcolor+'\'"><A onClick="return(false) href=# CLASS=ejsmenu><FONT SIZE=1 FACE="Verdana" href="seminaire.html">S&eacute;minaire</FONT></a></TD>')
document.write('<TD WIDTH=12.5% ALIGN=center BGCOLOR='+bgcolor+' onMouseOver="this.style.background=\''+bgcolor6+'\';pop(zlien[4],400)" onMouseOut="this.style.background=\''+bgcolor+'\'"><A onClick="return(false) href=# CLASS=ejsmenu><FONT SIZE=1 FACE="Verdana" href="stages.html">Stages</FONT></a></TD>')
document.write('<TD WIDTH=12.5% ALIGN=center BGCOLOR='+bgcolor+' onMouseOver="this.style.background=\''+bgcolor7+'\';pop(zlien[5],500)" onMouseOut="this.style.background=\''+bgcolor+'\'"><A onClick="return(false) href=# CLASS=ejsmenu><FONT SIZE=1 FACE="Verdana" href="contacts.html">Contacts</FONT></a></TD>')
document.write('<TD WIDTH=12.4% ALIGN=center BGCOLOR='+bgcolor+' onMouseOver="this.style.background=\''+bgcolor8+'\';pop(zlien[6],600)" onMouseOut="this.style.background=\''+bgcolor+'\'"><A onClick="return(false) href=# CLASS=ejsmenu><FONT SIZE=1 FACE="Verdana" href="liens.html">Liens</FONT></a></TD>')
document.write('</TR></TABLE></TD></TR></TABLE></DIV></div>')



Je sais que la manip' pour la couleur est dans ce dernier code mais le js, j'ai pas encore appris ... Smiley confused

Merci pour votre aide ! Smiley biggrin
Modifié par Fer2Lance (10 Oct 2010 - 17:10)
Ca doit être bien vieillot comme script.

Des tags en Majuscule, des attributs qu'on utilise plus depuis longtemps, un tableau pour formater le menu. Je ne me suis pas senti bien en le regardant, vaut mieux l'oublier.

En plus, s'il s'agit simplement de changer la couleur au passage, une simple classe et un peu de css, ça suffit amplement.

Sinon, sur le site AlsaCreation$, tu as plein d'exemple de menus (très joli en plus)," il suffit de faire une recherche sur "menu".

par exemple :
Menu simple
Menu jQuery
Modèle de menus
Modifié par Borak (08 Oct 2010 - 21:33)
Ah oui tant que ça ... Smiley sweatdrop

Merci de ton aide. Je pense avoir trouvé un menu comme je voulais sur le site. Je ferais ça demain ! Smiley smile

Bonne soirée !
En fait, je préfèrerais ce menu décrit au dessus plutôt que ceux présent en tuto sur le site. J'aime bien le fait que chaque onglet correspond à une couleur différente. Mon seul problème est que je n'arrive pas a faire que quand on se trouve de l'onglet par exemple "liens" et bien la couleurs lien reste active.

Si vous avez une petite idée ... Smiley cligne

EDIT : je vais le faire en CSS en fait ! Smiley lol
Modifié par Fer2Lance (10 Oct 2010 - 17:09)
Sujet clos
Aller à