Highlighting menu for the current page

[okrobie]

Hello, I got this basic code from a website and it is supposed to highlight the current page on the menu, which it does very well. The problem is that I cannot stylize the font, color or size of the type in the current page menu display. No matter what I do, it always stays as the default font. The other buttons on the menu can be stylized but not the current page. Is there a way to do this?

 

## SNIPPET 1 - THE PHP ## // To be saved in the 'includes' directory as "nav_include.php"

<?php
$menu=file_get_contents("includes/menu.html"); // get the navigation list of pages
$base=basename($_SERVER['PHP_SELF']); // get the current page
$menu=preg_replace("|<li><a href=\"".$base."\">(.*)</a></li>|U", "<li id=\"current\">$1</li>", $menu); // add an id of 'active' to the link and id of class to the list item for the current page 
echo $menu; // echo the HTML list with the current page highlighted
?>

## SNIPPET 2 - THE HTML LIST ##  To be saved as menu.html

<ul id="navlist">
  <li><a href="index.php">Home</a></li>
  <li><a href="products.php">Products</a></li>
  <li><a href="services.php">Services</a></li>
  <li><a href="about.php">About Us</a></li>
  <li><a href="contact.php">Contact Us</a></li>
</ul>

## CSS ## for the *.css file

#navlist { margin: 0; padding: 30px 0 20px 10px; float: right; width: 60%; }
#navlist ul, #navlist li { margin: 0; padding: 0; display: inline; list-style-type: none; }
#navlist a:link, #navlist a:visited { float: left; line-height: 14px; font-weight: bold; margin: 0 10px 4px; text-decoration: none; color: #4F4F4F; width: auto; } /* link and visited link styles - the visited state can be styled separately if you wish */
#navlist a:link#current, #navlist a:visited#current, #navlist a:hover { border-bottom: 4px solid #66733f; padding-bottom: 2px; background: transparent; color: #4F4F4F; } /* this line's the style for the current page link */
#navlist a:hover { border-bottom: 4px solid #4F4F4F; color: #4F4F4F; } /* hover state for all the links */

## TO DISPLAY ON THE PAGE ##

<?php include("includes/nav_include.php"); ?>

[cyberRobot]

How are you adding the "current" ID to the code? The CSS seems to work for me when adding the ID as follows:

 

<ul id="navlist">
<li><a href="index.php">Home</a></li>
<li><a href="products.php">Products</a></li>
<li><a href="services.php">Services</a></li>
<li><a href="about.php" id="current">About Us</a></li>
<li><a href="contact.php">Contact Us</a></li>
</ul>

[Drongo_III]

So changing this:

 

#navlist a:link#current, #navlist a:visited#current, #navlist a:hover { border-bottom: 4px solid #66733f; padding-bottom: 2px; background: transparent; color: #4F4F4F; } /* this line's the style for the current page link */

 

doesn't change anything? Have you tried wiping out the css on that line just to see if it has any effect and to ensure it's not just a typoed syntax issue? If you do delete that line and it's still displaying that style then I would guess the style is being applied elsewhere - perhaps inline via the included menu.php??

 

Got a  link to the website?

 

Drongo

 

 

[okrobie]

Hi cyberRobot and Drongo_III, thanks for the replies.

 

cyberRobot: I added the id="current"statement to the menu item number 6 and you can see what it does. Meanwhile the "current page" function seems to be working because it does point to the correct page but without any formatting.

 

Drongo_III: editing or removing that line does not affect the menu item for the current page, but it does change the Hover characteristics.  There are no typeface characteristics in that line so I'm guessing the font is a default value. I tried putting typeface parameters in the line but there was no effect.

 

Here is a link to the site so you can both see what is going on.  http://jacquesghazirhaddad.org/

 

Thanks again. I appreciate your help.

 

 

[cyberRobot]

Ah, didn't even look at the PHP. The problem is most likely due to adding the ID of "current" to the <li> tag and not <a>:

 

$menu=preg_replace("|<li><a href=\"".$base."\">(.*)</a></li>|U", "<li id=\"current\">$1</li>", $menu);

 

 

Either you need to utilize the anchor tag here:

 

"<li id=\"current\">$1</li>"

 

 

...or change the CSS formatting so that it's applied to the list item tag.

[okrobie]

Thanks cyberRoot, those both sound like good approaches, but I'm a novice and don't know how to do either one. Can you please give me a few clues? Thanks

[cyberRobot]

If you don't want to add an anchor tag, the following code:

 

#navlist a:link#current, #navlist a:visited#current, #navlist a:hover { border-bottom: 4px solid #66733f; padding-bottom: 2px; background: transparent; color: #4F4F4F; } /* this line's the style for the current page link */

 

 

...could be changed to:

 

#navlist #current, #navlist #current, #navlist a:hover { border-bottom: 4px solid #66733f; padding-bottom: 2px; background: transparent; color: #4F4F4F; } /* this line's the style for the current page link */

 

 

Note that the last part doesn't use the "current" ID, so I left that as is. Let me know if you would prefer to add the anchor tag.

[okrobie]

Why mess with perfection? Thanks a million.