28172 sujets

CSS et mise en forme, CSS3

Class " active " ne fonctionne qu'à moitié ?

Bonjour à tous,

Je viens vers vous car j'ai un petit soucis.

Je suis sur la réalisation d'un site et je me sers d'un menu Boostrap que j'ai pris ici : https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_navbar_collapse&stacked=h

Je l'ai installé, il fonctionne très bien sauf que la class " active " ne fonctionne qu'à moitié !

Sur le lien, on voit que le " Home " sélectionné ( donc lien actif ) a un background-color avec un noir + foncé que le reste.

Si j'ai bien compris lors d'un clic sur un autre lien de navigation, celui-ci prends la class active, cependant chez moi ça ne fonctionne pas !

Sur le lien, on ne peux pas sélectionné les autres menus car ils mènent à rien mais sur mon menu les liens redirigent vers d'autres pages et la class active ne fonctionne pas.

Ai-je mal compris cette class ?
Modérateur
Salut,

Comment est construit ton site ? Le header est en commun ? Comment colles-tu la classe "active" sur le menu correspondant ? Tu as un exemple en ligne ?
Salut
Oui vous avez mal compris cette classe.


la classe active n'est pas "automatique", en tout cas pas dans votre exemple. c'est une simple classe basique. A ne pas confondre avec le pseudo élement :active dont j'ai l'impression que votre demande se rapproche le plus.
Modifié par JENCAL (18 Feb 2019 - 17:02)
Bonjour merci pour vos réponses.

@_laurent : C'est une refonte de site sous WordPress, cependant je modifie les éléments pour arriver au résultat souhaité.
Le header est en commun.
Mon menu est en position fixe et il est présent sur toute les pages du site.
Voici comment j'ai collé la class active : 

<li class="active"><a href="http://url-du-site.fr/">Accueil</a></li>



@JENCAL : Comment la rendre automatique ?
J'ai été voir le pseudo élément :active, cependant celui ne fonctionne que lorsque l'on reste cliqué sur l'élément, or je souhaiterais que l'élément prenne la forme demandé dès lors qu'on est sur cette page Smiley rolleyes
Sois tu as plusieurs pages HTML et a chaque fois tu repositionne la classe active sur le bon élements, soit tu le fais en javascript (ou JQUERY que je préfère)

tu peux utiliser avec jquery des méthode pour récupèrer ton URL et voir ce qu'elle contient, puis suivant ce qu'elle contient faire un changement de classe sur ton élément menu en faisant des addClass removeClass ou encore toggleClass.
Meilleure solution
JENCAL a écrit :
Sois tu as plusieurs pages HTML et a chaque fois tu repositionne la classe active sur le bon élements, soit tu le fais en javascript (ou JQUERY que je préfère)

tu peux utiliser avec jquery des méthode pour récupèrer ton URL et voir ce qu'elle contient, puis suivant ce qu'elle contient faire un changement de classe sur ton élément menu en faisant des addClass removeClass ou encore toggleClass.


Merci pour ta réponse, je vais me pencher dessus !
Modérateur
Juste au passage si c'est une refonte sous Wordpress tu as déjà des choses prévues pour construire ton menu en php plutôt que de le construire en dur et d'aller analyser l'url en Js coté client.... non ? Smiley lol mais bon si tu arrive au résultat souhaité je sors peut etre un peu du scope.

Bon code
Modérateur
Ou un peu plus artisanalement, j'utilise juste ce petit bout de php pour construire le menu (défini dans l'admin de wordpress) comme je l'entend :

<?php
$menu_items = wp_get_nav_menu_items('menu');
if( $menu_items ) { ?>
	<nav>
		<ul>
			<?php foreach ($menu_items as $menu_item ) { ?>
				<li>
					<a href="<?php echo $menu_item->url; ?>"><?php echo $menu_item->title; ?></a>
				</li>
			<?php } ?>
		</ul>
	</nav>
<?php }; ?>


Il suffit de coller les bonnes classe de Bootstrap et les balise que tu veux pour coller au template.

Par contre j'ai pas mis de class active pour le moment, je m'en sert sur une navigation interne à la page avec des ancres. Faut juste rajouter un petit check ca devrait pas etre trop dur.
Sujet clos
Aller à