11544 sujets

JavaScript, DOM et API Web HTML5

Bonjour,

Je voudrais m'inspirer du menu déroulant vertical de cette page selon Raphaël GOETTER :

Comment peut on faire pour arriver sur une page web avec le menu déroulant ouvert sur un sous-menu 2.1 actif ?

Explications :
Je souhaiterais que lorsqu'on arrive sur la page de mon site, il y ait le menu 2 ouvert et que le sous lien menu 2.1 soit actif - en surbrillance(voir image ci dessous)

upload/3752-menu-deroul.gif

Puis quand on clique sur un autre sous menu, ce dernier soit actif en surbrillance. et ainsi de suite ...

De plus, si je change de menu "principal" - par ex : le 3 (le menu principal précédent se ferme comme d'habitude, laissant se dérouler le nouveau sous-menu)...
Je voudrais alors que le menu 3 ouvre son sous-menu et que le sous-menu 3.1 soit actif et envoi le lien de ce sous-menu 3.1.

En résumé :

Je voudrais au démarrage de la page du site arriver sur le menu 2 soit déroulé avec le sous-menu 2.1 actif en surbrillance.
Que les sous-menus (pages) sur lesquels l'internaute se trouve soient en surbrillance - lui indiquant où il est (convivialité).
Que quand on clique sur un menu principal, s'ouvre la page du sous-menu x.1 lui correspondant.

Ex: je suis sur la page correspondant au sous menu 2.4 du menu principal 2.
Je veux aller sur le menu 3. (le sous menu 3 se déroule en fermant le sous menu 2).
La page du sous-menu 3.1 se lance (en mettant le lien actif du sous menu en surbrillance).
Et ainsi de suite.

Quelqu'un pourrait avoir la gentillesse de reprendre le code source du menu déroulant vertical de cette page en question :

Merci infiniment

Victor
Bonjour.
Je ne peux pas reprendre le code de la page que tu indiques, mais ton idée, à la base, c'est un peu comme le menu de mon site, à la différence près de la surbrillance et du fait que l'ouverture d'un sous-menu ne ferme pas le précédent qui était ouvert ?

Il fonctionne comme ceci :
Un clic sur un titre de sous-menu déroule le sous-menu. Un deuxième le referme.
Un clic sur un lien enregistre l'état du menu dans un cookie javascript, la nouvelle page est affichée, et l'état du menu est restauré grâce au cookie.
Chaque sous-menu est indépendant par rapport aux autres, dans le sens que tous les sous-menus peuvent êtr ouverts en même temps. Mais bon, on peut adapter ce comportement pour que l'ouverture d'un nouveau menu ferme le dernier ouvert.

et pour pouvoir afficher la page active en surbrillance, je pense qu'il faut passer par une comparaison des URLs, à mon avis on ne peut pas faire autrement.

Voilà.
Bonjour, à peu prés comme ceci ?
Pour sélectionner le lien, je compare l'url de la page avec le lien du menu correspondant par javascript, mais pour rendre la page accessible sans js, il faudrait le faire manuellement par CSS. Je réfléchi à cela, mais c'est pas évident en gardant la possibilité de mettre la liste dans un include.
Oui chmel, merci de ta réponse.
ça ressemble un peu à ce que tu m'as montré ... avec en + les menus actifs en surbrillance pour indiquer à l'internaute où il se trouve et que ça ouvre le 1er sous menu du nouveau menu cliqué.
victor.quentin a écrit :
Oui chmel, merci de ta réponse.
ça ressemble un peu à ce que tu m'as montré ... avec en + les menus actifs en surbrillance pour indiquer à l'internaute où il se trouve .

Je pense que c'est ce qui se passe . As-tu essayé d'aller sur les liens style2 et style1 qui utilisent le m^me script ?
Modifié par chmel (20 Oct 2005 - 10:49)
Le mieux pour activer la surbrillance du lien est de vérifier l'URL côté serveur avec du php. Comme ça sans js, ça marche quand même.

Question prog php du menu, je vois bien un truc du genre :


$menu = array(
"Item 1"=>"/page1.html",
"ITem 2"=>"/page2.html",
"Item 3"=>"/page3.html"
);

echo "<ul>";
foreach ($menu as $label => $url) {
if ($_SERVER['PHP_SELF'] == $url) echo "<li class=\"surbrillance\">";
else echo "<li>";
echo "$label</li>";
}
echo "</ul>";
Merci QuentinC pour le script côté serveur, ça fonctionne aussi si je met le div "menu" dans un include ?
Modifié par chmel (21 Oct 2005 - 10:55)
Un include ne devrait normalement pas poser de problème tant que tu gardes les URLs relatifs à la racine de ton FTP.
bonjour,

j'aimerai faire la même chose mais je ne vois pas comment adapter ce code :
$menu = array(

"Item 1"=>"/page1.html",

"ITem 2"=>"/page2.html",

"Item 3"=>"/page3.html"

);



echo "<ul>";

foreach ($menu as $label => $url) {

if ($_SERVER['PHP_SELF'] == $url) echo "<li class=\"surbrillance\">";

else echo "<li>";

echo "$label</li>";

}

echo "</ul>";


à celui de http://css.alsacreations.com/xmedia/exemples/deroulant/menu-vertical.htm#

si quelqu'un pouvait me l'indiquer, je pourrais enfin avancer le site que je développe.

merci d'avance
ce que j'ai du mal à comprendre, c'est comment dérouler le menu au chargement au bon sous_menu ...