CODEWITHSUNDEEP
phphtml
phpmyadmin2014
phpmyadmin2014

Reputation: 101

If I want to mark as active page in the navigation menu in menu.php

I used 'include' php to separate header of my website. So, I can easily fix if I need to change the navigation menu part in the header, instead fixing more than 20 pages each.

My question is I like to add a class, 'current' in the one of navigation button. For example, if I am in 'Home' page, then I want to change font color of 'Home' button to red. If I move to 'Contact' page, I want 'Contact' button to be changed to red and want 'Home' button to normal color.

Since all navigation button codes are in the header.html. How can I add class 'current', so users can know which page they are looking at?

Upvotes: 0

Views: 1130

Answers (3)

Kurt Leadley
Kurt Leadley

Reputation: 503

I did some research and found this link How to have the class=“selected” depending on what the current page/url is. $_SERVER['REQUEST_URI'] is the approach that is used in this example. So if you need further clarification, you can look that up too. Edit: This example does not require JQuery. Or you could try this:

   <div class="menu">
        <div id="whatever" class="whatever">
            <ul>
                <li><a href="index.php" <?php if (basename($_SERVER['PHP_SELF']) == "index.php") { ?> class="current" <?php } ?>>Home</a></li>
                <li><a href="about.php" <?php if (basename($_SERVER['PHP_SELF']) == "about.php") { ?> class="current" <?php } ?>>About</a> </li>
            </ul>
         </div>
    </div>

Upvotes: 0

Rob
Rob

Reputation: 81

This is a very basic and unsafe example, just so that you hopefully get the idea.

Find out first what page you're on, maybe you have a URL parameter called page that you call like index.php?page=home or index.php?page=contact.

<?php $page=$_REQUEST['page']; ?>

Then write your HTML:

<a href="index.php?page=home">Home</a><br>
<a href="index.php?page=contact">Contact</a>

Now add the class-checks to your links:

<a href="index.php?page=home" class="<?=($page=='home'?'current':'');?>">Home</a><br>
<a href="index.php?page=contact" class="<?=($page=='contact'?'current':'');?>">Contact</a>

(This uses fancy inline IF statements, just because they fit the purpose so nicely. If you don't know them yet, I recommend to read up on them.)

If your $page variable is set to "home", this will generate the HTML source like so:

<a href="index.php?page=home" class="current">Home</a><br>
<a href="index.php?page=contact" class="">Contact</a>

You could also include the entire class assignment into the PHP check:

<a href="index.php?page=home"<?=($page=='home'?' class="current"':'');?>>Home</a><br>
<a href="index.php?page=contact"<?=($page=='contact'?' class="current"':'');?>>Contact</a>

And that would generate the HTML source like this:

<a href="index.php?page=home" class="current">Home</a><br>
<a href="index.php?page=contact">Contact</a>

The most practical way would be to quite simply make a little function that generates everything for you, like for example this one:

<?php
    function makeNavLink($pageName){
        global $page;
        $link='<a href="index.php?page='.$pageName.'"';
        $link.=($page==$pageName?' class="current"':'').'>';
        $link.=ucwords($pageName).'</a>';
        return $link;
    }
?>

That would allow you to call the function in your page like this:

<?=makeNavLink("home");?><br>
<?=makeNavLink("contact");?>

And it would also make the HTML output look like this if your page is "contact":

<a href="index.php?page=home">Home</a><br>
<a href="index.php?page=contact" class="current">Contact</a>

Upvotes: 0

Vivek Pipaliya
Vivek Pipaliya

Reputation: 498

If you are using php then you can set it like this.

1) Give class to each link

<li class="home"><a href="home.php">Home</a></li>
<li class="about"><a href="about.php">About</a></li>
<li class="contact"><a href="contact.php">About</a></li>

Note : Give filename & classname same (If filename is home.php then class for this menu is "home")

2) In header.php use this code.

<?php
$class = basename($_SERVER['REQUEST_URI'], '.php?' . $_SERVER['QUERY_STRING']);
/* This basename function returns filename from url. For example if url is http://www.example.com/home.php?id=15, then this will return "home" only. */
?>
<script type="text/javascript" src="jquery.min.js"> <!-- Link your jquery library -->

<script type="text/javascript">
$(document).ready(function(){
   $(".<?php echo $class; ?>").addClass('current');
});
</script>

Upvotes: 0

Related Questions