[HTML] Menu vertical dynamique

Bonsoir,
Voila j'essaye de faire un petit site pour la présentation de mon entreprise!
Donc j'ai recupéré un menu en script sur un site, je l'ai légèrement adapté mais j'ai encore quelques problemes!

Pour des questions de simplicité j'ai nommé le menu comme ceci:

Menu A
1
.
.
3

Menu B
1
.
.
9

Menu C

1
.
.
9


Menu D
1
.
.
3

Je vous conseil de telecharger le dossier .zip contenant les fichiers sources, afin de mieux comprendre sont utilisations

http://tomytomy.free.fr/forum/site.zip

Quand on clique sur le bouton "Menu A" il se déroule, de même pour les autre Menu B, C et D
Pour le moment quand on arrive sur le site les 4 menus sont fermés, j'aimerai que le premier soit toujours ouvert ( a la limite même si le Menu A ne peux plus se fermer je m'en fou je voudrai qu'il soit toujours ouvert)
En ce qui concerne les autres menus B,C D je souhaiterai qu'on puisse en ouvrir qu'un a la fois c'est a dire que :
Si le menu B est ouvert alors si j'ouvre le c ou D alors le B se referme... idem pour l'ouverture et fermeture des autre menu; (Sauf le A qui si possible reste toujours ouvert! Si impossibilité de le laisser ouvert alors il faudrait qu'il soit soumi aux mêmes règle que les autres menu)

Voila je n'arrive pas à modifier le script pour qu'il puisse fonctionner ainsi!
Donc si vous pouviez regarder je vous en serais très reconnaissant...


De plus j'aimerai aussi que lorsqu'on clique sur les bouton menu ABCD on soit renvoyé a un lien... car ça je n'arrive pas à l'ajouter

Voila je sais cela fait beaucoup de chose mais ce serait un grand service...

Merci par avance de votre aide

un script html ... :? ???

:salut:
Plutôt que 1000 explications : http://www.developpez.net/forums/sho...5&postcount=83;)

Citation:

---

Envoyé par trotters213

:salut:
Plutôt que 1000 explications : http://www.developpez.net/forums/sho...5&postcount=83;)

---

sous Firefox j'ai un bug au niveau des menus : certains sous-menus ne se cachent pas lorsque je passe à l'item suivant.

Avez vous téléchargé le dossier zip?
Avez vous essayer de faire quelques modification pour que cela fonctionne?

Euh pour moi la page fonctionne correctement sous firefox...

Merci de m'aider :D

Citation:

---

Envoyé par tomtotom

Avez vous téléchargé le dossier zip?
Avez vous essayer de faire quelques modification pour que cela fonctionne?

---

Et toi, as-tu lu le code du lien que je t'ai donné (qui fait exactement ce que tu souhaites ;) )?

Citation:

---

Envoyé par trotters213

Et toi, as-tu lu le code du lien que je t'ai donné (qui fait exactement ce que tu souhaites ;) )?

---

Euh bah enfaite j'arrive pas a le faire fonctionner :oops:
J'ai copier le contenu dans un fichier nommé index.htm
puis le contenu de css dans un fichier nommé text.css

Et quand je lis index.htm j'ai juste 4 case en hatu mais pas de menu rien :oops:

je m'y suis peut etre mal pris...
Peux tu m'expliquer?:mouarf:

Ca y est ca marche :D
j'avais oublié le fichier JS :p

Bon bah c'est pas que je recherche!
C'est bien un menu sur la gauche mais que les action soit déclanchées par un clique et non par le passage de la souris!

Regarde comment il fonctionne, ce qui me plait c'est que tout le menu bouge quand on en ouvre un....:(

Pouvez vous m'aider ou ce que je demande, demande trop de travail et il ne pas pas que j'espere un coup de main?:cry:

Si, tu auras un coup de main, mais laisse nous un peu de temps pour analyser le code et le corriger. Ta discussion a à peine 24h.

Je peux de dire un truc tout de suite : la frame qui contient le menu transforme la propriété scrolling="no" en scrolling="auto" car pour les petites résolutions le menu n'entre pas dans la page.

Je n'ai modifié que le fichier menu.js qui se trouve dans le dossier "/slashfiles"
Modifications :

• ajout de la variable gloable old_sm
• modification de la fonction init()
• modification de la fonction gomenu()

les ajouts ont été commentés en français ;)

Oui désolé mais comme je ne voyais personne repondre :oops:

Sinon j'ai fais ce que tu m'a dis et est testé ton fichier super quand on arrive le menu A reste ouvert comme je le voulais et aussi super les menus se referme quand on en ouvre un aure!
Sincerement super!
Seul probleme, si jarrive et veux directement entrer dans le menu C ou D et bien cela n'est pas possibe!
Donc je sais pas ce qu'il faut modifier mais je ne pense pas que ca soit grand chose...:mrgreen:

Merci beaucoup!

Ps: Peux tu regarder ce probleme?

Rectification ...
Tout marche correctement le seul probleme c'est que:
- Si je rentre sur le site et que j'ouvre et referme directement le menu B alors je ne peux pas ouvrir deriere le menu C ou D
-idem si je commence par le menu C je peux pas ouvrir le B et D
-idem si je commence par le menu D je peux pas après ouvrir le B et C

Voila si tu pouvais regarder ca :)

Merci

J'ai rajouté la variable gloable numMenu. Donne lui un numéro, et le menu portant ce numéro sera ouvert par défaut.

Ouais c'est une bonne fonctionnalité ce que tu viens de rajouter mais enfaite moi le defaut que je t'ai dis que j'ai constaté c'est que:
Quand j'ouvre la page index la jai le menu a Ouvert par defaut et les autre fermé donc ca c'est niquel, :p
Parcontre si j'ouvre et referme immédiatement par exemple le menu B et bien apres je ne peux ni ouvrir le C ni le D...
Essaye tu comprendra mieux ce que je veux dire...:mouarf:

Citation:

---

Envoyé par tomtotom

Parcontre si j'ouvre et referme immédiatement par exemple le menu B et bien apres je ne peux ni ouvrir le C ni le D...
Essaye tu comprendra mieux ce que je veux dire...:mouarf:

---

Je ne comprends pas ton problème :koi:
Le script focntionne parfaitement, je n'ai aucun problème sous Firefox. Avec IE5, le script ne fonctionne pas. Je ne peux pas le tester avec IE6. Si tu as une erreur avec IE6 indique moi laquelle.

Oui le script fonctionne très bien je suis d'accord!
Il est bien programmé pour avoir direct le menu A d'ouvert

Mais il a un default!
Si j'ouvre le menu B et que je le refereme imédiatement, ensuite je ne peux ouvrir le menu C ni le menu D!

Essaye cette manipulation
avec comme parametre de base dans le menu.js

//Debut ajout code
var old_sm = null; //sm contient l indice du menu a afficher
var numMenu = 1;
//Fin ajout code

Tu ouvre index.htm et tu clique sur le menu B ( ca declanche donc l'ouverture du menu) immédiatement tu referme ce menu en recliquant sur l'intitulé "menuB"(donc la le menu se referme)
Ensuiste tu clique sur le menu C ( et la tu va voir il ne s'ouvre pas!) tu peux essayer aussi de cliquer sur le menu D ( et il ne s'ouvre plus non plus!) seul le menu B s'ouvre .

Essaye tu veras....
Je ne sais pas comment regler ce probleme...
Dis moi ce que tu en pense :mouarf:

Citation:

---

Envoyé par tomtotom

Si j'ouvre le menu B et que je le refereme imédiatement, ensuite je ne peux ouvrir le menu C ni le menu D!

Essaye cette manipulation
avec comme parametre de base dans le menu.js

//Debut ajout code
var old_sm = null; //sm contient l indice du menu a afficher
var numMenu = 1;
//Fin ajout code

---

Avec ces paramètres B est ouvert par défaut, tu ne peux donc pas le refermer. Mais c'est un détail, j'ai essayé aussi avec numMenu = 0(A) ; 1(B) ; 2(C) ; 3(D) et 4 (Ca renvoie une erreur. Logique : Erreur : submenus[sm] has no properties)

Quel est ton navigateur ? Si une erreur est renvoyée, indique moi laquelle. Là j'ai beau chercher, je ne parviens pas à reproduire ton bug.

effectivement je viens de le tester avec firefox et il n'y a pas le bug dont je te parle avec IE 5 ( je crois que c'est le 5 que j'ai).

Alors je t'explique mon bug avec IE5
Si direct quand j'ouvre la page index je commence par ouvrir le menu B et le referme directement et bien apres je ne peux pas ouvrir ni le C ni le D!
idem si je commence par ouvrir directement le menu C et le referlmer directementje peux plus ouvrir le B et le D mais que le C
et avec le menu D c'est le meme reusltat...

Voila :mouarf:

index.htm
Un petit rappel avant : dans ton fichier index, pour la frame gauche (leftFrame) change le scrolling="no" en scolling="auto"

Code:

---

<frame src="gauche.htm" name="leftFrame" scrolling="auto" noresize>

---

Dans les petites résolutions, le menu sort de l'écran et sans barre de défilement il devient inaccessible.


menu.js
Liste des modifications :

• modification du test de la fonction gomenu()
• modification des fonctions store(), getElementsByClassName() : la méthode push() des tableaux est, je crois, inconnue de IE.
  
  Code:

  ---

  1 2	hidden.push(i);

  ---

  devient :
  
  Code:

  ---

  1 2 3

  hidden[j]=i; j++;

  ---

Ouais :D
Ca y est ca marche niquel sous IE...
Je vais mettre tout ca sur internet et voir si cela fonctionne sans probleme :D

Merci beaucoup

eh M*****
j'ai un bug a la fois sous IE et firefox morzila

Va voir http://tomytomy.free.fr/forum/test/

J'ai le titre des menu dit menu A B C D
qui s'affiche en gros carré blanc..
Je sais pas si ça le fait aussi chez toi!
En tout cas bizard sur mon bureau ca ne le fait pas mais sur internet ca me le fait 8O

Citation:

---

J'ai le titre des menu dit menu A B C D
qui s'affiche en gros carré blanc..
Je sais pas si ça le fait aussi chez toi!
En tout cas bizard sur mon bureau ca ne le fait pas mais sur internet ca me le fait

---

Regarde ta feuille de style :

Code:

---

1 2 3 4 5 6 7 8

.sdmenu .title, .sdmenu .titlehidden{ display: block; padding: 5px 0; font-weight: bold; color: white; background: #FFF url(toptitle.jpg) repeat-x; }

---

regarde si l'image toptitle.jpg est dans ton dossier. Si elle n'y est pas un fond blanc apparaît à la place (#FFF équivaut à #FFFFFF).


Par ailleurs :

Code:

---

1 2 3 4 5 6

<span class="title" id="top"><img src="slashfiles/expanded.gif" class="arrow" alt="*" />A</span> <div class="submenu"> .... </div> <span class="title" id="top"><img src="slashfiles/expanded.gif" class="arrow" alt="-" />B</span>

---

Supprime id="top", dans une page HTML la valeur des id doit être unique. De plus, dans ce cas il ne te sert à rien.

Alors je viens de verifier le le fichier etait nommé .JPG au lieu de .jpg!
Voila c'est modifier et cela fonctionne!
Maintenant cela me parait tres correct, bon quand je clique dessu pour entrer dans le menu ca s'affiche en clignotant 1 fraction de seconde en blanc...

Mais c'est un détail c'est pas grave!

Niquel merci beaucoup de m'avoir aidé!
Si j'ai un probleme par la suite je reposterai :D :mouarf:

Je ne sais pas si tu as fait attention à cette remarque (je l'ai éditée alors que tu corigeais ton code)

Citation:

---

Envoyé par Auteur

Par ailleurs :

Code:

---

1 2 3 4 5 6

<span class="title" id="top"><img src="slashfiles/expanded.gif" class="arrow" alt="*" />A</span> <div class="submenu"> .... </div> <span class="title" id="top"><img src="slashfiles/expanded.gif" class="arrow" alt="-" />B</span>

---

Supprime id="top", dans une page HTML la valeur des id doit être unique. De plus, dans ce cas il ne te sert à rien.

---

Citation:

---

Maintenant cela me parait tres correct, bon quand je clique dessu pour entrer dans le menu ca s'affiche en clignotant 1 fraction de seconde en blanc...

Mais c'est un détail c'est pas grave!

---

corrige la couleur, transforme le blanc #FFF en :
-noir : #000000 ou #000
-gris : #555555 ou #555
-gris : #AAAAAA ou #AAA
(pour les gris tu as R=V=B=valeur)

Citation:

---

Si j'ai un probleme par la suite je reposterai

---

Si le problème sur ce sujet est clos, mets :resolu:. Il n'est pas nécessaire de le laisser ouvert en attendant un éventuel bug.

C'est bon j'ai plus le clignotage blanc :D

J'ai changé la commande

Citation:

---

.sdmenu #top {
background: url(toptitle.jpg) no-repeat;

Par

.sdmenu #top {
background: #600040 url(toptitle.jpg) no-repeat;

---

Voila!
par contre en ce qui concerne id=top a quoi ca sert que je l'enleve?

Citation:

---

Envoyé par tomtotom

par contre en ce qui concerne id=top a quoi ca sert que je l'enleve?

---

id = "valeur". C'est un identifiant qui te permet par la suite de cibler l'élément par document.getElementById().

Ce qui m'embête dans ton code ce n'est pas sa présence mais le fait que deux éléments possèdent le même id (le menu A et le menu B). Il faut donc que tu en supprimes au moins 1. Je te conseillais de supprimer les deux car dans ton code rien ne s'y réfère.

salut me revoila!
Donc le menu de gauche fonctionne très bien!
j'ai décider d'en rajouter un sur le haut de la page...
j'ai encore trouvé un script qui me plaisait!
Mais professionel comme je suis je n'ai pas reussi a modifier toutes les couleurs comme je le veux!
En effet je voudrais que les 2 menus ai les meme couleurs au même endroit... Auteur peux tu m'aider?

Ici vous pouvez trouver ce que j'ai deja fais et qu'il faudrait modifier... :roll:
http://tomytomy.free.fr/forum/site1.zip

Merci par avance de votre aide

http://tomytomy.free.fr/forum/menu.bmp

ouvre le fichier custom.js, tu as une série de variables "xxCOLOR"

Oui mais je les ai toutes changées et aucune ne modifie le fond bleu...
Donc je pense qu'il manque la commande! Ainsi la connais tu pour que je puisse la rajouter?

tous les paramètres du sous menu commencent par s :

Citation:

---

smCOOR : couleur de la cellule
srCOLOR : couleur de la cellule lors du rollover

sbCOLOR : couleur de la bordure

saLINK : couleur du lien
saHOVER : couleur du lien lors du over

sfFONT : fonte
sfSIZE : taille de la police
sfWEIGHT : bold ou none (en gras ou non)

---

Le fond du menu est smCOLOR qui avait comme valeur lightblue. J'ai laissé la bordure jaune et modifié, en plus des couleurs, la police du texte (Sans Serif).
Mes paramètres, pour que ce menu ressemble le plus possible à celui de gauche (en commentaire l'ancienne valeur) :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14

var smCOLOR = "#000000"; //"lightblue"; // submenu cell color var srCOLOR = "#600040"; //"lightyellow"; // submenu cell rollover color   var sbSIZE = 1; // submenu border size var sbCOLOR = "yellow"; // submenu border color   var saLINK = "gray"; //"#606060"; // submenu link color var saHOVER = "#FFFFFF"; // submenu link hover-color (dual purpose) var saDEC = "none"; // submenu link decoration   var sfFONT = "Sans Serif"; //"arial";// submenu font face var sfSIZE = 14; // submenu font size (pixels) var sfWEIGHT = "bold"; // submenu font weight

---

niquel merci :)
Je continu et repost en cas de probleme!
Merci beaucoup :mrgreen: