Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people, just like you, are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
Solved

CSS hover state with php include

Posted on 2007-03-27
4
1,438 Views
Last Modified: 2012-05-05
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?
0
Comment
Question by:Refael
  • 2
  • 2
4 Comments
 
LVL 24

Expert Comment

by:glcummins
ID: 18803438
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
 

Author Comment

by:Refael
ID: 18803553
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
 
LVL 24

Accepted Solution

by:
glcummins earned 500 total points
ID: 18803677
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
 

Author Comment

by:Refael
ID: 18803997
hey great! i do not use UL and LI but i got the concpet ... very neat!
thanks a lot!
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction HTML checkboxes provide the perfect way for a web developer to receive client input when the client's options might be none, one or many.  But the PHP code for processing the checkboxes can be confusing at first.  What if a checkbox is…
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn how to count occurrences of each item in an array.
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.

839 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question