How can I have an element change based on the URL? PHP Switch statement?

Question

Short Version: How can I highlight the current page in the nav menu when using a php include file?

Full Version: I have a website where I'm using a navmenu.php file to generate the nav menu via a php include statement. I need to have the currently viewed page marked in the nav bar with a top and bottom border. What's the best way to do this while continuing to use the php include file?

At first I thought if using if/elseif statements, but my best idea so far is to create a switch statement in PHP to search the url and then adjust accordingly. Is that possible? If so, how can I pull the page name? For example, if the url is www.domain.com/contact.php I want to pull 'contact'

<?php
   $page = [file name];

   switch ($page) {
       case "services.php":
          //Add the border to the services page <li>
       break;

       case "about.php":
          //Add the border to the about us page <li>
          break;

       case "contact.php":
          //Add the border to the contactpage <li>
       break;

       default:
          //Add the border to the home page <li>
}
?>

Based on this question, it seems like I should be able to use

switch($_GET['????'])

Thanks in advance for any help!

Added: Here's the code from the php file:

<?php
session_start();
    echo "<nav class='nav-wrap'>
    <ul class='navLeft'>
        <li><a href='http://www.domain.com' title='Home'>HOME</a></li>
        <li><a href='http://www.domain.com/about.php' title='About Us'>ABOUT US</a></li>
        <li><a href='http://www.domain.com/portfolio.php' title='View our Portfolio'>PORTFOLIO</a></li>
    </ul>
    <ul class='navRight'>
        <li><a href='http://www.domain.com/giving.php' title='Giving Back'>GIVING BACK</a></li>
        <li><a href='http://www.domain.com/services.php' title='Services'>SERVICES</a></li>
        <li><a href='http://www.domain.com/contact.php' title='Contact Us'>CONTACT US</a></li>
    </ul>
</nav>";
?>

2nd Edit: Thank you @anujnehra, that part is starting to make sense. I've been trying to determine how to proceed once the switch identifies the current page. I'm thinking using a hidden css class and changing it to be displayed might work best, but I'm not sure how to control the css within the PHP switch.

Here's what I have so far:

CSS:

.currentPage {
  border-bottom: 2px solid #ffffff;
  border-top: 2px solid #ffffff;
  display: none;
}

PHP File:

  print_r(pathinfo("www.domain.com/contact.php"));

  Array ( 
    [dirname] => www.domain.com 
    [basename] => contact.php 
    [extension] => php 
    [filename] => contact 
  );

  switch(filename){
    case "about":
      .currentPage#about {display:inline;}
      break;

    case "portfolio":
      .currentPage#portfolio {display:inline;}
      break;

    case "giving":
      .currentPage#giving {display:inline;}
      break;

    case "services":
      .currentPage#services {display:inline;}
      break;

    case "contact":
      .currentPage#contact {display:inline;}
      break;

    default:
      .currentPage#home {display:inline;}
      break;
  }

echo "<nav class='nav-wrap'>
        <ul class='navLeft'>
           <li><a href='http://www.domain.com' title='Home' class='currentPage' id='home'>HOME</a></li>
           <li><a href='http://www.domain.com/about.php' title='About Us' class='currentPage' id='about'>ABOUT US</a></li>
           <li><a href='http://www.domain.com/portfolio.php' title='View our Portfolio' class='currentPage' id='portfolio'>PORTFOLIO</a></li>
        </ul>
        <ul class='navRight'>
           <li><a href='http://www.domain.com/giving.php' title='Giving Back' class='currentPage' id='giving'>GIVING BACK</a></li>
           <li><a href='http://www.domain.com/services.php' title='Services' class='currentPage' id='services'>SERVICES</a></li>
           <li><a href='http://www.domain.com/contact.php' title='Contact Us' class='currentPage' id='contact'>CONTACT US</a></li>
        </ul>
     </nav>";
?>

Answer 1

Try using JavaScript. You might not need PHP at all.

I tested this out and it works.

<html>
<head>
<script>
function highlight (item) {
  switch (item) {
    case "about.php":
      document.getElementById("about").setAttribute('style', 'font-weight: bold; color: red; font-size:150%;');
      break;
    case "contact.php":
      document.getElementById("contact").setAttribute('style', 'font-weight: bold; color: red; font-size:150%;');
    break;
    default:
      document.getElementById("home").setAttribute('style', 'font-weight: bold; color: red; font-size:150%;');
  }
}
var index = window.location.pathname.lastIndexOf("/");
var filename = window.location.pathname.substr(index + 1);
window.onload = function () {highlight(filename)};
</script>
</head>
<body>
<nav id="site-navigation" class='nav-wrap'>
    <ul class='navLeft'>
        <li><a id="home" href='http://www.domain.com' title='Home'>HOME</a></li>
        <li><a id="about" href='http://www.domain.com/about.php' title='About Us'>ABOUT US</a></li>
        <li><a id="portfolio" href='http://www.domain.com/portfolio.php' title='View our Portfolio'>PORTFOLIO</a></li>
    </ul>
    <ul class='navRight'>
        <li><a id="giving" href='http://www.domain.com/giving.php' title='Giving Back'>GIVING BACK</a></li>
        <li><a id="services" href='http://www.domain.com/services.php' title='Services'>SERVICES</a></li>
        <li><a id="contact" href='http://www.domain.com/contact.php' title='Contact Us'>CONTACT US</a></li>
    </ul>
</nav>
</body>
</html>

Answer 2

@Shane Skinner
You have to create a new file naming dynamic.css and make it empty rest will be done by code itself

<link rel="stylesheet" type="text/css" href="dynamic.css" />

<?php
$pageName = pathinfo("www.domain.com/contact.php");

$aboutCss = '.currentPage#about {display:inline;}' . "\n";
$portfolioCss = '.currentPage#portfolio {display:inline;color: black;}' . "\n";
$givingCss = '.currentPage#giving {display:inline;}' . "\n";
$servicesCss = '.currentPage#services {display:inline;}' . "\n";
$contactCss = '.currentPage#contact {display:inline;color: red;}' . "\n";
$defaultCss = '.currentPage#home {display:inline;}' . "\n";

switch ($pageName['filename']) {
    case "about":
        createDynamicCss($aboutCss);
        break;

    case "portfolio":
        createDynamicCss($portfolioCss);
        break;

    case "giving":
        createDynamicCss($givingCss);
        break;

    case "services":
        createDynamicCss($servicesCss);
        break;

    case "contact":
        createDynamicCss($contactCss);
        break;

    default:
        createDynamicCss($defaultCss);
        break;
}

function createDynamicCss($cssToWrite) {
    $file = fopen("dynamic.css", "r+");
    fwrite($file, $cssToWrite);
    fclose($file);
}

echo "<nav class='nav-wrap'>
        <ul class='navLeft'>
           <li><a href='http://www.domain.com' title='Home' class='currentPage' id='home'>HOME</a></li>
           <li><a href='http://www.domain.com/about.php' title='About Us' class='currentPage' id='about'>ABOUT US</a></li>
           <li><a href='http://www.domain.com/portfolio.php' title='View our Portfolio' class='currentPage' id='portfolio'>PORTFOLIO</a></li>
        </ul>
        <ul class='navRight'>
           <li><a href='http://www.domain.com/giving.php' title='Giving Back' class='currentPage' id='giving'>GIVING BACK</a></li>
           <li><a href='http://www.domain.com/services.php' title='Services' class='currentPage' id='services'>SERVICES</a></li>
           <li><a href='http://www.domain.com/contact.php' title='Contact Us' class='currentPage' id='contact'>CONTACT US</a></li>
        </ul>
     </nav>";
?>

This code is just a sample try to make your own code with more optimization.

Answer 3

The usual way to do this would be to set an extra class for the active element. This can be tedious if done by hand, so I suggest to define a function to generate the menu items.

function menuItem($content, $link, $title = null) {
    if ($_SERVER['REQUEST_URI'] == $link) {
        $class = "active";
    } else {
        $class = "";
    }
    if ($title === null) {
        $title = strtoupper($content);
    }
    echo "<li><a href=\"{$content}\" title=\"{$title}\" class=\"{$class}\">{$content}</a></li>";
}

Use it like this:

<ul>
    <?php echo menuItem('About Us', '/about.php'); ?>
    <?php echo menuItem('Portfolio', '/portfolio.php', 'View our portfolio'); ?>
</ul>

Answer 4

    You can use pathinfo for example 
    print_r(pathinfo("www.domain.com/contact.php"));

    Array ( 
    [dirname] => www.domain.com 
    [basename] => contact.php 
    [extension] => php 
    [filename] => contact 
    ) 

Use filename to pull contact