Dynamic Navigation with Active Class

willscarlet · 10-03-2012, 04:06 PM

I am trying to make a dynamic top navigation menu for a website that uses an 'active' class to notate what page the user is on. The script below somewhat works but nor right. It's just a series of IF statements to determine the page name and assign it a class or not. I have a similar system for page titles and meta data.

now each file sees it and all the unactive links look and act fine, however, when you are on the active page, it takes the active pages name in the menu (ie, Home, about, contact, etc...) turns it grey makes it small, throws it up about 10px above the others, moves it to the the far right of the menu list, and finally makes it unclickable.

Any ideas as to why this wouldnt work? Thank you guys in advance for your time and assistance.

PHP Code:


			
<?php $currentPage = basename($_SERVER['SCRIPT_NAME']); ?>



<div id="templatemo_menu_wrapper">



    <div id="templatemo_menu">









    <ul>

        <?php echo "\n"; if ($currentPage == 'index.php'){ ?><li class="current fast">Home</li><?php     } else { ?><li><a href="index.php">Home</a></li><?php } ?>

        <?php echo "\n"; if ($currentPage == 'about.php'){ ?><li class="current fast">About</li><?php    } else { ?><li><a href="about.php">About</a></li><?php } ?>

        <?php echo "\n"; if ($currentPage == 'services.php'){ ?><li class="current fast">Services</li><?php } else { ?><li><a href="services.php">Services</a></li><?php } ?>

        <?php echo "\n"; if ($currentPage == 'gallery.php'){ ?><li class="current fast">Gallery</li><?php  } else { ?><li><a href="gallery.php">Gallery</a></li><?php }  ?>

        <?php echo "\n"; if ($currentPage == 'contact.php'){ ?><li class="current fast">Contact</li><?php  } else { ?><li><a href="contact.php">Contact</a></li><?php }  ?>

    </ul>



    </div> <!-- end of menu -->



</div> <!-- end of menu wrapper -->

that is my 'menu.php' that is included in each file like this: <? php include'includes/menu.php'; ?>

Fou-Lu · 10-03-2012, 04:56 PM

I'm confused. It sounds to me like it is working as anticipated:

Quote:

now each file sees it and all the unactive links look and act fine, however, when you are on the active page, it takes the active pages name in the menu (ie, Home, about, contact, etc...) turns it grey makes it small, throws it up about 10px above the others, moves it to the the far right of the menu list, and finally makes it unclickable.

So long as the correct link is flagged as active, then PHP has done its job. What I read into this is a rendering issue which is a problem with your html/css, not PHP.

Now if all links were marked as active or none were when they should be, that would be an issue with PHP.

willscarlet · 10-03-2012, 05:14 PM

The problem I believe its having is that for some reason, the PHP will not see that class. The rest of that script works great. If I take away all the php from that script and just let the html run inside the page, it works fine. It only messes up the active class when I add the PHP to make it dynamic and include the menu file. Thats why I was thinking it had to be somethign in the php that I just overlooked possibly.

Fou-Lu · 10-03-2012, 05:51 PM

Quote:

Originally Posted by willscarlet

The problem I believe its having is that for some reason, the PHP will not see that class. The rest of that script works great. If I take away all the php from that script and just let the html run inside the page, it works fine. It only messes up the active class when I add the PHP to make it dynamic and include the menu file. Thats why I was thinking it had to be somethign in the php that I just overlooked possibly.

PHP itself will never see an html class. To PHP, this is just textual data, it doesn't matter what it is.
If the HTML is created properly with no anchor tag and with the class specified in the list item depending on the current page, then PHP has done its job properly. If its a rendering issue (ie: how it looks), that's all HTML/CSS; it is possible that you haven't properly structure the HTML with the CSS.

You simply need to check the resulting HTML source. If you are on the script gallery.php and you see:

Code:

     <ul>
        <li><a href="index.php">Home</a></li>
        <li><a href="about.php">About</a></li>
        <li><a href="services.php">Services</a></li>
        <li class="current fast">Gallery</li>
        <li><a href="contact.php">Contact</a></li>
    </ul>

Then PHP has done is job properly. If you do not see that you need to post what you do see.

willscarlet · 10-03-2012, 06:24 PM

Code:

<ul>
<li class="current"><a href="index.php">Home</a></li>
<li ><a href="about.php">About</a></li>
<li ><a href="services.php">Services</a></li>
<li ><a href="gallery.php">Gallery</a></li>
<li ><a href="contact.php">Contact</a></li>
</ul>

Sorry, im pretty bad at this still, i did not think to look at the page source to see the end result. Above is what the page source says.

I put the menu in a freebee template and put it online to test it, here is the result. but that same code that the PHP is outputting works fine if I just manually place that code into the page instead of through the php include.

http://sumterpd.com/menu/index.php

Fou-Lu · 10-03-2012, 06:30 PM

This output HTML code does not match what you have here in the PHP code. The current has an anchor tag and the non-current ones have a space in the list item element. Neither of these are possible with this block of PHP code in use.

willscarlet · 10-03-2012, 06:39 PM

Im sorry sir. I had found a way to make the code shorter so when I put it up a little but ago i used the new code. Same results though.

Code:

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

<div id="templatemo_menu_wrapper">

	<div id="templatemo_menu">
    

<ul>
<?php
$menu_items = array('Home' => 'index.php', 'About' => 'about.php', 'Services' => 'services.php', 'Gallery' => 'gallery.php', 'Contact' => 'contact.php');
foreach($menu_items as $key => $val)
{
    $class='';
    if($current_page == $val)
    { $class = 'class="current"'; }
    echo '<li '.$class.'><a href="'.$val.'">'.$key.'</a></li>';
}
?>
</ul>
    
    </div> <!-- end of menu -->

</div> <!-- end of menu wrapper -->

Fou-Lu · 10-03-2012, 06:59 PM

This code functions exactly as your html results are. To remove the anchor, you simply use two different possible strings instead of appending:

PHP Code:


			
foreach ($menu_items AS $key => $val)
{
    print ($current_page == $val ? sprintf('<li class="current">%s</li>', $key) : sprintf('<li><a href="%s>%s</a></li>', $value, $key)) . PHP_EOL;
}

Beyond this, its all your CSS as your HTML source matches the php code to create it.

willscarlet · 10-03-2012, 07:21 PM

Thank you for the coding help. I added your code to the script, but It still does not seem to work properly. It is throwing the current page listed in the menu to the right of the menu and taking away all the css. if interested you can see it in that link I posted above.

Thank you for your help anyways, it must be a strange way I have the css or something.

Fou-Lu · 10-03-2012, 07:55 PM

Quote:

Originally Posted by willscarlet

Thank you for the coding help. I added your code to the script, but It still does not seem to work properly. It is throwing the current page listed in the menu to the right of the menu and taking away all the css. if interested you can see it in that link I posted above.

Thank you for your help anyways, it must be a strange way I have the css or something.

All you need to do is evaluate your HTML. If it looks as you expect it to look, then (as I've mentioned several times now), the problem is your CSS not PHP.