Active class in navigation menu in PHP

Question

I want to manage the display of my active class on the navigation bar.

I have a first home page with a button and when i click on this button. I want to arrive on the second page with a navigation menu with

<ul> <li> tags

And I want that when clicking on the button on the home page, by default I select the first navigation menu with a background color, and clicking on the other menus applies the same style to the clicked menu and deletes the active class on the old menu.

<pre>
    //home page
    <div>
      <a href="page-menu.php" class="card-link">Voir Menu</a>
    </div>
   // Menu page 
    <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
    $(".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");

   });
</pre>

my index.php page

<pre>
   <?php
   $pagetitle = "Page";
   $current_page = "menu.php";
  ?>
    <!DOCTYPE html>
      <html lang="fr">
          <head>
              <link rel="stylesheet" href="style.css">
           <script 
      src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"> 
         </script>
         <script src="script.js"> 
         </script>
          </head>
          <body>
               <div class="card">
                    <a href="menu.php" class="card-link">Voir Menu 
                       </a>
               </div>
          </body>
      </html>
</pre>

my menu.php page

<pre>
       <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>
</pre>

my script.js page

<pre>
    $(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");   });
     });
</pre>

my style.css page

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

Above is the code i am using but doesn't work, can anyone help?

You forgot to close parethesis for last css change and curly bracket for function. Check the console, you'll see some syntax errors. — Triby
– Triby, Commented Jan 24, 2020 at 2:55
$.css() is a function and expects comma separated parameters, not colon, example: $(this).css("color", "white");. Please check your console, you'll see this errors there. — Triby
– Triby, Commented Jan 24, 2020 at 7:30

siva.picky · Accepted Answer · 2020-01-24 08:47:46Z

0

Otherwise just do based on page ie.(index.php,about.php) and just write class .nav-menu li .active{ background:white;color:black; }

 <?php    
        $uri_path = parse_url($_SERVER['REQUEST_URI'], PHP_URL_PATH);
        $uri_segments = explode('/', $uri_path);
        $current_page= $uri_segments[0]; //ex: https://xxxx.com/about.php 
  ?>
  <ul class="nav-menu">
       <li class="<?php if($current_page=="index.php"){ ?>active<?php } ?>"><a href="index.php">Home</a></li>
       <li class="<?php if($current_page=="about.php"){ ?>active<?php } ?>"><a href="index.php">Home</a></li>
  </ul>

I think this will help you.

answered Jan 24, 2020 at 8:47

siva.picky

5496 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

siva.picky · Accepted Answer · 2020-01-24 08:53:31Z

0

Just add document.ready then only it work. just check this one.

   $(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");   });
    });

// if suppose using ajax page mean you need do like this

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

Sure this will work just try.

answered Jan 24, 2020 at 8:53

siva.picky

5496 silver badges19 bronze badges

2 Comments

obela06 Over a year ago

hello @siva.picky, I test your solution but it doesn't work for me.can you see my code based on active page solution, when i click on one li, how can i change the current_page value and apply the active class.

siva.picky Over a year ago

@obela06 are you done or not? this is in live website?

Collectives™ on Stack Overflow

Active class in navigation menu in PHP

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related