28172 sujets

CSS et mise en forme, CSS3

[Résolu] Menu Shrink : comment changer la couleur d'un souligné au cli

Bonjour,
J'ai une navbar avec caractères blancs, ces derniers deviennent noirs lors du clic (menu "shrink"). Mais je ne trouve pas de solution pour que le souligné change aussi de couleur Smiley decu
Je vous laisse les CSS :
/* nav */
#menutop nav .navbar-nav {
	margin:0 10px 0 0 !important;
	padding:0 !important;
	font-size: 0.8em;
}
#menutop nav .navbar-nav a {
	display: block;
	color: white;
	padding: 10px 6px 10px 0;
	line-height: 1.3em !important;
	font-family: 'Raleway', sans-serif;
	text-align:right;
	font-size: 1.3em;
}
#menutop nav .navbar-nav a:hover {
	color: white;
	filter: brightness(1.75);
}

nav li {
    display: inline-block;
    overflow:hidden;
    vertical-align: middle;
}
nav ul li:last-child {
    margin-right:0;
}
nav li a{
   display:block;
   padding: 8px 0;
   position:relative;
   font-size:1em;
   transition:font-size 0.2s;
}
nav li a::before {
    content:"";
    width:0;
    height:2px;
    background: white;
    position:absolute;
    bottom:0;
    left:50%;
    right:0;
    transition:all 0.2s;
}
nav li a:hover::before {
    min-width:100%;
    left:0;
}

/* ------------ */
/* Transitions and class for reduced height */
#menutop,
#menutop .navbar-brand,
#menutop .navbar-brand img,
#menutop nav .navbar-nav,
#menutop nav .navbar-nav a,
#menutop.menu-shrink {
	-webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s;
}
/* ------------ */
/* menu-shrink */
#menutop.menu-shrink {
	height: 80px;
}
#menutop.menu-shrink:hover {
	background-color: rgba(255,255,255,0.5);
}
#menutop.menu-shrink .navbar-brand {
	width: 75px;
	padding-left: 4px;
	padding-top: 4px;
}
#menutop nav .navbar-nav {
	padding-top:15px !important;
}
#menutop.menu-shrink nav .navbar-nav a {
	font-size: 1.3em;
	color: black;
}

Merci d'avance pour votre aide,
ED
Modérateur
Salut,

Au clic sur le <a> tu rajoutes la classe "menu-shrink" sur le menu c'est ça ?

On peut avoir ton bout de HTML aussi ? Ou mieux tu peux reproduire ce qui ne marche pas ici https://jsfiddle.net
Salut _laurent,
Au clic sur le <a> tu rajoutes la classe "menu-shrink" sur le menu c'est ça ?
Oui, c'est bien ça Smiley cligne
Ci-dessous mon html :
		<div id="menutop" class="menu">
			<nav class="navbar navbar-expand-sm p-0 m-0" aria-label="navbar">
			<div class="container-fluid p-0 m-0 align-items-start">

				<a href="#" class="navbar-brand"><img src="./imgs/logo_cut.png"></a>
                
				<button class="navbar-toggler navbar-dark m-2" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTop" aria-controls="navbarTop" aria-expanded="false" aria-label="Toggle navigation">
					<span class="navbar-toggler-icon"></span>
				</button>

				<div id="navbarTop" class="collapse navbar-collapse justify-content-end p-1 m-0">
					<ul class="nav navbar-nav px-3">
						<li class="nav-item">
							<a class="scrollTo" href="#section1">INTRO</a>
						</li>
						<li class="nav-item">
							<a class="scrollTo" href="#section2">SITES</a>
						</li>
						<li class="nav-item">
							<a class="scrollTo" href="#section3">LDDC</a>
						</li>
						<li class="nav-item">
							<a class="scrollTo" href="#section4">VIDEOS</a>
						</li>
						<li class="nav-item">
							<a class="scrollTo" href="#section5">PHOTOS</a>
						</li>
						<li class="nav-item">
							<a class="scrollTo" href="#section6">ME</a>
						</li>
					</ul>
				</div>

				</div>
			</nav>
		</div>

Merci Smiley smile
Merci pour ton jsfiddle Smiley smile Oui, c'est bien ça, le souligné qui vient en :hover. et qui au clic, affiche le menu shrink.
Quand j'arrive au menu "réduit", les caractères deviennent noirs, le souligné aussi, mais les soulignés de tous les "mots" (onglets") se déclenchent, ce qui créé une barre noire (un souligné partout). Smiley hum
Merci Smiley smile
Modérateur
el_debutanti a écrit :
C'est la première fois que j'utilise jsfiddle, j'espère que c'est bon Smiley rolleyes
https://jsfiddle.net/qe27dkys/

Il faut toujours une première fois Smiley lol

C'est tout bon sauf qu'il faut rajouter jquery (j'ai galéré longtemps avant de savoir comment le faire au début) : Menu "ressources" sur la gauche > chercher Jquery > petit "+" bleu pour l'ajouter.

https://jsfiddle.net/undless/94g5ovq8/2/

Revenons à nos moutons. J'ai du ajouter 2 ou 3 trucs pour pouvoir voir le shrink. c'est pas du tout au clic, c'est au scroll que tu l'ajoutes....

Et je ne vois toujours pas de longue barre noire tout le long...
Oui, pardon Smiley confused au scroll.
Alors là, j'ai typo blanche, souligné blanc, puis noir souligné blanc à la réduction. C'est bon, mais je veux le souligné noir.
/* ------------ */
/* menu-shrink */
#menutop.menu-shrink {
	height: 80px;
}
#menutop.menu-shrink:hover {
	background-color: rgba(255,255,255,0.8);
}
#menutop.menu-shrink .navbar-brand {
	width: 75px;
	padding-left: 4px;
	padding-top: 4px;
}
#menutop nav .navbar-nav {
	padding-top:15px !important;
}
#menutop.menu-shrink nav .navbar-nav a {
	font-size: 1.3em;
	color: black;
}


Alors, j'ai rajouté des CSS pour avoir le souligné noir mais il est sur "toute la largeur"; enfin plutôt sous chaque mot, mais en continu :
#menutop.menu-shrink nav .navbar-nav a::before {
    content:"";
    width:0;
    height:2px;
    background: black;
    position:absolute;
    bottom:0;
    left:50%;
    right:0;
    transition:all 0.2s;
}
#menutop.menu-shrink nav .navbar-nav:hover a::before {
    min-width:100%;
    left:0;
}

Peut-être qu'avec une capture, ce sera plus clair Smiley murf upload/1650463298-48192-capturedaeacran2022-04-20aa15.jpg
Modérateur
Ah bah oui c'est beaucoup plus clair !

Pas tant grâce a l'image mais surtout grâce au code CSS du trait noir que tu ne m'avais pas donné Smiley lol Smiley biggol

Bon alors c'est pas compliqué :
#menutop.menu-shrink nav .navbar-nav:hover a::before

c'est pas au survol de navbar-bar que tu veux mais du a... et pourtant tu l'avais bien fait pour le trait blanc :
nav li a:hover::before {
    min-width:100%;
    left:0;
}


Et sinon pourquoi tu rajoutes tout ça alors que tu veux juste changer la couleur du trait ?
Au lieu de 
#menutop.menu-shrink nav .navbar-nav a::before {
    content:"";
    width:0;
    height:2px;
    background: 
black;
    position:absolute;
    bottom:0;
    left:50%;
    right:0;
    transition:all 0.2s;
}
#menutop.menu-shrink nav .navbar-nav:hover a::before {
    min-width:100%;
    left:0;
}

un simple :
#menutop.menu-shrink nav .navbar-nav a::before {
    background: black;
}

suffit largement, tu as déjà tout le reste en place, il faut seulement surcharger la couleur non ?

https://jsfiddle.net/undless/94g5ovq8/7/
Meilleure solution
Modérateur
Cool alors Smiley biggrin
Et pense bien a donner un max d'infos et de code dès le début ca évitera de faire trop d'aller retour même si on aime bien discuter Smiley lol

Bonne aprem !
Sujet clos
Aller à