Discussion :

[bierre02]

Bonjour à tous,

je suis stagiaire développeur, je fait une application flex et dans mon cahier des charges j'ai des onglets, et l'onglet sélectionné est surligné d'une couleur. J'ai mis un exemple en pièce jointe. Est-ce que quelqu'un saurait comment faire ça en css, j'en ai absolument aucune idée, et ce n'est pas mon point fort le css ...

Donc si quelqu'un peut m'aider, merci d'avance !!

[rodolphebrd]

Bonjour,

Voici un exemple de menu avec effet de soulignement:

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
67
li:hover ~ li:last-child::after {
/* modification de la taille et de la position */
}
ul{
    position:relative;
    height:2em;
    margin:30px 100px;
    padding:0;
    white-space:nowrap;
}
ul li{
    display:inline;
    text-align:center;
}
ul li:nth-child(1) a{width:11em;}
ul li:nth-child(2) a{width:6em;}
ul li:nth-child(3) a{width:9em;}
ul li:nth-child(4) a{width:5em;}
ul li:nth-child(5) a{width:7em;}
 
ul li a{
    display:inline-block;
	box-sizing:border-box;
	-webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    padding:0.4em 0.2em;
    color:#51C3FA;
    text-decoration:none;
    text-shadow:0 1px 0 white;
    background-color:transparent;
	transition:background-color 0.3s ease;
    -webkit-transition:background-color 0.3s ease;
	-moz-transition:background-color 0.3s ease;
 
 
}
ul li a:hover,ul li a:focus{
    color:#c351fa;
    background-color:rgba(255,255,255,0.4);
    transition:background-color 0.3s ease 0.4s;
	-webkit-transition:background-color 0.3s ease 0.4s;
	-moz-transition:background-color 0.3s ease 0.4s;
}
ul li a:focus{
    border-bottom:3px solid #c351fa;
}
ul li:last-child::after{
    content:"";
    position:absolute;
    left:0px;
    bottom:-3px;
    display:block;
    width:11em;
    height:3px;
    background:#ccc;
    border-bottom:1px solid rgba(255,255,255,0.8);
    transition: all 0.5s ease;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
}
ul li:hover ~ li:last-child::after,
ul li:lastchild:hover::after{background:#C351FA;}
ul li:nth-child(1):hover ~ li:last-child::after{left:0;width:11em;}
ul li:nth-child(2):hover ~ li:last-child::after{left:11em;width:6em;}
ul li:nth-child(3):hover ~ li:last-child::after{left:17em;width:9em;}
ul li:nth-child(4):hover ~ li:last-child::after{left:26em;width:5em;}
ul li:last-child:hover::after{left:31em;width:7em;}

Code html :

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

1
2
3
4
5
6
7
8
 
<ul>
    <li><a href="#">Les prestations d'accueil</a></li><!--
 --><li><a href="#">les activités</a></li><!--
 --><li><a href="#">Votre récapitulatif</a></li><!--
 --><li><a href="#">Le coût</a></li><!--
 --><li><a href="#">Le règlement</a></li>
</ul>

Et pour la sélection de l'item souligné il faudra passer par JavaScript:http://www.richnetapps.com/automatic...rrent_page_in/

[bierre02]

Merci de cette réponse rapide, je vais regarder ça.