Help with active state in Navigation

[flexo]

Hello all,

I just took over a custom CMS which was built by a former employee at my company. The entire CMS is PHP Driven and never leaves index.php. There are simple IF Statements that tell it to pull content out of the database via it’s ID.

The problem here is that I cannot figure out how to make the navigation stay active on the current page, because you never leave index.php.

For example,

The homepage is: index.php
The about page is: index.php?id=26
The careers page is: index.php?id=28

Any idea on how I can pull this off? I figure an onClick or something, but I suck at Javascript, my main strength is PHP and I cannot find a way to do this in PHP.

Here is the code on how the navigation is created. It is setup to be dynamic, so if you create a page in the custom CMS, it’ll populate automatically.

<div id="nav-bar">
	<ul class="main-nav">
           <li><a href="index.php">Home</a></li>
            <?  
		$query=mysql_query("SELECT * from section");
		while($row=mysql_fetch_assoc($query)){ 
	    ?>
                
	<li><a href="index.php?id=<? echo $row['id']; ?>">
        <? echo $row['section']; ?></a></li>

        <? } } ?>

	<li><a href="index.php?id=projects">Projects</a></li>
         <li><a href="index.php?id=news">News</a></li>
	</ul>
		</div>

Any help is greatly appreciated, the deadline for the project is Friday!

[phphelp]

Try this:
[php]<li <?php echo $_REQUEST['id']==$row['id']?' class="active"':'' ?>>
<? echo $row['section']; ?>[/php]

Then define class .active in your css file, so that it highlights the selected menu item.

[flexo]

Great, that worked perfect!

I forgot to mention though, there are two hard coded links in the main navigation outside of the loop. The previous developer did this for whatever reason, they do not go by ID but rather by the page name.

<li><a href="index.php?id=projects">&nbsp;&nbsp;Projects&nbsp;&nbsp;</a></li>
<li><a href="index.php?id=news">&nbsp;&nbsp;News&nbsp;&nbsp;</a></li>

Do you know how I can incorporate this into the loop? So in total, I have this now:

<ul class="main-nav">
             <li><a href="index.php">Home</a></li>
            <?  
			$query=mysql_query("SELECT * from section");
				while($row=mysql_fetch_assoc($query)){ 
	    ?>
                
	<li <?php echo $_REQUEST['id']==$row['id']?' class="active"':'' ?>><a href="index.php?id=<? echo $row['id']; ?>">
        <? echo $row['section']; ?></a></li>

            <?  }} ?>

	    <li><a href="index.php?id=projects">&nbsp;&nbsp;Projects&nbsp;&nbsp;</a></li>
            <li><a href="index.php?id=news">&nbsp;&nbsp;News&nbsp;&nbsp;</a></li>
			</ul>

If this cannot be easily doable, I’ll just have to go through and make “Project” and “News” into there own pages somehow and hard link them. Was hoping to refrain from this b/c the previous developers goal was to make it so you never left index.php.

[flexo]

By the way, the obvious problem here is that I cannot put the active class right on those links due to them becoming always active.

[phphelp]

Just add the same php code for these two list elements:
[php]<li <?php echo $_REQUEST['id']=='projects'?' class="active"':'' ?>>  Projects  

>  News  

[/php]

[flexo]

Great! I see what you’re doing now, that’s a very cool idea.

I’m trying to use the same idea on the side navigation now, however the developer was using ‘onClick’ javascript function to pull content based on an id that isn’t in the URL. So I believe I need to work on getting the ID in the url.

There is already an ID in the URL, but this is the ID for the page itself, not the 3rd tier inner pages.

If I can attach an image of my database table it would surely help, but not seeing that feature.

Ideally, I have an id row which isn’t being passed into the URL. The “section_id” URL is, however I cannot use this in my REQUEST because all section ID’s are the same for all the links in that section.

Here is the code to help:

<ul class="list2">
  <?
             while($row3=mysql_fetch_assoc($query3)){
?>
	<li><?
        echo "<a href='#' onclick='setMain(".$row3['id'].");'>".$row3['name']."</a></li>";
   	}
        ?>	
        <? if($section==26){
	?>
		    <li><a href='index.php?id=32'>Random Link</a></li>
                    <li><a href='index.php?id=33'>Random Link 2</a></li>
	<? }?>
         <? if($section==32 || $section==33){
	?>
		     <li><a href='index.php?id=project2'>Project Portfolio</a></li>
       <? }?>
        </ul>

I’m working on this right now, so I’ll let you know if I come up with a solution. I’m trying to pass the “id” into the URL, rather then the section ID so I can determine which link is really active.

The URL stays the same for every 3rd tier interior page, "www.blah.com.php5-22.dfw1-1.websitetestlink.com/blah/index.php?id=26

id=26, is really my “section_id” column in my table. All 3rd tier pages “History, Management Team, Capabilities, ect.” all of section_id = 26. So I cannot use the REQUEST on it or they all become active.

I need to use the auto incrementing ID.

Thanks a lot for your help, I’m learning a lot. How do I give you + karma haha, you deserve it!

And to just give you more insight on how this works, here is the echo that pull the content with the onClick:

        <div id="main_content">	
			<? if(isset($_GET['retrieve'])){
				?> <script>setMain(<? echo $_GET['retrieve']; ?>);</script> <?
			}
			?>
        
         <? echo $row2['content']; ?>
        </div>

[flexo]

I did get this working on the side navigation, however it didn’t work in Chrome and when you click anywhere else on the page, it deactivates

#side_nav li a:focus
{
color: white !important;
background: #860038 !important;
}