How to highlight correct menu tab when viewing SUBPAGES

[JsusSalv]

Hello Everyone:

 

I've written the code below to highlight the page a viewer is on.  However, each main menu tab has several subpages.  What I'd like to do is have the main menu tab stay highlighted when viewing any of its subpages.  How do I accomplish this?  All of the data that populates each menu tab comes from a database.  The code below uses a ternary operator to place the correct tag which highlights the page.

 

<?php
$activePage = ($_SERVER["QUERY_STRING"] == 'webpages_id='.$item['webpages_id']) ? '-active' : '';

echo ($navtabs = ($item['topnavdisplay'] == Yes) ? '<li class="topNavButtons"><a href="'.$webAddr.'/'.$item['sefurl'].'" class="topNavLinkStyle'.$activePage.'">'.$item['navtitle'].'</a></li>' : '');
?>

 

 

More info:

$item['topnavdisplay'] = If this field is set to 'Yes' then the menu tab is displayed in the navigation menu.  If it is set to 'No' then it is omitted.

$item['webpages_id'] = this is the ID number for each page.

$item['navtitle'] = this is the name of the menu tab.

class="topNavLinkStyle" = this is the CSS hover over effect

class="topNavLinkStyle-active" = this is the CSS highlight color

 

 

Does anyone have any experience with this type of situation?  I've searched Google but haven't found any info when the menu tabs are dynamically derived from a database.

 

Thank you!

[CroNiX]

Are you passing a parameter in the url for each different page?

Like

http://mysite.com/index.php?page=admin.php

http://mysite.com/index.php?page=usercontrol.php

etc?

 

How are you accessing the different pages?

[JsusSalv]

The pages are being called dynamically like so:  http://mysite.com/index.php?webpages_id=XX

 

The top navigation menu has the following: Home | About Us | Committees | Contact | Links etc...

 

The code in my first post works in that whenever any of the above links are clicked on the the viewer is redirected to that page and the link stays blue.  Normal link color is white.  Now, the Committees menu tab has several liks below it (e.g. Committees-Journal, Committees-Education, Committees-Projects, etc...).  When a viewer clicks on any of these subpages the viewer is redirected to that page.  This is all normal stuff I suppose and the PHP code works.  However, I'd like the Committees menu tab to stay blue when the viewer is at any of the Committees-xxxxxxx subpages.

I am having a hard time picturing this in my head and cannot create the code that will take care of this functionality.  If you need more of my code I'll be glad to post it but it's all pretty much in my first posting.  Thanks!

[JsusSalv]

Anyone? Ideas??

[JsusSalv]

Hmmm..... any ideas??

[CroNiX]

post the code for generating your menu

[JsusSalv]

Here's the code.  I have a few other scripts to drag & drop the menu tabs via the  CMS so that I can sort the order but those aren't necessary to post here.

 

 

SQL

--
-- Table structure for table `topnavigation`
--

CREATE TABLE `topnavigation` (
  `topnavigation_id` int(10) unsigned NOT NULL auto_increment,
  `topnavtitle` varchar(255) NOT NULL default '',
  `topnavurl` varchar(255) NOT NULL,
  `topnavimages` varchar(255) NOT NULL,
  `topnavdisplay` enum('Yes','No') NOT NULL default 'No',
  `datecreated` datetime NOT NULL default '0000-00-00 00:00:00',
  `updated` timestamp NOT NULL default CURRENT_TIMESTAMP on update CURRENT_TIMESTAMP,
  PRIMARY KEY  (`topnavigation_id`)
) ENGINE=MyISAM AUTO_INCREMENT=10 DEFAULT CHARSET=latin1 AUTO_INCREMENT=10 ;

-- 
-- Dumping data for table `topnavigation`
-- 

INSERT INTO `topnavigation` (`topnavigation_id`, `topnavtitle`, `topnavurl`, `topnavimages`, `topnavdisplay`, `datecreated`, `updated`) VALUES
(1, 'Home', 'http://www.xxxxxxxxxxxxxxxxxxxxxxxx/', '', '', '2008-09-23 20:02:56', '2008-09-23 20:02:56'),
(2, 'About Us', 'http://www.xxxxxxxxxxxxxxxxxxxxxx/about-us', '', '', '2008-09-23 20:02:56', '2008-09-23 20:02:56'),
(3, 'Committees', 'http://www.xxxxxxxxxxxxxxxxx/committees', '', '', '2008-09-23 20:02:56', '2008-09-23 20:02:56'),
(4, 'Sponsors', 'http://www.xxxxxxxxxxxxxxxxxxxxxx/sponsors', '', '', '2008-09-23 20:02:56', '2008-09-23 20:02:56'),
(5, 'Calendar', 'http://www.xxxxxxxxxxxxxxx/calendar', '', '', '2008-09-23 20:02:56', '2008-09-23 20:02:56'),
(6, 'Directory', 'http://www.xxxxxxxxxxxxxxxxxxx/directory', '', '', '2008-09-23 20:02:56', '2008-09-23 20:02:56'),
(7, 'Links', 'http://www.xxxxxxxxxxxxxxxxx/links', '', '', '2008-09-23 20:02:56', '2008-09-23 20:02:56'),
(8, 'Success Stories', 'http://www.xxxxxxxxxxxxxxxxxxxx/success-stories', '', '', '2008-09-23 20:02:56', '2008-09-23 20:02:56'),
(9, 'Contact', 'http://www.xxxxxxxxxxxxxxxxxxxxxx/contact', '', '', '2008-09-23 20:02:56', '2008-09-23 20:02:56');

 

 

 

PHP, CSS, XHTML

<div class="topNavigationContainer">
<div id="topNavMenu">
	<ul id="top-navigation">
		<?php
			// Create database connection.
			// The database connection is standard hostname, username, password, database.
			// This is a database Function to create the DB connection.
			$plug = dbConnect();

			$query = 'SELECT * FROM webpages ORDER BY sort_order ASC';  
			$result = @ mysql_query($query,$plug) or die(mysql_error());  

			if (mysql_num_rows($result)) {

				// Initialize sort array.
				$sort_order = array();
				while($item = @ mysql_fetch_assoc($result))
				{
					// Highlight top navigation button depending on page being viewed.
					$activePage = ($_SERVER["QUERY_STRING"] == 'webpages_id='.$item['webpages_id']) ? '-active' : '';

				    // Display top navigation button if set to 'Yes'. If 'No', do not display top navigation button.
				    $pagetitle = $item['pagetitle'];
					$navtitle = strtoupper($pagetitle);
					echo ($navtabs = ($item['topnavdisplay'] == Yes) ? '<li class="topNavButtons"><a href="'.$webAddr.'/'.$item['sefurl'].'" class="topNavLinkStyle'.$activePage.'">'.$navtitle.'</a></li>' : '');
				}
			}
		?>
	</ul>
</div>	<!-- end.leftNavMenu -->
</div>	<!-- end.topNavigationContainer -->

 

 

If you need any other info please let me know.

 

Thank you for any help you can provide!

[CroNiX]

I think this line:

<?php
$activePage = ($_SERVER["QUERY_STRING"] == 'webpages_id='.$item['webpages_id']) ? '-active' : '';

should be this:

<?php
$activePage = ($_POST['webpages_id'] == $item['webpages_id']) ? '-active' : '';

or $_GET, whichever you are using

[JsusSalv]

The code works fine.  The issue is that not every page is listed within the navigation menu at the top of the site.  If I visit any a page the menu tab si highlighted...but if the tab is not listed in the menu bar then there's no indication of which page you're on.  I just wanted to keep the parent menu tab to stay highlighted so as to indicate which section a viewer was on.  For example, if you click on the Committees tab, then it should stay blue.  If you visit the Committees-Journal page then the Committees should stay blue as well to indicate that the viewer is on a page under the Committees section.  I'd like to make the PHP detect when a user is on any page to highlight the parent menu tab.  I've tried stuff like this:

 

$activePage = ($_SERVER["QUERY_STRING"] == 'webpages_id=10') || ($_SERVER["QUERY_STRING"] == 'webpages_id=11') || ($_SERVER["QUERY_STRING"] == 'webpages_id=12') || ($_SERVER["QUERY_STRING"] == 'webpages_id=13') || ($_SERVER["QUERY_STRING"] == 'webpages_id=14') || ($_SERVER["QUERY_STRING"] == 'webpages_id=15') || ($_SERVER["QUERY_STRING"] == 'webpages_id=16') || ($_SERVER["QUERY_STRING"] == 'webpages_id=17') || ($_SERVER["QUERY_STRING"] == 'webpages_id=18') || ($_SERVER["QUERY_STRING"] == 'webpages_id=19') || ($_SERVER["QUERY_STRING"] == 'webpages_id=20') || ($_SERVER["QUERY_STRING"] == 'webpages_id=21') || ($_SERVER["QUERY_STRING"] == 'webpages_id=23') || ($_SERVER["QUERY_STRING"] == 'webpages_id=39') || ($_SERVER["QUERY_STRING"] == 'webpages_id=40') ? '-active' : '';

 

This code works but it sets ALL menu tabs to the blue highlight color.  I am stumped as to where I should add some code to say "When on the page OR this page OR this page, set the MAIN tab to blue highlight color."

[JsusSalv]

I suppose I could shorten this:

 

$activePage = ($_SERVER["QUERY_STRING"] == 'webpages_id=10') || ($_SERVER["QUERY_STRING"] == 'webpages_id=11') || ($_SERVER["QUERY_STRING"] == 'webpages_id=12') || ($_SERVER["QUERY_STRING"] == 'webpages_id=13') || ($_SERVER["QUERY_STRING"] == 'webpages_id=14') || ($_SERVER["QUERY_STRING"] == 'webpages_id=15') || ($_SERVER["QUERY_STRING"] == 'webpages_id=16') || ($_SERVER["QUERY_STRING"] == 'webpages_id=17') || ($_SERVER["QUERY_STRING"] == 'webpages_id=18') || ($_SERVER["QUERY_STRING"] == 'webpages_id=19') || ($_SERVER["QUERY_STRING"] == 'webpages_id=20') || ($_SERVER["QUERY_STRING"] == 'webpages_id=21') || ($_SERVER["QUERY_STRING"] == 'webpages_id=23') || ($_SERVER["QUERY_STRING"] == 'webpages_id=39') || ($_SERVER["QUERY_STRING"] == 'webpages_id=40') ? '-active' : '';

 

to this:

 

$activePage = ($_SERVER["QUERY_STRING"] == 'webpages_id=10' || 'webpages_id=11' || 'webpages_id=12' || 'webpages_id=13' || 'webpages_id=14' || 'webpages_id=15' || 'webpages_id=16' || 'webpages_id=17' ||  || 'webpages_id=19' || 'webpages_id=20' || 'webpages_id=21' || 'webpages_id=23' || 'webpages_id=39' || 'webpages_id=40') ? '-active' : '';

 

 

or something there abouts but you get the point.