CODEWITHSUNDEEP
phphtmlcss
moh_abk
moh_abk

Reputation: 2164

Highlight link based on current page (Dynamic Navigation PHP)

This might be very easy for some but I've tried various ways to get it to work but to no avail.

Here's a brief;

I have one page, I have links in this page that when clicked load other pages but display them in the same page.

    <section class="posts-header">
    <div class="col span-3-of-3">
    <ul class="posts-nav" id="navigation">
    <li><a href="blog_admin_posts.php?source=view_all_posts">View Posts</a></li>
    <li><a href="blog_admin_posts.php?source=view_posts">View Posts</a></li>
    <li><a href="blog_admin_posts.php?source=add_posts">Create Post</a></li>
    </ul>
    </div>
    </section>

The above code shows links that when clicked, pass a variable using $_GET to the switch statement below;

if(isset($_GET['source'])) {
$source = $_GET['source'];}

switch($source) {
case 'view_posts';
    include "php/blog_posts_view.php";
    break;

case 'view_all_posts';
    include "php/blog_posts_reviewer.php";
    break;

case 'add_posts';
    include "php/blog_posts_addform.php";
    break;

case 'edit_posts';
    include "php/blog_posts_editform.php";
    break;

default:
    include "php/blog_posts_view.php";
    break;}

How can I highlight the current page? using html, js, css3 or all. Thanks.

Upvotes: 0

Views: 1282

Answers (3)

mdamia
mdamia

Reputation: 4557

maybe you will find this very helpful, it adds your class to the current page and allows to add more links to your page by simply adding to the array.

<?php
    $page = isset($_GET['page']) ? $_GET['page']:  ' ';
    $pages = ['view_all_posts','view_posts','add_posts'];
    $active = '';
    if (in_array($page,$pages)){
        $active = 'active';
    }
 ?>

Then modify your menu:

<section class="posts-header">
  <div class="col span-3-of-3">
    <ul class="posts-nav" id="navigation">
    <?php foreach ($pages as $key => $value) : ?>
      <li>
        <a href="blog_admin_posts.php?source=<?=$value?>" class="<?=$active?>"><?=$value?></a>
      </li>
    <?php endforeach;?>
    </ul>
  </div>
</section>

Upvotes: 1

Tom
Tom

Reputation: 589

You can get the current page name using this:

$pageName = $_GET["source"];

And then, for every list item, you could do something like this:

<li class="<?= ($pageName === 'firstPageName') ? 'active' : '' ?>"><a href="...">...</a></li>

Of course, you'll need to style the class .active or how ever you would like to name it.

Upvotes: 0

Richard
Richard

Reputation: 2815

You can just define an active class in CSS, which describes the style of an active link. For example, a very simple style:

.active {
    color: red;
}

Then you have to modify your menu:

<section class="posts-header">
    <div class="col span-3-of-3">
        <ul class="posts-nav" id="navigation">
            <li><a href="blog_admin_posts.php?source=view_all_posts"<?=$_GET['source'] == "view_all_posts" ? " class=\"active\"" : ""; ?>>View Posts</a></li>
            <li><a href="blog_admin_posts.php?source=view_posts"<?=$_GET['source'] == "view_posts" ? " class=\"active\"" : ""; ?>>View Posts</a></li>
            <li><a href="blog_admin_posts.php?source=add_posts"<?=$_GET['source'] == "add_posts" ? " class=\"active\"" : ""; ?>>Create Post</a></li>
        </ul>
    </div>
</section>

The active menu link text should now be displayed in red.

Upvotes: 1

Related Questions