Selected Navigation using PHP [closed]
Questions asking us to recommend or find a tool, library or favorite off-site resource are off-topic for Stack Overflow as they tend to attract opinionated answers and spam. Instead, describe the problem and what has been done so far to solve it.
Closed 8 years ago.
Improve this questionIs it possible to detect where a user of a page is navigating to on your website from the server using PHP and then update the classes of the navigation menu as to have CSS style the current selection to indicate the current selection to the user?
This is a common problem that doesn't really have an elegant one-size-fits-all solution. It depends primarily on how you store your list.
Basic answer:
- Put nav list items in an array
- Iterate over array to output html
"<li>$item</li>"
- Check each item to see whether it's the current page (more below)
- If current item is the current page, add an html class to it (i.e.
class="current"
)
- If current item is the current page, add an html class to it (i.e.
The hard part is figuring out which page is the current page.
Three ways to approach this problem:
- (Most difficult) Strip part of the path request (
http://blah/my-page
) and compare it to some data in your nav list. - (Most maintenance) Define a variable per-page that matches something in your nav list.
- (Most setup / overhead) Use a foreign key relationship between nav item and page in your database schema
I've done all three.
- Option 1 works and is the most robust (you can apply it to multiple navigation lists or multiple tiers in a tree), but is hard to do correctly in a portable fashion, and I have some reservations about it.
- Option 2 is the easiest to setup initially, but you have to keep track of data in several places when you add or remove pages. I dislike maintenance.
- Option 3 is the easiest to maintain but requires a database (and requires extra planning if you want to create nav list entries that aren't stored in the database or don't have a matching page handled by the database). This is the best way to go for bigger projects.
If there's a better solution than those, I'd like to know because this problem always bugs me.
Example of #2
Option two is the easiest, so here's a simple implementation.
$nav = array(
'/' => 'Home',
'/portfolio/' => 'Portfolio',
'/contact/' => 'Contact',
);
function nav($current)
{
GLOBAL $nav;
$output = '';
foreach($nav as $key => $var)
{
# First bit of common HTML
$output .= '<li><a';
if ($current == $var)
{
# add "current" class only for the to-be highlighted one
$output .=' class="current"';
}
# finish off common HTML
$output .= ' href="'.$key.'">'.$var.'</a></li>'."\n";
}
return $output;
}
echo nav('Home');
Obviously you need to supply a CSS rule to change the formatting on li.current
, but that's the easy part.
I'm assuming your nav is in an include file. Add this snippet to every nav item (change "about" to a unique section name).
class="<?php if ($section == "about") {echo "selected";} ?>"
Then in your individual page files, assign the $section variable it's corresponding value.
<?php $section="about"; ?>
Use the added .selected class to style as you wish.
精彩评论