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>";
?>

Create a $_SESSION variable to store the current page, the "include" file will use this global variable to know what option to hightlight. For an example we would need more of your code to understand the way you are doing this. — Jose Manuel Abarca Rodríguez, Jun 30 '15 at 14:46
you can use javascript to get the page name from the url and then use a switch case in the same script file to set the menu class as active. — Robin, Jun 30 '15 at 14:47
@ShaneSkinner, pay attention to anuj nehra 's answer, I think it's exactly what you need. Put the "filename" field in your switch. — Jose Manuel Abarca Rodríguez, Jun 30 '15 at 17:21

score 1 · Answer 1 · answered Jun 30 '15 at 15:28

1

    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

answered Jun 30 '15 at 15:28

rocky

631
5
14

or just `pathinfo($filename, PATHINFO_FILENAME)` – DarkBee Jun 30 '15 at 20:23
Anuj Nehra and @JoseManuelAbarcaRodríguez Thanks, I think I got part of it, but I still haven't found how to change the css from within the switch. By any chance do you have an example you could show me? – Shane Skinner Jul 04 '15 at 02:18

score 1 · Answer 2 · answered Jul 04 '15 at 18:53

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

Asher · Answer 3 · 2015-07-14T01:51:55.510

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>

Be careful about using window.onload it will overwrite anything you have. — Asher, Jul 14 '15 at 01:47

tarleb · Answer 4 · 2015-06-30T20:54:32.400

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>

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

4 Answers4