:hover et :active

Version imprimable

:hover et :active

Bonsoir à tous et à toutes,

Je me suis inscrite sur ce forum car j'espère obtenir de l'aide pour mon petit problème, ça fait un petit bout de temps que je bloque là dessus: ( je suis débutante)

je vous explique, j'ai attribué au menu une couleur et un soulignement au moment où on le "survol" mais je voudrais une fois que l'on clique dessus que la couleur et le soulignement restent.

Voilà mon code en .css: (j'ai ajouté la dernière ligne de code mais ça ne fonctionne pas.)

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
#topMenu {
	text-align: center;
	margin-top:95px;
	width:100%;
	bottom:20px;
	position:absolute;
}
 
#topMenu ul{
	text-align:center;
	padding:15px 0;
	margin:0;
}
 
#topMenu ul li {
	display:inline;
	background:url(library/images/top_menu_separator.png) 100% 50% no-repeat hidden;
}
 
#topMenu ul li:last-child {
	background:none;
}
 
#topMenu ul li a {
	color:#737373;
	text-shadow:1px 1px #fff;
	text-transform:uppercase;
	padding:0 18px;
	text-decoration:none;
	font-size:14px;
	-webkit-transition:color 0.1s ease-in;
	-moz-transition:color 0.1s ease-in;
	-o-transition:color 0.1s ease-in;
	transition:color 0.1s ease-in;
}
 
#topMenu ul li a:hover, #topMenu ul li.sfHover a{
	color:#db639d;
	border-bottom: 2px dotted #8d94c5;
}
 
#topMenu ul li a:active,  #topMenu ul li.sfActive a{
	color:#db639d;
	border-bottom: 2px dotted #8d94c5;
}

Voici tout de même le code en .php :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!-- begin #topMenu -->
	<div id="topMenu">
 
	<?php
	site5_main_nav( array(
	 'container' =>false,
	 'menu_class' => 'sf-menu',
	 'echo' => true,
	 'before' => '',
	 'after' => '',
	 'link_before' => '',
	 'link_after' => '',
	 'depth' => 0,
	 )
	 );
	 // Adjust using Menus in Wordpress Admin ?>
 
	</div>
	<!-- end #topMenu -->
 
</header> <!-- end header -->

J'ai aussi remarqué qu'un autre fichier .css se centrait aussi sur le menu (ici je vous mets directement le code):

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
#topMenu .sf-menu ul {
	position:		absolute;
	top:			-999em;
	width:			200px; /*left offset of submenus need to match (see below) */
	text-align:left;
	background:#ccc;
	margin:0;
	padding:5px 0 10px;
	background:#F9F9F9 url(../images/bk_submenu.jpg) 0 100% repeat-x;
	-moz-box-shadow:0 0 3px 2px #DDDDDD;
	-webkit-box-shadow:0 0 3px 2px #DDDDDD;
	box-shadow:0 0 3px 1px #DDDDDD;
	border:1px solid #dedede;
	border-top:none;
}
#topMenu .sf-menu ul li {
	width:90%;
	background:none;
	position:relative;
	display:block;
	padding:7px;
	border-bottom:1px dotted #dcdcdc;
}
 
#topMenu .sf-menu li:hover;{
	visibility:		inherit; /* fixes IE7 'sticky bug' */
}
 
#topMenu .sf-menu li {
	/*float:			left;*/
	position:		relative;
}
#topMenu .sf-menu a {
	/*display:		block;*/
	position:		relative;
}
 
#topMenu .sf-menu li ul li  a {
	font-size:11px;
	padding:0 5px;
	display:block;
	color:#737373;
}
 
#topMenu .sf-menu li ul li  a:hover; {
	color:#F60B51;
;}
 
#topMenu .sf-menu li:hover ul 
#topMenu .sf-menu li.sfHover ul {
	left:			0;
	top:			29px; /* match top ul list item height */
	z-index:		101;
}
 
#topMenu ul.sf-menu li:hover li ul
#topMenu ul.sf-menu li.sfHover li ul {
	top:			-999em;
}
 
#topMenu ul.sf-menu li li:hover ul
#topMenu ul.sf-menu li li.sfHover ul {
	left:			190px; /* match ul width */
	top:			0;
 
}
 
}
#topMenu ul.sf-menu li li:hover li ul
#topMenu ul.sf-menu li li.sfHover li ul {
	top:			-999em;
}
 
 
#topMenu ul.sf-menu li li li:hover ul
#topMenu ul.sf-menu li li li.sfHover ul {
	left:			10em; /* match ul width */
	top:			0;
}

Merci d'avance pour votre aide :D

10/03/2013, 16h55
franck31

Bonjour,

On voit pas ton code php mais quand tu as cliqué sur un lien ajoute tu une class active à ce lien?
10/03/2013, 17h40
Melow_Melow
Bonjour,
Vous voulez voir mon code php en entier ? Car je n'ai mis que le morceau qui correspond au menu.

A vrai dire je n'ai pas modifié le .php car je ne m' y connais pas.
Néanmoins d'après ma logique ( tout dépend si elle est bonne ou non :lol: ) 'menu_class' est déclaré en tant que 'sf-menu' et quand je regarde le code .css
Code:

1 2 3 4 #topMenu ul li a:hover, #topMenu ul li.sfHover a{ color:#db639d; border-bottom: 2px dotted #8d94c5; }
Donc en fait le 'sf-menu' est en sfHover (survol) , donc j'ai juste changé le a:hover, en a:active et le .sfHover en .sfActive dans mon code .css . Mais je n'ai rien déclaré dans le .php car je ne sais pas comment faire.
10/03/2013, 19h20
rodolphebrd

Bonjour,

Pour obtenir votre effet utilisez la pseudo classe :visited
10/03/2013, 20h11
Melow_Melow

Bonsoir,

J'avais déjà testé cette méthode , mais malheureusement ça ne fonctionne pas, quand j'utilise la pseudo classe :visited , mon menu est alors d'office en couleur , le survol ne fonctionne plus en ce qui concerne la couleur ,il fonctionne juste en ce qui concerne le soulignement.
10/03/2013, 21h27
johnrock

Essaie d'abord de poster ton code HTML, je pourrais trouver une solution pour toi.
10/03/2013, 21h56
Melow_Melow

Bonsoir Jonhrock,

Dans mon template , il n 'y a que des fichiers .php , .css et du jquery. :( Je viens de vérifier dans les dossiers.
10/03/2013, 22h18
johnrock

Dans ce cas essaie de poster le code du ficher .php contenant le menu
10/03/2013, 23h05
NoSmoking

Bonsoir,

Citation:

Envoyé par Melow_Melow

Bonsoir Jonhrock,

Dans mon template , il n 'y a que des fichiers .php , .css et du jquery. :( Je viens de vérifier dans les dossiers.

ouvre ton fichier dans le navigateur puis affiche la source, CTRL +U, tu verras à partir de quoi le navigateur affiche la page.
11/03/2013, 09h26
franck31

Apparemment ton code fournit une class lorsque tu as cliqué sur le menu:

Code:

#topMenu ul li.sfActive a

Donc il faut regarder que ton menu soit bien dans l'id topMenu
11/03/2013, 09h41
johnrock

c'est pourquoi je lui ai demandé le code source de la page afin d'être sûre de tout ça.

Salut,

J'ai pas tout suivi, mais en mettant en forme ton code, j'ai identifié deux soucis.

Tu as un ; en trop ici.
Code:

1 2 3 #topMenu .sf-menu li ul li a:hover; { color:#F60B51; ;}
Tu as une accolade en trop ici.
Code:

1 2 3 4 5 6 7 8 #topMenu ul.sf-menu li li:hover ul #topMenu ul.sf-menu li li.sfHover ul { left: 190px; /* match ul width */ top: 0; } }

11/03/2013, 13h51
Melow_Melow

Déjà Merci à tous de vouloir m'aider :)

Je me demande si je vous passais le template de base que j' ai trouvé, il y a tous les dossiers ! Comme ça vous pourrez directement avoir les dossiers et tous les fichiers?! C'est le template n°17: Simple'n'bright .

http://wp-themes-pro.com/theme-wordp...themesgratuits

Et les codes que je vous avais mis précédemment viennent des fichiers:
style.css
header.php

et dans les dossiers library---> css
le fichier superfish.css

J'espère que ça pourra aider .
11/03/2013, 14h15
franck31
si tu utilise ce template sans modif la class qui permet de modifier le lien actif est:
Code:

1 2 3 4 li.current_page_item a{ //ton code ici }
11/03/2013, 14h48
Melow_Melow
Alors là je suis hyper contente :ccool: , une fois cliqué , le soulignement reste, néanmoins la couleur ne reste pas , pourtant j'ai mis dans la balise :
Code:

1 2 3 4 li.current_page_item a{ color:#db639d; border-bottom: 2px dotted #8d94c5; }
11/03/2013, 15h07
Melow_Melow
C'est bon j'ai trouvé la soluce ,il fallait que je rajoute #topMenu :)
Code:

1 2 3 4 #topMenu li.current_page_item a{ color: #db639d; border-bottom: 2px dotted #8d94c5; }
11/03/2013, 15h11
Melow_Melow

Encore un grand grand merci à tous ceux qui ont eu la gentillesse de m'aider.

:ccool: :ccool: