11548 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Javascript -> Menu horizontal!

Bonjour Bonjour!

Je suis nouveaux sur se forum, et j'ai vue que vous fourniser de l'aide au nouveaux en javascript, donc voila j'ai plusieurs problème.

Vous pouvez voir le menu dans le template ICI

Donc voici les problèmes, le menu est trop vers la droite, je le voudrais plus a gauche, mais je vois pas trop comment. Deplus j'aimerais que lorsqu'on arrive sur le site, le menu 1, sois déja ouvert. Et enfin, ma dernière question, est-ce possible de faire un effet dégrader lors du changement de menu.

Mon menu est en include du reste du design, donc voici juste le code de l'include:

<script type="text/javascript">
<!--
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';}
}
//-->
</script>

<ul id="nav">
 <dt onclick="montre('smenu1');"><li><a href="#" title="Menu 1">Menu 1</a></li></dt>
 <dt onclick="montre('smenu2');"><li><a href="#" title="Menu 2">Menu 2</a></li></dt>
</ul>


 <ul id="subnav">
 <dd id="smenu1">
  <li id="subnavfirst"><a href="#" title="Events">Events</a></li>
  <li><a href="#" title="Archives">Archives</a></li>
  <li><a href="#" title="Login">Login</a></li>
  <li><a href="#" title="Edit News">Edit News</a></li>
 </dd>


 <dd id="smenu2">
  <li id="subnavfirst"><a href="#" title="Events">dfghasg</a></li>
  <li><a href="#" title="Archives">kjlgdsag</a></li>
  <li><a href="#" title="Login">utgdsg</a></li>
  <li><a href="#" title="Edit News">bcdggsd</a></li>
 </dd>
 </ul>


Merci d'avance pour toute l'aide que vous aller pouvoir me fournir!

++
Modifié par X3tr3X (28 Jun 2007 - 18:21)
le menu est trop vers la droite, je le voudrais plus a gauche, mais je vois pas trop comment.
Il suffit d'enlever le padding gauche dans ton CSS :

ul#subnav {
	margin: 0;
	padding: 0 0 0 0;
	width: 800px;
	height: 31px;
	background: #000 url(images/subnav_bg.gif) repeat-x;
	color: inherit;
}

(Par rapport à ton CSS actuel, j'ai mis le padding gauche à 0 au lieu de 30px, et la width à 800px au lieu de 770px.


J'aimerais que lorsqu'on arrive sur le site, le menu 1, sois déja ouvert.
ajoute ça à la fin de ton script :
window.onload = montre('smenu1');



Est-ce possible de faire un effet dégrader lors du changement de menu.
Oui : setTimeout, objet.style.color, google.
Merci beaucoup pour cette superbe réponse!

Pour les 2 menu, j'ai réussie a faire ouvrir le premier, mais quand je clic sur le deuxieme, il ne s'ouvre pas!

La le problème que j'aime pas, ses que lorsque la page se charge, on vois tout les autres menu. Y a t'il moyen d'arranger sa?

Et pour le setTimeout, objet.style.color je le met ou sa Smiley sweatdrop

Merci d'avance!
Modifié par X3tr3X (20 Jun 2007 - 01:38)
Salut Smiley cligne ,

ton onload est mal placé : tu peux par exemple remplacer
<body>
<script type="text/javascript">
<!--
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';}
window.onload = montre('smenu1');
}
//-->
</script>
par
<body onload="montre('smenu1');">
<script type="text/javascript">
<!--
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';}
}
//-->
</script>

A+ Smiley smile
Salut et merci pour ton aide!

Sa ne marche pas, car mon menu est en include, donc pas de balise <body> Smiley confus

++
Perso chez moi le window.onload ça fonction o_O (j'ai testé avant de poster ma réponse).

Et de manière générale je préfère utiliser ça à un <body onload=""> précisément parceque le javascript est souvent indépendant du html, et donc c'est pas pratique de devoir modifier le html quand on ajoute un script.


Edit : oui par contre ma technique en effet ça ouvre les 2 menus d'un coup, j'avais pas fait attention... Même avec le windows.onload il doit l'exécuter dès qu'il tombe dessus, donc avant que les menus n'existent dans le html... c'est nul javascript :-P (je continue à chercher et je te tiens au courant...)
Modifié par BlueScreenJunky (20 Jun 2007 - 10:57)
Ouais super, je me suis quoté au lieu de m'éditer...


Bon bref, je trouve pas d'autre solution que <body onload="montre('smenu1')"> Smiley ohwell
Modifié par BlueScreenJunky (20 Jun 2007 - 10:56)
X3tr3X a écrit :
Sa ne marche pas, car mon menu est en include, donc pas de balise <body> Smiley confus

++

re-Salut Smiley smile ,

la première remarque est que tu n'as pas repris exactement le code que je t'ai donné Smiley langue : tu as oublié d'enlever 
window.onload=montre;

et la deuxième est : puisque tu fais des include à chaque page et que (je suppose Smiley rolleyes ) ton menu sera toujours présent, pourquoi ne pas :

- soit supprimer ton <body> et faire l'include (qui contiendra le <body onload...>)

- soit modifier ton <body> en <body onload...> et faire l'include (qui ne contiendra pas le <body onload...>) ?
Slt,

Je suis pas trop sur de comprendre ton affaire de body Smiley confused
Mais je ne pourrais pas le mettre quelque part d'autre que dans la balise body?

++
Salut,

Actuellement tu as ça (en bleu ce qui est en trop) :
...
</head>
[b][#blue]<body>[/#][/b]

<body onload="montre('smenu1');">
<script type="text/javascript">
<!--
[b][#blue]window.onload=montre;[/#][/b]
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';}
}
//-->
</script>
...
et il faudrait que tu aies ça :
...
</head>
<body onload="montre('smenu1');">
<script type="text/javascript">
<!--
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';}
}
//-->
</script>
...

Donc puisque tu fais un include tu as 2 solutions.

Soit tu enlèves le <body> et tu fais ton include directement :
</head>
<?php
include($page_avec_javascript.php); //[b] cette page contient le <body onload...>[/b]
?>
...


Soit tu mets directement <body onload...> mais tu l'enlèves de ta page includée :
</head>
<body onload="montre('smenu1');">
<?php
include($page_avec_javascript.php); //[b] cette page ne contient pas de <body onload...>[/b]
?>
...


A noter que dans tous les cas 
[b][#blue]window.onload=montre;[/#][/b]
est en trop !

En espérant que c'est plus clair Smiley cligne
Merci beaucoup de votre patience avec un nouveaux en javascript comme moi!

Voila, j'ai mis le onload="montre('smenu1');" dans mon index.php

Mais la j'ai un petit probleme que j'aime pas, quand la page load, on vois toute les autres menu Smiley confus Je sais pas si on pourrais mettre dans le sous-menu, Loading, le temps que le menu aparaise, pour pas qu'on voye tout les autres menu!

J'aimerais aussi savoir comment faire pour faire disparaitre/apparaitre le texte lors du clic du menu!

Merci d'avance!

++
X3tr3X a écrit :
Mais la j'ai un petit probleme que j'aime pas, quand la page load, on vois toute les autres menu, Je sais pas si on pourrais mettre dans le sous-menu, Loading, le temps que le menu aparaise, pour pas qu'on voye tout les autres menu!


Bon alors, si on résume, ce que fait ta fonction "montre()", c'est qu'elle met tous les éléments du menu qu'il ne faut pas afficher en "display : none", et ceux qu'il faut afficher en "display: block".
Si par défaut tu mettais ton menu2 en "display: none" dans le CSS, on ne le verrait pas apparaitre pendant le loading.

Par contre l'inconvénient de cette technique, c'est qu'il sera impossible à quelqu'un qui a désactivé javascript d'aller dans le 2e menu. Alors qu'avec ce que tu as a actuellement, si javascript est désactivé le visiteur verra les deux menus à la suite (comme tu vois pendant le loading), et pourra quand même naviguer.
A voir donc.



a écrit :
J'aimerais aussi savoir comment faire pour faire disparaitre/apparaitre le texte lors du clic du menu!


Voilà la fonction que j'utilise pour faire apparaitre mes formulaires de login (en simplifiée parcequ'il y avait d'autres trucs qui ne t'intéressent pas), je te laisse l'adapter à ton cas.

function show(el){
  document.getElementById(el).style.opacity = "0"; //propriété CSS3, pour firefox et les autres
  document.getElementById(el).style.filter = "alpha(opacity=0)"; // Pour IE
  document.getElementById(el).style.display = "inline";
  for(i=1; i< 100; i++){
    setTimeout("document.getElementById('"+el+"').style.opacity = '"+i/100+"'",i*4);
    setTimeout("document.getElementById('"+el+"').style.filter = 'alpha(opacity="+i+")'",i*4);
  }
}

Modifié par BlueScreenJunky (22 Jun 2007 - 10:34)
Hum, faut surment je remplace des chose, mais je comprend pas le javascript...quelqu'un peut me dire comment le mettre dans mon menu?
<script type="text/javascript">
<!--

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) {
  //fade-in par Bluescreenjunky at gmail.com
    d.style.opacity = "0";
    d.style.filter = "alpha(opacity=0)";
    d.style.display='block';
    
    for(i=1; i< 100; i++){
       setTimeout("document.getElementById('"+id+"').style.opacity = '"+i/100+"'",i*8);
       setTimeout("document.getElementById('"+id+"').style.filter = 'alpha(opacity="+i+")'",i*8);
    } 
  }
}
//-->
</script>


résultat ici
Sujet clos
Aller à