11550 sujets

JavaScript, DOM et API Web HTML5

Masquer un des menus en cliquant sur le titre

Pages :
Hello,

Je galère un peu pour trouver exactement ce que je cherche alors si le sujet a déjà été abordé, merci de me faire part des topics concernés.

Je souhaiterai, dans un menu tel que celui-ci : http://spheeris.free.fr/alsa/menu.php, si on clique sur Titre 2, le menu correspondant disparaisse et que seul "Titre 2" subsiste.
Un second clic sur Titre 2 ferait réapparaître son contenu.
De même, chaque menu doit être indépendant et un clic sur chacun des "Titre x" fera disparaître chaque menu afin que seuls les Titres subsiste.

Je pense qu'il faut utiliser du javascript pour obtenir ce comportement mais mes connaissances sont sommes toutes bien limité dans ce domaine.

Merci pour votre aide Smiley smile
Bonjour.

Un truc du style devrai faire l'affaire...

JavaScript :

function showMenu (id) {
var o = document.getElementById(id);
if (o.style.display == "" || o.style.display == "block") o.style.display = "none";
else o.style.display = "block";
}


XHTML :

<h2><a href="javascript:showMenu('menu1');">Test</a></h2>
<div id="menu1">
<ul>
<li>...</li>
<li>...</li>
</ul>
</div>
Bonjour tout le monde !
Moi aussi je voulais faire un menu dinamic comme ça, tu peux voir le résultat ici :
http://www.empirebc.fr/bulletin.php

Une seule chose, j'aimerai que, après avoir recharger la page, le menu que l'on a sélectionné reste et que ce ne soit pas celui par défaut qui réapparaissent
Comment faire ?
Bonjour.
Veux-tu que les menus ouverts restent, comme c'est normalement le cas sur mon site par exemple ?
Si c'est ça que tu veux, il faut utiliser les cookies, je crois que tu n'as pas le choix.

Avec la technique que j'utilise, je peux théoriquement gérer jusqu'à 16 menus indépendants.
J'enregistre un cookie permettant de restaurer l'état ouvert des menus qui y étaient...

Voici un bout de code tiré de mon fichier .js global :

function writeCookie (name, value, expires)
{
var date = new Date((new Date()).getTime() + expires);
var expdate=date.toGMTString();
document.cookie=name+"="+value+";expires="+expdate+";path=/;";
}
function isMenuShowed (n) {
return  (document.getElementById('menu'+n).style.display == "block");
}

window.onload = function () {
var str = getCookie("menu");
var j = parseInt(str);
if (j == Number.NaN) j  = 0;

for (var i=0; i < 4; i++) {
showMenu(i+1, (j&Math.pow(2,i))/Math.pow(2,i), true);
}

//...
}


window.onunload = function () {
var j = 0;
for (var i=0; i < 4; i++) {
j += (isMenuShowed(i+1)? Math.pow(2,i):0);
}
writeCookie("menu", j, 1000*3600*24*365);

//...
}


Je vais quand même expliquer le principe :
Quand on quitte la page, l'état actuel est menus est vérifié, et à l'ouverture suivante, le cookie est lu et l'état est restauré.
Le principe de sauvegarde des menus est simple : il s'agit d'un nombre unique binaire qui enregistre l'état de chacun des menus, indépendemment.

Si aucun menu n'est ouvert, ce nombre vaudra 0.
Si le premier est ouvert, le nombre vaudra 1
Si c'est le deuxième, il vaudra 2
Si c'est le troisième, il vaudra 4
et si c'est le quatrième, il vaudra 8.
Si le premier et le troisième sont ouverts en même temps, le nombre vaudra alors 1+4 = 5.
Si tous les menus sont ouverts, le nombre vaudra 1+2+4+8 = 15.

En fait c'est pas 16 mais 32 le maximum. 2^32 étant le nombre entier le plus grand que JavaScript connaisse.

Voilà, comme ça tu sais tout.

L'avantage d'utiliser un nombre unique, c'est qu'on perd moins de place dans le cookie, car moi par exemple j'utilise beaucoup de cookies pour enregistrer la date de dernière visite, les messages lus du forum, l'identification actuelle, etc.
Je vous remercie aussi pour vos réponse, un poil à la bourre mais je n'ai pas pu m'y remettre avant aujourd'hui Smiley smile

Le script de QuentinC semble convenir à mes besoins mais j'ai un tout petit désagrément dans le cadre de mon utilisation.
Démo : http://spheeris.free.fr/alsa/showmenu.php
Mon problème est le suivant : je souhaite que lors du chargement de la page, le div ne s'affiche pas. Après un clic sur "Plus d'options", le div s'affiche. Malheureusement, après un reload de la page, il faut cliquer deux fois sur "Plus d'options" pour que le div s'affiche. Ensuite, tant qu'on ne recharge pas la page le fonctionnement est correct (un seul clic suffit).
Ce pb ne survient que dans le cas où par défaut, je demande avec un display:none; que le div ne s'affiche pas.

Savez-vous comment résourdre ce pb ?
Vérifie que display ne contienne pas autre chose que "block" ou "none". Un contenu vide de cette variable n'est pas toujours bien perçu par le script
J'ai vérifié, la seule chose que j'avais en plus de none, c'est le point-virgule Smiley lol
J'ai essayé de le virer au cas où, mais le phénomène demeure.
Voici le code utilisé :
CSS :
#options {
display: none;
}

Javascript : 
    function showMenu (id) {
      var o = document.getElementById(id);
      if (o.style.display == "" || o.style.display == "block") o.style.display = "none";
      else o.style.display = "block";
    }


HTML :
  <a href="javascript:showMenu('options');">Plus d'options</a>
  <div id="options">
    <p>Te ius feugiat euripidis reprehendunt, vocent aliquip nonummy 
     per ea, te duis graeci conceptam nam. </p>
  </div>
Le display:none que tu fixe dans le CSS n'a aucun effet sur la propriété display du javascript.

Pour que display en javascript contienne autre chose qu'une chaîne vide, il faut fixer la valeur en javascript.

Tu peux le faire au chargement (onload) si jamais...
Salut Quentin

Je me permet de re poster pour savoir comment fonctionne cette fonction que tu as écrite
tu y fais reférence dans le post juste au dessus

merci

@+


function showMenu (i, b, fix) {
if (typeof(b)=="undefined") b = 2;
if (typeof(fix)=="undefined") fix = true;

var o = document.getElementById("menu"+i);
var img = document.getElementById("menu" + i + "img");
if (o.style.display == "block" || b==0) 
{
o.style.display = "none";
img.src = "http://quentinc1.free.fr/qcxsite/none.png";
img.alt="(+)";
o.dispFixed = false;
}
else if (o.style.display == "none" || b == 1)  {
o.style.display = "block";
img.src = "http://quentinc1.free.fr/qcxsite/block.png";
img.alt="(-)";
o.dispFixed = fix;
}
else { o.dispFixed = true; o.style.display = "block"; }

}
En fait, cette fonction ne gère pas seulement l'affichage/masquage du sous-menu, mais si tu as regardé attentivement sur mon site, la petite image à gauche des différentes parties dépliables change selon que le menu est déplié ou non.

Elle pourrait être simplifiée, mais au départ, j'avais créé un menu qui se dépliait tout seul lorsqu'on passait la souris dessus (onmouseover) et qui se retirait lorsqu'on quittait la zone ouverte du sous-menu (onmouseout) tout en préservant la possibilité de fixer l'état affiché d'un sous-menu en cliquant sur son titre au lieu de passer simplement la souris dessus.

J'ai capitulé devant un gros bug d'IE qui masquait le sous-menu dès qu'on quittait la partie du sous-menu qui avait du texte, autrement dit, dès qu'on était sur une zone blanche (sans lettre, sais texte) mais toujours théoriquement dans la zone, paf, ça disparaissait.
ET parfois même ce fameux évènement onmouseover était lancé deux fois ce qui masquait le menu au deuxième appel...

On m'avait signalé ce bug sur un autre forum à l'époque.

Voilà, maintenant tu sais tout !
QuentinC a écrit :
Le display:none que tu fixe dans le CSS n'a aucun effet sur la propriété display du javascript.

Pour que display en javascript contienne autre chose qu'une chaîne vide, il faut fixer la valeur en javascript.

Tu peux le faire au chargement (onload) si jamais...


Merci pour ta réponse, mais que signifie "faire au chargement (onload)" ?
Smiley sweatdrop
OK merci beaucoup, en tous cas, ton site est très bien !
(par contre, je sais pas si tu sais, mais il affiche souvent des "Erreurs", par ex dans: informatique, prog JS,navig et menus, menu en arbre)
@+
a écrit :

(par contre, je sais pas si tu sais, mais il affiche souvent des "Erreurs", par ex dans: informatique, prog JS,navig et menus, menu en arbre)


peux-tu m'en dire un peu plus stp, que je puisse corriger ?
Si tu suis le chemin que je t'ai donné, tu arrivera à cette adresse:
http://quentinc1.free.fr/...
[Lien édité par Stephan, merci d'utiliser le BBCode pour éviter de faire des liens qui déforment le forum]

et ca affiche ça:

ERREUR dans le fichier Menu en arbre avec des listes imbriquées.5.txt pour le script Menu en arbre avec des listes imbriquées


voili voilou Smiley cligne
Modifié par Stephan (08 Oct 2005 - 00:49)
Ahah je sais pourquoi.
Quel navigateur utilises-tu ?

Parce qu'en précisant iso-8859-1 à la fois dans l'en-tête HTTP et dans la balise meta content-type, si ton navigateur utilise encore de l'utf8, je ne peux plus rien pour ce dernier...
C'est un bug de ton navigateur, si après tant de précautions il prend encore le mauvais encodage, pas étonnant que ça bugge...

J'accède correctement à la page lorsque je choisis le script depuis la liste "navigation et menus"...

Donc si tu veux que ça marche, remplace dans l'url : %C3%A9 par %E9.

Voilà.
Pages :
Sujet clos
Aller à