activer la classe active dans la barre de navigation en PHP

Version imprimable

Bonjour,

je suis en train de galerer pour gérer l'affichage de ma classe active sur la barre de navigation.

J'ai une premiere page d'accueil avec un bouton et je veux que lors du sur ce bouton, j'arrive sur la deuxième page avec un barre de navigation e <ul> <li>.

Et je veux que lors du click sur le bouton de la page d'accueil, je sélectionne par défaut le premier menu de navigation avec un couleur de fond.

et le click sur les autres menu applique le même style sur le menu cliqué et supprime sur l'ancien menu.

//page accueil
Code:

1 2 3 4 <div> <a href="page-menu.php" class="card-link">Voir Menu</a> </div>
//page menu
Code:

1 2 3 4 5 6 7 8 <nav class="nav-bloc-menu"> <ul id="list1"> <li id="testmenu" <?php if ($pec == 22) {echo "class=\"p22\"";}?>><a href="m1.php">Menu 1</a></li> <li <?php if ($pec == 23) {echo "class=\"p23\"";}?>><a href="m2.php">Menu 2</a></li> <li <?php if ($pec == 24) {echo "class=\"p24\"";}?>><a href="m3.php">Menu 3</a></li> </ul> </nav>
//jquery
Code:

1 2 3 4 5 6 7 8 $(".nav-bloc-menu ul a").click(function(){ $(".nav-bloc-menu ul a").css("background-color","rgba(255,255,255,1)"); $(this).css("background-color","#1c2335"); $(this).css("color","white"); });
je n'arrive pas à atteindre ma solution. Avez-vous des pistes ?

Bonjour,

Que vient faire ici le jQuery ? :koi:

Une solution :

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
<nav class="nav-bloc-menu">
	<ul id="list1">
<?php	
$pec = '22'; // pour TEST
 
$menus = [
	[ 
	 'nom' => 'Menu 1',
	 'url' => 'm1.php',
	 'pec' => '22',
	],
	[ 
	 'nom' => 'Menu 2',
	 'url' => 'm2.php',
	 'pec' => '23',
	],
	[ 
	 'nom' => 'Menu 3',
	 'url' => 'm3.php',
	 'pec' => '24',
	],
];
foreach( $menus as $menu )
{
	$menu['class'] = ($pec == $menu['pec'])? ' p'.$menu['pec'] : '';
	$menu['class'] .= (strpos($_SERVER['REQUEST_URI'] ,'/'.$menu['url']) )? ' active' : '';
?>
		<li class="<?php  echo $menu['class']; ?>"><a href="<?php  echo $menu['url']; ?>"><?php  echo $menu['nom']; ?></a></li>
<?php
}
?>
	</ul>
</nav>

Ensuite, on gère la classe .active en CSS.

24/01/2020, 10h16
Sparky95

Salut,
Pourquoi utilises-tu du JS?
au lieu de faire ça utilises du CSS avec une class bien plus logique.

Voila un exemple https://stackoverflow.com/questions/...tion-page-menu
en voici un autre https://www.alsacreations.com/astuce...-en-cours.html => il est également expliqué à la fin comment le faire en js.

ce n'est pas très difficile de faire quelque chose comme ça et il y a beaucoup d'exemples sur internet donc prochaine fois fais des petites recherches.
bonne journée

Salut à tous et merci à @jreaux62 et @Sparky

j'ai geré finalement en fonction d'une page et mis en place une classe css active.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<?php    
        $uri_path = parse_url($_SERVER['REQUEST_URI'], PHP_URL_PATH);
        $uri_segments = explode('/', $uri_path);
        $current_page= $uri_segments[0]; 
  ?>
<nav class="nav-bloc-menu">
    <ul id="list1">
    <li class="<?php if ($current_page == "p1.php" || $current_page == 
       "menu.php") 
      {?>active<?php }?>"><a href="p1.php">p1</a><li>
    <li class="<?php if ($current_page == "p2.php") {?>active<?php }?>"><a 
   href="p2.php">p2</a><li>
    <li class="<?php if ($current_page == "p3.php") {?>active<?php }?>"><a 
    href="p3.php">p3</a><li>
       </ul>
   </nav>

et code css

Code:

.nav-bloc-menu li .active{ background-color:#1c2335;color:white; }

et côte js

Code:

1
2
3
4
5
6
 $(document).ready(function(){
    $(".nav-bloc-menu ul  a").click(function(){
    $(".nav-bloc-menu ul a").css("background-color","rgba(255,255,255,1)");
    $(this).css("background-color","#1c2335");
    $(this).css("color","white");   });
    });

et ça marche. Merci encore.