Discussion :

[lnquaidorsay]

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 :

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

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

//page menu

Code :

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

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 :

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

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 ?

[Invité]

Bonjour,

Que vient faire ici le jQuery ?

Une solution :

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 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.

[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

[lnquaidorsay]

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 :

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
<?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 css :

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

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

et côte js

Code js :

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

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.