Question

I'm making a website and for all of the pages I've including header.php, which is just a logo and navigation bar at the top of the page, below is the code for the nav menu.

<nav id="navmenu">
<ul>
<li><a href="index.php" class="active">Home</a></li>
<li><a href="about.php">About</a></li>
<li><a href="portfolio.php">Portfolio</a></li>
<li><a href="contact.php">Contact</a></li>
</ul>
</nav>

How can I make it so that the class="active" changes depending on what page the user is on?

Was it helpful?

Solution

Make use of $_SERVER['PHP_SELF']

<li><a href="index.php" <?php if ($_SERVER['PHP_SELF'] == "/index.php") echo "class='active'" ?>>Home</a></li>

<li><a href="about.php" <?php if ($_SERVER['PHP_SELF'] == "/about.php") echo "class='active'" ?>>About</a></li>

OTHER TIPS

You can use this:$_SERVER['PHP_SELF']

It will tell you the name of the page you are currently on.

Then, in your header file, juste use something like this:

<a href="contact.php" <?php if($_SERVER['PHP_SELF'] == "/contact.php") echo 'class="active"'; ?>>Contact</a>

You can use a server variable PHP_SELF ie. $_SERVER['PHP_SELF'] which give the file name ie./index.php appended by your site name ie. www.example.com

<nav id="navmenu">
<ul>
<li><a href="index.php" <?php if ($_SERVER['PHP_SELF'] == "/index.php") echo "class='active'" ?>>Home</a></li>
<li><a href="about.php" <?php if ($_SERVER['PHP_SELF'] == "/about.php") echo "class='active'" ?>>About</a></li>
<li><a href="portfolio.php" <?php if ($_SERVER['PHP_SELF'] == "/portfolio.php") echo "class='active'" ?>>Portfolio</a></li>
<li><a href="contact.php" <?php if ($_SERVER['PHP_SELF'] == "/contact.php") echo "class='active'" ?>>Contact</a></li>
</ul>
</nav>

Hope it helped :)

There is likely more than one way of doing something like this. The most straightforward is probably to change the header file to something like this:

<?php
    if (!defined('HOME_LINK_CLASS')) {
        define('HOME_LINK_CLASS', 'active');
    }
?><nav id="navmenu">
<ul>
<li><a href="index.php" class="<?php echo HOME_LINK_CLASS;?>">Home</a></li>
<li><a href="about.php">About</a></li>
<li><a href="portfolio.php">Portfolio</a></li>
<li><a href="contact.php">Contact</a></li>
</ul>
</nav>

Now, if you want the class to be (say) "inactive" on a particular page, you can add this line before the include command on that page:

define('HOME_LINK_CLASS', 'inactive');

http://webcheatsheet.com/PHP/get_current_page_url.php

Use something like this to check current page URL. Then use an if statement to require certain files

You can use PHP_SELF to get the name of the file like this:

<?php
$page = $_SERVER["PHP_SELF"];
switch($page){
    case "/index.php": $class = "index";break;
    case "/home.php": $class = "home";break;
    case "/info.php": $class = "info";break;
    default: $class = "active";break;
}
?>

<nav id="navmenu">
    <ul>
        <li><a href="index.php" class="<?php echo $class; ?>">Home</a></li>
        <li><a href="about.php">About</a></li>
        <li><a href="portfolio.php">Portfolio</a></li>
        <li><a href="contact.php">Contact</a></li>
    </ul>
</nav>

You can retrieve the current script name with $_SERVER['PHP_SELF'] and then use a ternary statement to add active property to that link.

<?php $p = strtolower(basename($_SERVER['PHP_SELF'])); ?>

<nav id="navmenu">
<ul>
<li><a href="<?php echo ($p=="home.php" ? "active" : "")?>">Home</a></li>
<li><a href="<?php echo ($p=="about.php" ? "active" : "")?>">About</a></li>
<li><a href="<?php echo ($p=="portfolio.php" ? "active" : "")?>">Portfolio</a></li>
<li><a href="<?php echo ($p=="contact.php" ? "active" : "")?>">Contact</a></li>
</ul>
</nav>

If your pages address (document.location) as just like the href on your menu, you don't need a class for the active item, just use the pseudo CSS class :active.

Otherwise, you need to check the $_SERVER superglobal for PHP_SELF and add the class to the desired menu item. Something like the code bellow:

//code snipped not tested
<li><a href="index.php" class="<?php echo preg_match("/index.php$/", $_SERVER["PHP_SELF"]) ? ("active") : (""); ?>">Home</a></li>

Simple way to do this is to create an array of pages and then loop through that array to create menu items, and check in each loop if it is active file. By using this method is also very easy to add or remove pages, just change the items in the menu array, also code is much smaller and easier to read in case of large number of pages:

// get active file, $_SERVER['SCRIPT_NAME'] is less spoofable than $_SERVER['PHP_SELF']
$active = basename( $_SERVER['SCRIPT_NAME'] );

// create array of pages
$main_nav = array( 
    'index.php' => 'Home', 
    'about.php' => 'About', 
    'portfolio.php' => 'Portfolio', 
    'contact.php'=>'Contact'
    );

// create menu 
//   notice the usage of PHP shorthand:
//   ( $active == $file ? 'class="active"' : '' ) is the same as:
//
//   if ( $active == $file ) 'class="active"';
//   else '';
//
echo '<nav id="navmenu"><ul>'.PHP_EOL;
foreach ($main_nav as $file => $title) {
    echo '<li><a href="' . $file . '" ' . ( $active == $file ? 'class="active"' : '' ) . '>' . $title . '</a></li>'.PHP_EOL;
}
echo '</ul></nav>';
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top