CSS hover state with php include

Hi experts,

I am just doing a simple website in PHP where the top menu is based on CSS and its being included to every page with <?php include "top-menu.php"; ?>

I want the top menu CSS will show the hover state in its link. For example if one of the menu links is "about us" and the user view the "about us" page then the menu will show the links hover state in the menu.

I know of course how to do it in CSS but I do not know how to "tell" the menu to hover on a link according to the viewed page.

Can somebody direct me?
RefaelAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

glcumminsCommented:
For the sake of this answer, I will assume that each of your target pages (eg, 'about us') is contained in a separate script.

In each script, create a variable to hold an identifier for the current page:

<?php
$currentPage = "about us";
?>

Then, in the 'top-menu.php' page, as you cycle through the menu items, check if $currentPage matches the current menu item:

<?php
if ($currentPage == $currentMenuItem)
{
   echo " class=active";
}
?>

You will need create a class that will differentiate the look of the 'active' menu item from the others, and you will also need to find a common way to link the $currentPage identifier to the current menu item.
0
RefaelAuthor Commented:
Hi glcummins
can you please and kindly show me a full exmaple.. just for one page as i am php pioneer :-) .... what does this means "link the $currentPage identifier to the current menu item"?
0
glcumminsCommented:
What I mean is you need to find a way to determine if a given menu item matches the current page.

Here is an example. I created a stylesheet (style.css), top menu (top-menu.php), and three pages:

style.css:
------------
#menu {
      list-style: none;
      padding: 0;
      margin: 0;
}
#menu li {
      display: inline;
}
#menu li.active {
      background-color: green;
}
#menu a {
      padding: 20px;
}





top-menu.php
-------------------
<ul id="menu">
      <li class="<?php
      if ($currentPage == "Home")
      {
            echo "active";
      }?>"><a href="/">Home</a></li>
      <li class="<?php
      if ($currentPage == "About Us")
      {
            echo "active";
      }?>"><a href="/about.php">About Us</a></li>
      <li class="<?php
      if ($currentPage == "Contact")
      {
            echo "active";
      }?>"><a href="/contact.php">Contact</a></li>
</ul>




index.php:
----------------
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<?php

$currentPage = "Home";

include "top-menu.php";

?>
<p>Home Page</p>
</body>
</html>




about.php
--------------
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<?php

$currentPage = "About Us";

include "top-menu.php";

?>
<p>About Us Page</p>
</body>
</html>



contact.php
---------------
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<?php

$currentPage = "Contact";

include "top-menu.php";

?>
<p>Contact Page</p>
</body>
</html>



Notice that the only major differences in 'index.php', 'about.php', and 'contact.php' are the values for '$currentPage' and the text that is displayed.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
RefaelAuthor Commented:
hey great! i do not use UL and LI but i got the concpet ... very neat!
thanks a lot!
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
PHP

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.