PHP and CSS menu
Using php to control CSS styles
Today we will use PHP to control CSS styles to highlight the tab or hit area of a html menu with styles controlled by CSS.
First let's start off with a simple menu, markup:
<div class="navigation">
<ul>
<li><a href="cssMenu.php"<?php if($pageOn == 'cssMenu.php'){?> id="selected"<?php }?>>home</a></li>
<li><a href="book.php"<?php if($pageOn == 'book.php'){?> id="selected"<?php }?>>books</a></li>
<li><a href="movie.php"<?php if($pageOn == 'movie.php'){?> id="selected"<?php }?>>movies</a></li>
<li><a href="contact.php"<?php if($pageOn == 'contact.php'){?> id="selected"<?php }?>>contact</a></li>
</ul>
</div>
Line by line:
<div class="navigation">
All we are doing here is stating a class attached to the div (look of the main element)
<ul>
Created a list, so we can create a menu item listing.
<li><a href="cssMenu.php"<?php if($pageOn == 'cssMenu.php'){?> id="selected"<?php }?>>home</a></li>
Now look above, normal li elements mixed in with php snippets.
<?php if($pageOn == 'cssMenu.php'){?> id="selected"<?php }?>
This is where all the magic happens, the if statement is looking or a certaion value, it is equals that, bam, the id="selected" will be shown, it does not equal that, then the link will be written to the page w/o the selected id, simple.
Here is the CSS style that is assigned to the selected id:
#selected{
background-color:#000066;
color:#FFFFFF;
font-weight:bold;
}
Now you can imagine, that when the id tag is displayed, the CSS (external or otherwise) will kick in and do its thing in the browser.
Now, you are probably asking where did the $pageOn variable come from? The answer is, we look at the top of the page, where everything happens first.
Here ya go:
<?php
//we need to set a var to find what page we are on
$pageOn = basename($_SERVER['PHP_SELF']);
//this is used for the title bar
$mItem = $pageOn;
?>
The comments explain what is going on, but all we are are doing is creating a variable $pageOn to hold the value or name of the page we are on.
The $mItem var just holds the same value in this example so we can illustrate how you can use this in the page also.
View all Code:
<?php
//we need to set a var to find what page we are on
$pageOn = basename($_SERVER['PHP_SELF']);
//this is used for the title bar
$mItem = $pageOn;
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>We are on the following page: <?=$mItem;?></title>
<style>
div.navigation{
border-top:1px dotted #cccccc;
border-right:1px solid #cccccc;
border-left:1px solid #cccccc;
border-bottom:2px double #cccccc;
background-color:#f1f1f1;width:650px;
}
div.navigation ul{
list-style:none;
}
div.navigation li{
display:inline;
padding-right:10px;
border-right:1px solid #cccccc;
}
#selected{
background-color:#000066;
color:#FFFFFF;
font-weight:bold;
}
</style>
</head>
<body>
<?php
echo $pageOn;
?>
<div class="navigation">
<ul>
<li><a href="cssMenu.php"<?php if($pageOn == 'cssMenu.php'){?> id="selected"<?php }?>>home</a></li>
<li><a href="book.php"<?php if($pageOn == 'book.php'){?> id="selected"<?php }?>>books</a></li>
<li><a href="movie.php"<?php if($pageOn == 'movie.php'){?> id="selected"<?php }?>>movies</a></li>
<li><a href="contact.php"<?php if($pageOn == 'contact.php'){?> id="selected"<?php }?>>contact</a></li>
</ul>
</div>
</body>
</html>
Well there you have it,a PHP driven, CSS inspired menu, take the concept and go far, real far, don't stop here.
This is a good go between for menus or other items that may require something extra.
Looking forward to comments and questions, good day to all!
