CODEWITHSUNDEEP
phpjqueryhtmlcss
obela06
obela06

Reputation: 335

Active class in navigation menu in PHP

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?

Upvotes: 1

Views: 1166

Answers (2)

siva.picky
siva.picky

Reputation: 547

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.

Upvotes: 0

siva.picky
siva.picky

Reputation: 547

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.

Upvotes: 0

Related Questions