Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

  1. #1
    Membre du Club
    Homme Profil pro
    Développeur informatique
    Inscrit en
    juin 2012
    Messages
    75
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Haute Garonne (Midi Pyrénées)

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : juin 2012
    Messages : 75
    Points : 57
    Points
    57
    Par défaut activer la classe active dans la barre de navigation en PHP
    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 ?

  2. #2
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    16 587
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 52
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Arts - Culture

    Informations forums :
    Inscription : août 2008
    Messages : 16 587
    Points : 34 180
    Points
    34 180
    Par défaut
    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.
    "Si tu suis le chemin qui s'appelle « plus tard », tu arriveras à la place qui s'appelle « jamais »."
    François Camille Prévot (1910-1996), instituteur puis Directeur d'école et... mon grand-père.
    "Pose ta question, tu seras idiot une seconde. Ne la pose pas, tu seras idiot toute ta vie."
    Albert Einstein (1879-1955).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

  3. #3
    Membre actif
    Avatar de Sparky95
    Homme Profil pro
    à la recherche d'un travail comme programmeur web full-stack junior
    Inscrit en
    décembre 2016
    Messages
    274
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 24
    Localisation : Belgique

    Informations professionnelles :
    Activité : à la recherche d'un travail comme programmeur web full-stack junior
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : décembre 2016
    Messages : 274
    Points : 280
    Points
    280
    Par défaut
    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

  4. #4
    Membre du Club
    Homme Profil pro
    Développeur informatique
    Inscrit en
    juin 2012
    Messages
    75
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Haute Garonne (Midi Pyrénées)

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : juin 2012
    Messages : 75
    Points : 57
    Points
    57
    Par défaut
    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.

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Comment masquer une URL dans la barre de navigation
    Par tim1789 dans le forum Langage
    Réponses: 11
    Dernier message: 14/10/2010, 19h07
  2. Réponses: 2
    Dernier message: 17/09/2010, 11h30
  3. Nouvel étage dans la barre de navigation developpez.com
    Par Marc Lussac dans le forum Evolutions du club
    Réponses: 8
    Dernier message: 15/01/2009, 14h55
  4. Réponses: 3
    Dernier message: 09/04/2007, 11h23

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo