Changer la couleur d'un bordure d'un menu lors du survol d'un onglet de ce menu

**Leniouns** · 30/05/2015, 13h08

Bonjour à tous,

Je ne sais pas si le titre de mon sujet est assez clair.

En fait j'ai un menu auquel j'affecte une bordure en bas avec une couleur blanche pour qu'elle soit invisible. Lorsque je survol un onglet de ce menu j'aimerai que la bordure de ce menu change de couleur.

Pour être plus précis, voici mon code HTML :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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
<!DOCTYPE html>
<html>
	<head>
		<title>Mon site</title>
		<meta charset="UTF-8">
        </head>
	 <body>
        <header>
            <h1>mon site</h1>
        </header>
 
        <nav id="menu">
            <ul>
                <li id="accueil"><a href="#" >Accueil</a></li><!--
                --><li><a href="#">Toulouse FC</a></li><!--
                --><li><a href="#">Bande Dessinées</a></li>
            </ul>
        </nav>
 
 
        <section>
            <aside>
                <h1>À propos de l'auteur</h1>
                <p>Ma présentation</p>
            </aside>
            <article>                
                <h1></h1>
                <p>Bla bla bla bla (texte de l'article)</p>
            </article>
        </section>
 
        <footer>
            <p>Copyright monsite - Tous droits réservés<br />
            <a href="#">Me contacter !</a></p>
        </footer>
 
    </body>
 
</html>

Et voici mon CSS :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
nav {
	border-bottom: solid;
	border-width: 2px;
	border-color: white;
}
 
nav ul{
	padding: 0px;
	margin: 0px;
	list-style-type: none;
	background-color: #333333;
}
 
nav li{
	display: inline-block;
	width: 150px;
	height: 25px;
	margin: 0px;
	padding: 0px;
	border-right: 1px solid #CCCCCC;
	text-align: center;
	line-height: 25px;
}
 
nav li :hover{
	background-color: #3388BB;
}
 
nav li a{
	display: block;
	text-decoration: none;
	color: #FFFFFF;
}

Pour l'instant j'ai fait en sorte dans le CSS que lorsqu'on survol un onglet celui ci change de couleur, et donc j'aimerai que la bordure basse du menu aie la même couleur.

Il me semble que cela est impossible en CSS3, du coup j'ai effectué quelques recherches en JS et Jquery mais sans véritable succès.

Je vous remercie par avance pour votre aide et vous souhaite une agréable journée.

Cordialement,

Leniouns.

**NoSmoking** · 30/05/2015, 13h35

Bonjour,

Il me semble que cela est impossible en CSS3

en CSS tout court d'ailleurs, il te suffit d'ajouter ces caractéristiques sur e :hover.

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
nav li :hover{
    background-color: #3388BB;
    border-bottom:2px solid yellow; /* pour exemple */
}

**Leniouns** · 30/05/2015, 15h23

Ce n'est pas vraiment ce que je veux faire.

En fait je veux que la bordure soit tout au long du menu. Donc que ce soit la bordure du <nav> qui se colore. C'est pour cela que j'en ai créé une avec comme couleur blanche pour qu'elle soit invisible.

Mais par la suite je ne sais pas comment faire pour que lorsqu'on survol un onglet du menu cette bordure se colore.

Mais merci en tout cas pour ta contribution.

**NoSmoking** · 30/05/2015, 15h28

Donc que ce soit la bordure du <nav> qui se colore.

Dans ce cas

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
nav:hover {
    border-color: red; /* par exemple */
}

**Leniouns** · 30/05/2015, 15h42

Euh non plus...

Nom : Capture d’écran 2015-05-30 à 15.39.10.png
Affichages : 1184
Taille : 11,7 Ko

En fait par exemple si je met ma souris su l'onglet "Accueil", j'aimerai qu'une bordure faisant tout le menu s'affiche. Mais je ne veux pas que si je passe la souris a droite sur le menu (mais pas sur un onglet) que la bordure s'affiche.

Invité · 30/05/2015, 15h44

Bonjour ,

Envoyé par Leniouns

... j'ai un menu auquel j'affecte une bordure en bas avec une couleur blanche pour qu'elle soit invisible....

Ne pas confondre "blanc" et "invisible".
Si tu veux une bordure transparente (=> sans couleur) :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

border-color:transparent;

[EDIT] Pour ton histoire, on ne peut pas, en CSS, "remonter" la cascade (en amont) !

Par contre, il est possible de modifier un élément venant APRES (en aval).
Montre-nous le code de ton menu.

**Leniouns** · 30/05/2015, 16h01

Oui c'est vrai que ce n'est pas pareil.

Sur mon premier post j'ai mis le code HTML et CSS.

Il me semble en effet qu'en CSS c'est impossible et qu'il faut le faire avec un script JS non ?

Invité · 30/05/2015, 16h36

Voici une astuce :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
<nav id="menu">
<ul>
	<li><a href="#">menu 1</a></li><!--
 --><li><a href="#">menu 2</a></li><!--
 --><li><a href="#">menu 3</a></li><!--
 --><li><a href="#">menu 4</a></li><!--
 --><li><a href="#">menu 5</a></li><!--
 --><li class="ligne"></li>
</ul>
</nav>

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
#menu > ul { width:100%; margin:0; padding:0; list-style-type: none; background-color: #333333; }
#menu > ul> li:not(.ligne) { display:inline-block; margin:0; padding:0; border-right: 1px solid #CCCCCC; text-align:center; }
#menu > ul> li a { display:block; padding:5px; background:#ccc; min-width:150px; min-height:25px; line-height:25px; }
#menu > ul> li.ligne { display:block; clear:both; height:2px; background:transparent; }
#menu > ul> li:not(.ligne):hover ~ li.ligne { background:red; } /*  ~  est un sélecteur d'adjacence */

~ est un sélecteur d'adjacence

[EDIT] Cela dit... c'est se donner beaucoup de mal pour pas grand'chose !

**NoSmoking** · 30/05/2015, 16h53

Il me semblait qu'il y avait plus simple en reprenant légèrement le CSS

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
nav {
	border-bottom: solid;
	border-width: 2px;
	border-color: white;
	width:100%;                  /* Ajout */
	height:1.5em;                /* Ajout car UL en float:left */
	background-color: #333333;   /* Ajout par transfert du fond de UL */
}
nav ul:hover {
	border-bottom: solid;
	border-width: 2px;
	border-color: red;
}
nav ul{
	padding: 0px;
	margin: 0px;
	list-style-type: none;
	float:left;                  /* Ajout */
	height:1.5em;                /* Ajout */
}

surement à ajuster

Invité · 30/05/2015, 17h03

@NoSmoking :
Tu as raté une "subtilité" de la demande...

(que je n'ai moi-même vu qu'après relecture !)

Envoyé par Leniouns

...lorsqu'on survol un onglet celui ci change de couleur, et donc j'aimerai que la bordure basse du menu aie la même couleur...

Et pour que la ligne ait la même couleur que l'onglet au survol : http://codepen.io/jreaux62/pen/OVWzoz

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
#menu > ul { width:100%; margin:0; padding:0; list-style-type: none; background-color: #333333; }
#menu > ul> li:not(.ligne) { display:inline-block; margin:0; padding:0; border-right: 1px solid #CCCCCC; text-align:center; }
#menu > ul> li a { display:block; padding:5px; min-width:150px; min-height:25px; line-height:25px; color:#fff; }
#menu > ul> li a, #menu > ul> li a:hover { text-decoration:none; }
#menu > ul> li.ligne { display:block; clear:both; height:4px; background:transparent; }
 
#menu > ul> li#m1:hover, #menu > ul> li#m1:hover ~ li.ligne { background-color: #3388BB; }
#menu > ul> li#m2:hover, #menu > ul> li#m2:hover ~ li.ligne { background-color: red; }
#menu > ul> li#m3:hover, #menu > ul> li#m3:hover ~ li.ligne { background-color: yellow; }
#menu > ul> li#m4:hover, #menu > ul> li#m4:hover ~ li.ligne { background-color: green; }
#menu > ul> li#m5:hover, #menu > ul> li#m5:hover ~ li.ligne { background-color: pink; }

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
<nav id="menu">
<ul>
	<li id="m1"><a href="#">menu 1</a></li><!--
 --><li id="m2"><a href="#">menu 2</a></li><!--
 --><li id="m3"><a href="#">menu 3</a></li><!--
 --><li id="m4"><a href="#">menu 4</a></li><!--
 --><li id="m5"><a href="#">menu 5</a></li><!--
 --><li class="ligne"></li>
</ul>
</nav>

Et tout ça, SANS JavaScript !

**Leniouns** · 30/05/2015, 17h08

Merci pour vos solutions

En effet jreaux62 c'est le comportement attendu. J'essaye d'implémenter ça et je vous tiens au courant

Edit : C'est bon j'ai réussi

Merci pour votre aide. Je vais mettre en résolu, mais pour ma culture, y avait il un moyen de le faire en javascript ? Et si oui comment ?

Merci encore.

**Leniouns** · 30/05/2015, 20h16

Désolé pour le double post, mais j'ai de nouveau un problème.

J'arrive à faire le comportement voulu, et du coup quand je clique sur un onglet je veux que ce dernier reste bleu. Ca j'y arrive en allant sur la page du lien et en mettant l'onglet en bleu. Mais après je veux faire le même fonctionnement vu plus haut et donc quand on passe le curseur sur un autre onglet, l'onglet actif (de la page où on est) redevient gris et l'onglet survolé par le curseur (ainsi que la ligne) devienne bleu.

voici mon code CSS :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

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
nav {
	margin-left: 200px;
	margin-right: 200px;
}
 
nav li a{
	display: block;
	text-decoration: none;
	color: #FFFFFF;
}
 
#menu > ul { 
	width:100%; 
	margin:0; 
	padding:0; 
	list-style-type: none; 
	background-color: #333333; 
}
 
#menu > ul> li:not(.ligne) { 
	display:inline-block; 
	margin:0; 
	padding:0; 
	border-right: 1px solid #CCCCCC;
	text-align:center; 
	background:#333333; 
}
 
#menu > ul> li a { 
	display:block;
	padding:5px;
	min-width:150px;
	min-height:25px;
	line-height:25px; 
}
 
#menu > ul> li.ligne {
	display:block;
	clear:both;
	height:3px;
	background:#3388BB; 
}
 
#menu > ul> li#tfc {
	background-color: #3388BB;
}
 
#menu > ul> li#accueil:hover, #menu > ul> li#accueil:hover ~ li.ligne { 
	background-color: #3388BB;
}
 
#menu > ul> li#accueil:hover ~ li#bd{ 
	background-color: #333333; 
}
 
#menu > ul> li#bd:hover, #menu > ul> li#bd:hover ~ li.ligne {
	background-color: #3388BB; 
}
 
#menu > ul> li#tfc:hover, #menu > ul> li#tfc:hover ~ li.ligne { 
	background-color: #3388BB; 
}
 
#menu > ul> li#bd:hover ~ li#tfc{ 
	background-color: #333333; 
}

Donc là on est sur la page Toulouse FC. Le fonctionnement voulu marche quand je survole l'onglet accueil mais ça ne fonctionne pas quand je survole l'onglet Bande dessinée... C'est à ne rien comprendre.

Je vous remercie pour votre aide.

Cordialement,

Leniouns

**NoSmoking** · 30/05/2015, 23h05

(...)mais pour ma culture, y avait il un moyen de le faire en javascript ? Et si oui comment ?

oui en suivant le même principe sur le hover du <li> tu modifies la bordure basse du conteneur ou de son parent car contrairement au CSS en javascript on peut remonté l'arbre du DOM.

Concernant ton nouveau soucis je dirais qu'il faut que tu gères cela avec une class encours/actif, par exemple, que tu ajoute à l'onglet actif et qui aura des propriétés/valeurs différentes.

@jreaux62

Tu as raté une "subtilité" de la demande...

je dois admettre que cette subtilité m'a complétement échappée mais n'étant pas de nature subtil alors...

Et tout ça, SANS JavaScript !

certaines chose sont plus facile, ou presque, à mettre en oeuvre en CSS surtout avec les possibilités qu'offre le CSS3.

**Leniouns** · 31/05/2015, 09h02

Bonjour,

j'ai le même problème.

Voici le menu quand je suis sur la page Toulouse FC :

Nom : Capture d’écran 2015-05-31 à 08.57.22.png
Affichages : 1149
Taille : 12,4 Ko

Voici le menu quand je survol l'onglet Accueil :

Nom : Capture d’écran 2015-05-31 à 08.58.24.png
Affichages : 1189
Taille : 12,3 Ko

Là c'est le comportement attendu.

Mais voici ce qui se passe quand je survol l'onglet Bande Dessinée :

Nom : Capture d’écran 2015-05-31 à 08.59.58.png
Affichages : 1234
Taille : 12,4 Ko

Voilà mon code HTML avec une class en cours sur l'onglet TFC :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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
<!DOCTYPE html>
<html>
	<head>
		<title>Mon site - Supporter du TFC, amateur de BD, ingénieur en informatique, twittos à ses heures perdues.</title>
		<meta charset="UTF-8">
		 <!--[if lt IE 9]>
        <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
		<link rel="stylesheet" href="menuTFC.css"/>
		<link rel="stylesheet" href="footer.css"/>
		<link rel="stylesheet" href="header.css"/>
		<link rel="stylesheet" href="body.css"/>
	</head>
	 <body>
        <header>
            <h1>patrickaoun.fr</h1>
        </header>
 
        <nav id="menu">
            <ul>
                <li id="accueil"><a href="#" >Accueil</a></li><!--
                --><li id="tfc" class="en-cours"><a href="#">Toulouse FC</a></li><!--
                --><li id="bd"><a href="#">Bande Dessinées</a></li><!--
                --><li class="ligne"></li>
            </ul>
        </nav>
 
        <section>
            <aside>
                <h1>À propos de l'auteur</h1>
                <p>Ma présentation</p>
            </aside>
            <article>                
                <h1></h1>
                <p>Bla bla bla bla (texte de l'article)</p>
            </article>
        </section>
 
        <footer>
            <p>Copyright monétise - Tous droits réservés<br />
            <a href="#">Me contacter !</a></p>
        </footer>
 
    </body>
 
</html>

Et mon code CSS, avec pourtant le même fonctionnement lorsqu'on survol bd et accueil :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
nav {
	margin-left: 200px;
	margin-right: 200px;
}
 
nav li a{
	display: block;
	text-decoration: none;
	color: #FFFFFF;
}
 
#menu > ul { 
	width:100%; 
	margin:0; 
	padding:0; 
	list-style-type: none; 
	background-color: #333333; 
}
 
#menu > ul> li:not(.ligne) { 
	display:inline-block; 
	margin:0; 
	padding:0; 
	border-right: 1px solid #CCCCCC;
	text-align:center; 
	background:#333333; 
}
 
#menu > ul> li a { 
	display:block;
	padding:5px;
	min-width:150px;
	min-height:25px;
	line-height:25px; 
}
 
#menu > ul> li.ligne {
	display:block;
	clear:both;
	height:3px;
	background:#3388BB; 
}
 
#menu > ul> li.en-cours {
	background-color: #3388BB;
}
 
#menu > ul> li#accueil:hover, #menu > ul> li#accueil:hover ~ li.ligne { 
	background-color: #3388BB;
}
 
#menu > ul> li#accueil:hover ~ li.en-cours{ 
	background-color: #333333; 
}
 
#menu > ul> li#bd:hover, #menu > ul> li#bd:hover ~ li.ligne {
	background-color: #3388BB; 
}
 
#menu > ul> li#tfc:hover, #menu > ul> li#tfc:hover ~ li.ligne { 
	background-color: #3388BB; 
}
 
#menu > ul> li#bd:hover ~ li.en-cours{ 
	background-color: #333333; 
}

Invité · 31/05/2015, 10h22

Quel intérêt de changer "dynamiquement" la couleur de la ligne si c'est... la MEME couleur (bleue) pour TOUS les menus ???

Ca ne vaut pas la peine de s'embêter avec tout ça !

Pour ton problème : ~ ne fonctionne qu'avec les "frères en amont" ! donc pas sur les li "en aval" ("avant")

**Leniouns** · 31/05/2015, 10h28

En fait la ligne apparait seulement lorsqu'on survole un onglet. Mais je viens de me poser la question si je vais changer la couleur de l'onglet où on est... Je vais essayer de faire autrement car en effet à part lorsqu'on arrive sur la première page, si on se balade dans le site, changer la couleur de la ligne ne veut plus rien dire vu qu'elle sera toujours bleu.

Allez je laisse à résolu

Merci encore pour votre disponibilité

Invité · 31/05/2015, 10h30

Le seul intérêt est quand on a des onglets avec des couleurs différentes au survol

Invité · 31/05/2015, 10h33

voilà le code (simplifié) qui résoud ton pb :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

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
#menu {
	margin: 0 20%;
}
 
#menu li a{
	display: block;
	text-decoration: none;
	color: #FFFFFF;
}
 
#menu > ul { 
	width:100%; 
	margin:0; 
	padding:0; 
	list-style-type: none; 
	background-color: #333333; 
}
 
#menu > ul> li:not(.ligne) { 
	display:inline-block; 
	margin:0; 
	padding:0; 
	border-right: 1px solid #CCCCCC;
	text-align:center; 
	background:#333333; 
}
 
#menu > ul> li a { 
	display:block;
	padding:5px;
	min-width:150px;
	min-height:25px;
	line-height:25px; 
}
 
#menu > ul> li.ligne {
	display:block;
	clear:both;
	height:3px;
	background:#3388BB; 
}
 
#menu > ul> li.en-cours {
	background-color: #3388BB;
}
 
#menu > ul:hover li { 
	background-color: #333333; 
}
#menu > ul> li:hover, #menu > ul> li:hover ~ li.ligne {
	background-color: #3388BB; 
}

N.B. Ce code fonctionne quelle que soit la page où on se trouve.

Seule la class "en-cours" est à ajouter dans le code HTML de la page, sur l'onglet concerné.

**Leniouns** · 31/05/2015, 11h06

Merci pour ta dernière solution

Changer la couleur d'un bordure d'un menu lors du survol d'un onglet de ce menu

Survol d'un élément en CSS (:hover)

Discussions similaires

Partager

Partager