Solved

CSS hover state with php include

Posted on 2007-03-27
4
1,428 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

Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

Join & Write a Comment

Part of the Global Positioning System A geocode (https://developers.google.com/maps/documentation/geocoding/) is the major subset of a GPS coordinate (http://en.wikipedia.org/wiki/Global_Positioning_System), the other parts being the altitude and t…
Password hashing is better than message digests or encryption, and you should be using it instead of message digests or encryption.  Find out why and how in this article, which supplements the original article on PHP Client Registration, Login, Logo…
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…

757 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

Need Help in Real-Time?

Connect with top rated Experts

20 Experts available now in Live!

Get 1:1 Help Now