Menu Display

Yourgod2000

9 avril 2009 à 10:50:21

Voila j'aimerais faire un menu très simple en utilisant les displays, je vous donne mes codes incomplets et si vous trouvez ce qui ne va pas ou ce qui manque faites moi signe!(rien ne cloche au niveau du html)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
   <head>
       <title>Bienvenue sur mon site !</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	   <link rel="stylesheet" media="screen" type="text/css" href="javascript.css"/>
	    
		<script type="text/javascript" src="jquery-1.3.2.js"></script>
		<script type="text/javascript" src="javascript.js"></script>  
		
	</head>
	<body>
		<div class="menu">
			<ul class="niveau1">
				<li>JavaScript
					<ul class="niveau2">
						<li>Truk1</li>
						<li>Truk2</li>
						<li>Truk3</li>
					</ul>
				</li>
				<li>Graphic Design
					<ul class="niveau2">
						<li>Truk1</li>
						<li>Truk2</li>
						<li>Truk3</li>
					</ul>
				</li>
				<li>HTML
					<ul class="niveau2">
						<li>Truk1</li>
						<li>Truk2</li>
						<li>Truk3</li>
					</ul>
				</li>
			</ul>
		</div>
	</body>
</html>

var niveau2 = document.getElementsByClassName('niveau2');

function display(){
	for(var i = 0;i < niveau2.length;i++){
			if(niveau2[i].style.display == 'display'){
			//Si les li du niveau2 sont en display alors au click de la souris il deviennent en none
		
				niveau2[i].onclick = function(){
				
				};
			}
			else{
			//Si les li du niveau2 sont en none alors au click de la souris il deviennent en display
		
				niveau2[i].onclick = function(){
				
				};
		}
	}
}
window.onload = display;

Merci d'avance.

Golmote

9 avril 2009 à 12:24:18

Ta variable niveau2, il faut que tu l'initialises une fois le chargement terminé.

Car sinon, l'élément ne sera pas encore chargé, et l'instruction va planter...

var niveau 2;
function display() {
... ...
}
window.onload = function() {
  niveau2 = document.getElementsByClassName('niveau2');
  display();
};

Yourgod2000

10 avril 2009 à 11:42:41

D'accord, donc j'ai changé le code mais encore une fois il me manque pas mal d'éléments, peux tu me donner la piste ou le code?

function display(){
	var niveau2 = document.getElementsByClassName('niveau2');
	for(var i = 0;i < niveau2.length;i++){
			if(niveau2[i].style.display == 'inline'){
			//Si les li du niveau2 sont en inline alors au click de la souris il deviennent en none
		
				niveau2[i].onclick = function(){
					niveau2[i].style.display = 'none';
				};
			}
			else{
			//Si les li du niveau2 sont en none alors au click de la souris il deviennent en inline
		
				niveau2[i].onclick = function(){
					niveau2[i].style.display = 'inline';
				};
		}
	}
}
window.onload = display;

Tillertan

10 avril 2009 à 11:52:21

niveau2[i].onclick = function(){
	niveau2[i].style.display = 'none';
};

===>

niveau2[i].onclick = function(){
	this.style.display = 'none';
};

Et si j'ai bien compris ce que tu veux..

function display(){
	var niveau2 = document.getElementsByClassName('niveau2');
	for(var i = 0;i < niveau2.length;i++) {
			niveau2[i].onclick = function() {
					this.style.display = (this.style.display == 'none') ? 'inline' : 'none';
			};
	}
}
window.onload = display;

Yourgod2000

10 avril 2009 à 12:03:06

"this.style.display = (this.style.display == 'none') ? 'inline' : 'none';"
Je ne connais malheureusement pas cette syntaxe :s

angelus76

10 avril 2009 à 12:11:01

salut
je tenais juste a t'informer que
" getElementsByClassName " a de grande chance de ne pas marcher sous Ie tous comme sur certain autre navigateur
Firefox 3 lui le suporte bien

donc je te consellerais d'utiliser les 3 methode compatible
getElementById
getElementsByName
getElementsByTagName

ou alor cree une fonction complete pour fair ' getElementsByClassName ' ( il en exite deja sur le net

Ps : (this.style.display == 'none') ? 'inline' : 'none'; sa ma l'aire de resembler a une condition ' ternaire '
++

Golmote

10 avril 2009 à 12:21:23

C'est pour raccourci la syntaxe...

Ca s'appelle une condition ternaire. Tu fais une affectation, qui affecteras donc ceci ou cela en fonction d'une condition.

var ta_variable = (condition) ? 'ceci' : 'cela';
// Si condition est vrai, alors ta_variable = 'ceci'
// Si condition est fausse, alors ta_variable = 'cela'

Et pour faire un getElementsByClassName tu peux faire :

var la_class_que_tu_veux = "yop" // La class recherchée
if(document.getElementsByClassName) { // Si c'est implémenté sur le navigateur
  return document.getElementsByClassName(la_class_que_tu_veux); //On utilise la fonction toute prête
} else { // Sinon on bidouille un peu
  var all = document.getElementsByTagName("*"); // On récupère tous les éléments du document.
  var res = []; // On crée un tableau vide pour y mettre le résultat
  for(var i=0,l=all.length;i<l;i++) { // On boucle sur all
    if(all[i].className==la_class_que_tu_veux) { // Si l'élément a la class recherchée,
      res.push(all[i]); // On l'ajoute au tableau résultat
    }
  }
  return res;
}

xavierm02

10 avril 2009 à 12:31:42

http://www.cssplay.co.uk/menus/

Yourgod2000

10 avril 2009 à 12:41:00

je ne suis qu'un pauvre débutant en javascript et pour le ternaire très bien expliqué j'ai compris mais pour les "bidouilles" en dessous ça m'est resté flou, j'ai juste besoin qu'on me modifie un peu mon code pour me dire ce qui va pas...j'ai remplacé getElementsByClassName par getElementsByName, maintenant qu'est ce que je fais?

Tillertan

10 avril 2009 à 12:44:43

function display() {
	var niveau2 = document.getElementsByTagName('ul');
	for (var i = 0, a = niveau2.length; i < a; i++) {
		if (niveau2[i].className == 'niveau2') {
			niveau2[i].onclick = function() {
				this.style.display = (this.style.display == 'none') ? 'inline' : 'none';
			};
		}
	}
}
window.onload = display;

Par contre, dans l'absolue, pour obtenir ce que je pense que tu veux, il faudrait faire:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
   <head>
       <title>Bienvenue sur mon site !</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	   <link rel="stylesheet" media="screen" type="text/css" href="javascript.css"/>
	    
		<script type="text/javascript" src="jquery-1.3.2.js"></script>
		<script type="text/javascript" src="javascript.js"></script>  
		
	</head>
	<body>
		<div class="menu">
			<ul><!-- On donne la class niveau1 aux <li> qui contiennent les sous menus -->
				<li class="niveau1">JavaScript
					<ul class="niveau2">
						<li>Truk1</li>
						<li>Truk2</li>
						<li>Truk3</li>
					</ul>
				</li>
				<li class="niveau1">Graphic Design
					<ul class="niveau2">
						<li>Truk1</li>
						<li>Truk2</li>
						<li>Truk3</li>
					</ul>
				</li>
				<li class="niveau1">HTML
					<ul class="niveau2">
						<li>Truk1</li>
						<li>Truk2</li>
						<li>Truk3</li>
					</ul>
				</li>
			</ul>
		</div>
	</body>
</html>

function display() {
	var niveau2 = document.getElementsByTagName('li'); // On récupère toutes les balises <li> de la page
	for (var i = 0, a = niveau2.length; i < a; i++) { // On liste chacune d'entre elles
		if (niveau2[i].className == 'niveau1') { // Si elle possède class="niveau1" alors..
			niveau2[i].onclick = function() { // Quand on clique dessus..
				var a = this.getElementsByTagName('ul'); // On récupère tout les <ul> présent à l'interieur de cette balise <li>
				a[0].style.display = (a[0].style.display == 'none') ? 'inline' : 'none'; // On prend la premiere qu'on a trouvé [0], Si elle est invisible, on la met inline sinon invisible
			};
		}
	}
}
window.onload = display;

http://tillersama.hd.free.fr/CCM/a.htm

Golmote, si tu veux j'ai un truc qui traine au fond d'un tiroir:

if (!document.getElementsByClassName) {
	var gebcn = function(classN) {
		var a = this.getElementsByTagName('*');
		var b = [];
		
		for (var i = 0, c = a.length; i < c; i++) {
			if (a[i].className == classN) {
				b.push(a[i]);
			}
		}
		
		return b;
	};
	
	document.getElementsByClassName = gebcn;
	
	var a = document.getElementsByTagName('*');
	for (var i = 0, b = a.length; i < b; i++) {
		a[i].getElementsByClassName = gebcn;
	}
}

C'est pas parfait, mais sa dépanne desfois. J'avais fais comme ça, car j'avais pas trouvé de prototype compatible IE... HTMLElement marche pas, Object non plus

Golmote

10 avril 2009 à 13:34:34

Ta fonction là, en fait, elle... remplace le vrai getElementsByTagName sur le document + tous les éléments de la page... c'est ça ? o_O

Si oui, c'est fort ! Très fort

Tillertan

10 avril 2009 à 13:43:06

Nan xD, Si le getElementByClassName n'existe pas, elle le crée sur le document et sur tout les elements du document
Mais le problème c'est que elle n'agit que sur les élements de départ. Si après t'en rajoutes, ils n'auront pas la fonction. Il faudra leur ajouter..

Golmote

10 avril 2009 à 13:55:49

Arf oui en fait j'avais compris, j'ai merdé dans mon explication.

Bref, c'est cool, je retiens la méthode, j'arriverai à la réappliquer en temps nécessaires.

Yourgod2000

10 avril 2009 à 15:04:03

Tiller >> j'ai copié-collé ton code, visiblement ça marche, j'ai pas encore tout décrypté mais j'ai pas compris la ligne
for (var i = 0, a = niveau2.length; i < a; i++)
d'où vient le "a"?

Autant pour moi, je viens de voir...

Tillertan

10 avril 2009 à 15:09:31

En fait,
for (var i = 0, a = niveau2.length; i < a; i++)

Est exactement comme

for (var i = 0; i < niveau2.length; i++)

Mais je ne sais pas trop pourquoi, il est préférable d'écrire de la première manière =o

Golmote

10 avril 2009 à 15:17:04

Parce que dans le premier cas, niveau2.length n'est calculé qu'une seule fois...

Alors que dans le deuxième cas, il l'est à chaque fois je crois...

Donc y'a une histoire de rapidité, premièrement...

Et deuxièmement regarde cet exemple :

var yop = "blabla"; // Une chaîne de 6 caractères
var cpt = 0; // Un compteur
for(var i=0,l=yop.length;i<l;i++) { // On fait une boucle de i à l (longueur "enregistrée")
cpt++; // On incrémente le compteur
yop += "r"; // Et on augmente le length de yop
}
// Ici cpt = 6, c-a-d "blabla".length

cpt = 0; // On remet le compteur à 0
for(var i=0;i<yop.length;i++) { // On fait une boucle de i à yop.length
cpt++; // On incrémente le compteur
yop += "r"; // Et on augmente le length de yop (donc la condition est modifiée !)
}
// Ici y'a rien... vu que la boucle est infinie...

Menu Display

× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.

× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.

Menu Display

Menu Display

Supprimer

Modérer

Signaler le message aux modérateurs