18041 sujets

Questions générales et questions de débutants

Menu accordéon (rendre clicable)

Bonjour et bienvenue parmi nous Smiley smile

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle. Smiley cligne

D'ailleurs, je rappelle que le lien qui apparaît en bandeau tout en haut du forum ("Nouveau sur le forum ?...") est important. Il contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Il serait courtois de ta part de bien vouloir en prendre connaissance.

Bonne continuation Smiley smile

upload/1-code.gif
Et pour en venir au sujet lui-même...

tchiiboo a écrit :
j'aimerais faire en sorte que le premier item soit clicable et ouvre en même temps qon sous menu.

Euh... c'est-à-dire? Lorsque je clique sur ce premier item, que doit-il se passer exactement?
- le sous-menu s'ouvre?
- l'URL du lien du premier item est chargée?
- les deux à la fois (là je vois mal comment...)?
Désolée pour la mise en page je n'avais pas tout vu... Smiley confused

Donc j'aimerais que le 1° item soit clicable genre:
ITEM1
Sous item 1
Sous item 2

Car le tutorial rend bien les sous item clicable mais pas les item en eux-même.


<script type="text/javascript">
<!--
<!--
$(document).ready( function () {
// On cache les sous-menus :
$(".navigation ul.subMenu").hide();
// On sélectionne tous les items de liste portant la classe "toggleSubMenu"

// et on remplace l'élément span qu'ils contiennent par un lien :
$(".navigation li.toggleSubMenu span").each( function () {
// On stocke le contenu du span :
var TexteSpan = $(this).text();
$(this).replaceWith('<a href="" title="Afficher le sous-menu">' + TexteSpan + '<\/a>') ;
} ) ;

// On modifie l'évènement "click" sur les liens dans les items de liste
// qui portent la classe "toggleSubMenu" :
$(".navigation li.toggleSubMenu > a").click( function () {
// Si le sous-menu était déjà ouvert, on le referme :
if ($(this).next("ul.subMenu:visible").length != 0) {
$(this).next("ul.subMenu").slideUp("normal");
}
// Si le sous-menu est caché, on ferme les autres et on l'affiche :
else {
$(".navigation ul.submenu").slideUp("normal");
$(this).next("ul.subMenu").slideDown("normal");
}
// On empêche le navigateur de suivre le lien :
return false;
}); 


} ) ;
// -->


et dans mon XHTML , voici mon menu, je voudrais celui qui est en rouge devienne clicable. J'ai mis un lien mais ça ne marche pas lorsque que le menu n'est pas déplié.

<ul class="navigation">
<li class="toggleSubMenu"><a href="../early_universe/early_universe.html" target="_self">[#red]Messenger from <br />the early universe[#green]</a>
<ul class="subMenu">
<li ><a href="../early_universe/first_picture.html" target="_self">• First picture of the universe</a></li>
<li><a href="../early_universe/bigbang.html" target="_self">• Tracking back to the Big Bang</a></li>
<li ><a href="../early_universe/darckside.html" target="_self">• Dark side of the universe</a></li>
</ul>
</li>
<li class="toggleSubMenu"><a href="../violent_universe/violent_universe.html" target="_self">Messenger from <br />
the violent universe</a>
<ul class="subMenu">
<li><a href="../violent_universe/exotic_sources.html" target="_self">• News from exotic sources </a></li>
<li><a href="../violent_universe/atmosphere.html" target="_self">• The atmosphere as a detector </a></li>
<li ><a href="../violent_universe/outer_space.html" target="_self">• Searching in outer space </a></li>
</ul>
</li>
<li class="toggleSubMenu"><a href="invisible_universe.html" target="_self">Messenger from <br />
the invisible universe</a>
<ul class="subMenu">
<li><a href="ghost_particles.html" target="_self">• Ghost particles </a></li>
<li><a href="rare_phenomena.html" target="_self">• Very are phenomena </a></li>
<li ><a href="neptune_Kingdom.html" target="_self">• In neptune's kingdom </a></li>
</ul>
</li>
</ul>


Merci. Smiley smile
J'aimerais que
l'ITEM1 puisse mener vers une page web
tout en déroulant ses sous item

Merci d'avance. Je me suis bien cassé la tête pendant des jours et je n'y arrive pas, mais je ne suis pas une très grande pro du javascript. alors, je compte sur un sauveur SUPER calé en code.
Smiley cligne

+
tchiiboo a écrit :
J'aimerais que
l'ITEM1 puisse mener vers une page web
tout en déroulant ses sous item

Je veux bien, mais ça c'est plus ou moins impossible.

Si tu places un lien sur l'intitulé ITEM1, et que tu ne bloques pas en Javascript l'action normale suite au clic (le chargement de la page), il se passera ceci:
- le script JS déroule le sous-menu correspondant à ITEM1;
- en même temps, le navigateur charge une page différente;
- tout disparait, on se retrouve sur une page différente, et le sous-menu est refermé.

Donc ça ne marche pas.

Ce qui est possible, par contre, c'est d'avoir un menu dynamique tel que:
- sur la page d'accueil, on a des liens vers les principales rubriques (ITEM1, ITEM2, ITEM3), et c'est tout;
- si je clique sur une rubrique, je charge la page de la rubrique (et c'est tout aussi);
- sur la page de la rubrique, disons ITEM1, j'ai un menu avec la structure suivante:
ITEM1
    Item 1.1
    Item 1.2
    Item 1.3
ITEM2
ITEM3

Mais là il s'agit juste de structurer un menu dont l'état exact dépend de la page chargée. Et ça se fait sans la moindre ligne de Javascript (mais plutôt côté serveur, en PHP par exemple). Smiley cligne
Modifié par Florent V. (07 Jan 2008 - 18:09)
Sujet clos
Aller à