Personnaliser un menu déroulant JQuery (graphiquement + ergonomie)

Bonjour à tous,

je suis vraiment une quiche en prog, je vais donc essayer de vous expliquer le plus clairement mon problème.

J'ai personnalisé le menu déroulant expliqué sur le Tutoriel du site.

Vous pouvez voir à l'adresse suivante :
Il y a 3 pages HTML. les liens sont sur :
• Autocollant >> petit format
• Lexan
• Panneaux >> Akilux


Je pense avoir plus ou moins capté comment fonctionnait le Script + le CSS.
J'ai ajouté 2 lignes dans le script afin de ne pas bloquer le "rembobinage" du menu ouvert grâce à "open_at_load" lors du clique sur un autre menu déroulant.

en gras le code ajouté :

<script type="text/javascript">
    <!--
    $(document).ready( function () {
        // On cache les sous-menus
        // sauf celui qui porte la classe "open_at_load" :
        $("ul.subMenu:not('.open_at_load')").hide();
        // On selectionne tous les items de liste portant la classe "toggleSubMenu"
    
        // et on remplace l'element span qu'ils contiennent par un lien :
        $("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'evenement "click" sur les liens dans les items de liste
        // qui portent la classe "toggleSubMenu" :
        $("li.toggleSubMenu > a").click( function () {
            // Si le sous-menu etait deja ouvert, on le referme :
            if ($(this).next("ul.subMenu:visible").length != 0) {
                $(this).next("ul.subMenu").slideUp("normal", function () { $(this).parent().removeClass("open") } );
            }
            // Si le sous-menu est cache, on ferme les autres et on l'affiche :
            else {
				$("ul.subMenu").slideUp("normal", function () { $(this).parent().removeClass("open") } );
   				[b]$("ul.open_at_load").slideUp("normal", function () { $(this).parent().removeClass("open") } );[/b]
				$(this).next("ul.subMenu").slideDown("normal", function () { $(this).parent().addClass("open") } );
   				[b]$(this).next("ul.open_at_load").slideDown("normal", function () { $(this).parent().addClass("open") } );[/b]
           }
            // On empêche le navigateur de suivre le lien :
            return false;
        });
    
    } ) ;
    // -->
</script>

Lorsque l'on change de page, le menu de déroule bien en fonction de la class "open_at_load". Cependant, j'aimerais que la rubrique correspondant à la page garde la puce rose affichée. En effet, lors de la manipulation, on pige bien où on est : les puces deviennent roses, etc…

mais dès que l'on change de page, la puce de la rubrique déroulée devient blanche.

J'ai bien évidement fait plusieurs essais mais j'ai du mal à voir comment m'y prendre.

J'aimerai également faire la même chose avec les sous-menus, par exemple, on clique sur "petit format" de la rubrique "autocollant" et on arrive sur une nouvelle page où la sous-rubrique est écrite en Rose + mini puce rose.

J'espère avoir été clair.

Je ne demande pas une réponse toute cuite. Vous pouvez simplement me donner une piste. Je vous direz si je pige.




Modifié par bubble-tom (02 Dec 2008 - 18:03)

PS : j'ai fait ce menu en FLASH. (c'est maaaaaaaaaaaaaal)

ça marche mais c'est une usine à gaz. je voulais simplifier un peu tout ça.
et améliorer en même temps le référencement des pages (cf. flash tu l'as dans l'os)

le menu flash

Hello,

Il manque des liens dans ton premier post.

Flash c'est très bien mais pour ton menu c'est surgonflé car tu peux le faire très facilement avec du css et des puces personnalisables.

Bonsoir,

oui bien sûr que flash c'est pas bon dans ce cas là. C'est pourquoi j'ai fait ça en CSS + java.

par contre, je ne comprends pas… quel lien est manquant ? [mode boulet ON]

Sorry je n'avais pas compris que c'était un menu déroulant
Oui il faut du javascript mais là je ne peux pas t'aider.

copperfield a écrit :
Oui il faut du javascript

et oui, je me suis débrouillé jusqu'à un certain point, mais là j'aurais bien besoin de conseils lol

juste pour savoir vers où je dois orienter mes recherches.

à savoir, est-ce que pour avoir le résultat souhaité, je dois modifier de Script existant, ou bien, seulement jouer avec ma feuille de style.

voili voilo

Ami du jour… BONJOUR !!!!

au vue de l'enthousiasme que propose mon post

je revoie mes attente à la baisse (soit je me suis mal exprimé, soit c'est trop complexe)

L'idée serait donc de faire "la même chose que le menu flash",
c'est à dire, sans l'option "déroulante".

Mon problème : lors du Survol sur les sous-menus, le filé Rose passe par plusieurs balise différente…

c'est grave docteur ??

Bah oui c'est ce que je t'avais dit dans mon premier post.

Tu peux faire ce menu très facilement par du css.
Les puces peuvent être personnalisées par le css et pour ton filet rose la pseudo class :hover fera très bien l'affaire.

Ensuite ton code HTML est tout simplement l'utilisation des balises <ul> et <li>.

Tu trouveras ton bonheur ici:
http://www.crea-paradise.com/sujet-517-css-la-puce-square.html

Voilou
Modifié par copperfield (03 Dec 2008 - 16:20)