18041 sujets

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

C'est Hover ou c'est fermé???

Bonjour à tous,

J'ai suivi le tuto "Créer un menu déroulant “accordéon” avec jQuery".

Je suis fier de vous dire que j'ai réussssssssssssssssiii Smiley smile

Bref je rencontre quand même un petit soucis.
Mon site va se composer d'une "div Menu" et une "div conteneur", le but est que si une personne clic sur un de mes liens celui ci prend une couleur différente des autres lien et un contenu se charge dans ma "div conteneur", si l'on clic sur un autre lien, le premier lien reprend sa couleur initial et le nouveau lien cliqué prend l'autre couleur.

J'ai pas mal cherché et testé les (a:link, a:hover,a:visited)
mais comme mon menu reste toujours le même ce principe ne fonctionne pas.)


Si quelqu'un peu m'aiguiller sur la technique a utiliser, css? javascript?...?
Au passage si je peux avoir des infos sur comment charger des div je suis preneur.

Merci d'avance,
Bonne fête de fin d'année à tous.

H.I.M

PS : les codes

HTML

<!--DIV menu-->
<div id="menu">
	<ul class="navigation">
    	<li id="titre" class="toggleSubMenu"><span>AGENCE</span>
        	<ul class="subMenu">
            	<li id="soustitre"><a href="#" title="Aller à la page 1.1">QUI SOMMES NOUS</a></li>
            	<li id="soustitre"><a href="#" title="Aller à la page 1.2">QUE FAISONS NOUS</a></li>
        	</ul>
    	</li>
        <li id="titre" class="toggleSubMenu"><span>CREATIONS</span>
        	<ul class="subMenu">
            	<li id="soustitre"><a href="#" title="Aller à la page 2.1">MODE</a></li>
            	<li id="soustitre"><a href="#" title="Aller à la page 2.2">DECO</a></li>
                <li id="soustitre"><a href="#" title="Aller à la page 2.3">MRRKETING DIRECT</a></li>
            	<li id="soustitre"><a href="#" title="Aller à la page 2.4">IMAGE DE MARQUE</a></li>
            	<li id="soustitre"><a href="#" title="Aller à la page 2.5">EDITION</a></li>
            	<li id="soustitre"><a href="#" title="Aller à la page 2.6">REFERENCES</a></li>

        	</ul>
    	</li>
        <li id="titre" class="toggleSubMenu"><span>CONTACT</span>
        	<ul class="subMenu">
            	<li id="soustitre"><a href="#" title="Aller à la page 3.1">NOUS TROUVER</a></li>
            	<li id="soustitre"><a href="#" title="Aller à la page 3.2">NOUS ECRIRE</a></li>
        	</ul>
    	</li>
	</ul>
</div>


le CSS

a:link {
	color:#262727;
	text-decoration:none;
}
	
a:hover {
	color:#4F5150;
text-decoration:none;
}

a:visited {
	color:#FFF;
}


Le JAVASCRIPT du menu

$(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;
    });    


} ) ;
Hello !!

Merci pour ta réponse, j'ai réussi avec du CSS, par contre il n'ai pas géré par mon safari ???

#navigation a {
	color:#262727;
	text-decoration:none;
}

#navigation a:hover, #navigation a:focus {
	color:#4F5150;
	text-decoration:none;
}

#navigation #en-cours a {
	color:#FFF;
}
Afin de me mettre au css3, J'ai crée une animation sur les liens de mon menu comme suit :
Mais j'ai un petit soucis.


#navigation a {
	color:#262727;
	text-decoration:none;
	-webkit-transition: color .6s ease-in;
    -moz-transition: color .46s ease-in;
    -o-transition: color .6s ease-in;
    transition: color .6s ease-in;
}

#navigation a:hover, #navigation a:focus {
	color:#CCC;
	text-decoration:none;
}

#navigation #en-cours a {
	color:#CCC;
	text-decoration:none;
}


Le problème c'est qu'une fois que je clic sur le lien il ne reste pas en color:#CCC
Si on peut m'aiguiller sûr ce que j'ai loupé??? merci
Sujet clos
Aller à