?
Solved

CSS hover state with php include

Posted on 2007-03-27
4
Medium Priority
?
1,456 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 2000 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

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

Question has a verified solution.

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

These days socially coordinated efforts have turned into a critical requirement for enterprises.
3 proven steps to speed up Magento powered sites. The article focus is on optimizing time to first byte (TTFB), full page caching and configuring server for optimal performance.
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
Suggested Courses
Course of the Month17 days, 10 hours left to enroll

830 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