Solved

CSS hover state with php include

Posted on 2007-03-27
4
1,439 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
[X]
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
  • 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

On Demand Webinar - Networking for the Cloud Era

This webinar discusses:
-Common barriers companies experience when moving to the cloud
-How SD-WAN changes the way we look at networks
-Best practices customers should employ moving forward with cloud migration
-What happens behind the scenes of SteelConnect’s one-click button

Question has a verified solution.

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

Build an array called $myWeek which will hold the array elements Today, Yesterday and then builds up the rest of the week by the name of the day going back 1 week.   (CODE) (CODE) Then you just need to pass your date to the function. If i…
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
The viewer will learn how to count occurrences of each item in an array.
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…

740 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