Jump to content

Dynamic Menu - Active link issue


SugaComa
 Share

Go to solution Solved by Barand,

Recommended Posts

Hi All, Im new here, off work with flu and I thought I would try and get some updates done on my website, its been neglected for so long

 

I have a dynamic page listing so I can send my content via a simple template and I use this to then generate the Menu

 

my issue is setting the class "active" I either have none active or all active, I can never seem to get it to pick the currently selected menu item

 

here is a sample of code - if anyone can help me out it would be appreciated.

 

thank you

<?php
$pageArray = array(
   'Page1',
   'Page2',
   'Page3',
   'Page4'
);

function active($selected_page){
    $menu_array =  explode('/', $_SERVER['REQUEST_URI']);
    $current = end ($menu_array);
    if ($selected_page == $current); {
        echo 'active';
    }
}

?>

<ul>
    <li><a class="<?php active('$pageArray[0]'); ?>" <?php echo 'href="?page=' . $pageArray[0] . '"'; ?>><?php echo $pageArray[0]; ?></a></li>
    <li><a class="<?php active('$pageArray[1]'); ?>" <?php echo 'href="?page=' . $pageArray[1] . '"'; ?>><?php echo $pageArray[1]; ?></a></li>
    <li><a class="<?php active('$pageArray[2]'); ?>" <?php echo 'href="?page=' . $pageArray[2] . '"'; ?>><?php echo $pageArray[2]; ?></a></li>
    <li><a class="<?php active('$pageArray[3]'); ?>" <?php echo 'href="?page=' . $pageArray[3] . '"'; ?>><?php echo $pageArray[3]; ?></a></li>
</ul>

 

Link to comment
Share on other sites

I have no idea what that line "echo 'active'; is suppose to be doing.  I see the word 'active' being output to your page but for what purpose?  Then I see a loop that uses some very complex code to output your links to your different menu pages.

Perhaps you need to change that function to return the value rather than output it?  Even better combine those two operations into a single block the uses the loop to produce your desired output.

And what class do you want to use for the items you don't see as being active?

How do you like this attempt?

$pageArray = array('Page1','Page2','Page3','Page4');
$menu_array =  explode('/', $_SERVER['REQUEST_URI']);
$current = end($menu_array);
echo '<ul>'.PHP_EOL;
foreach($pageArray as $pg)
{
	echo "<li><a ";
	if($pg == $current)
		echo "classs='active' ";
	else
		echo "class='inactive' ";
	echo "href='(I do not know)?page=\"$pg\"'>$pg</a></li>".PHP_EOL;
}
echo "</ul>".PHP_EOL;	

Which gave me this which may be close:

<ul>
<li><a class='inactive' href='(I do not know)?page="Page1"'>Page1</a></li>
<li><a class='inactive' href='(I do not know)?page="Page2"'>Page2</a></li>
<li><a class='inactive' href='(I do not know)?page="Page3"'>Page3</a></li>
<li><a class='inactive' href='(I do not know)?page="Page4"'>Page4</a></li>
</ul>

Of course I ended up with no active classes since my uri doesn't match your array.

Link to comment
Share on other sites

  • Solution

No need to mess about exploding the URI - just use $_GET['page'].

<style type='text/css'>
    a {
        color: gray;
        text-decoration: none;
    }
    a.active {
        color: red;
        font-weight: 600;
    }
</style>

<?php

$selectedPage = $_GET['page'] ?? '';                                   // get selected page (or empty if there isn't one)

$pageArray = array(
   'Page1',
   'Page2',
   'Page3',
   'Page4'
);

echo "<ul>\n";
foreach ($pageArray as $p) {
    $act = $selectedPage == $p ? 'active' : '';                        // if this is the selected page, add 'active' to class 
    echo "<li><a class='pageitem $act' href='?page=$p'>$p</a></li>";
}
echo "</ul>\n";
?>

Result

image.png.6f41f75cb62f0b8888792f6ad6483592.png

  • Thanks 1
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.