PHP and CSS menu
81Reference Materials
|
Build Your Own Database Driven Website Using PHP and MySQL
Price: $15.00
List Price: $39.95 |
|
HTML Utopia: Designing Without Tables Using CSS (Build Your Own)
Price: $8.65
List Price: $39.95 |
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.
Example page:
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 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, answer is we look or 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 is good go between for menus or other items that may require something extra.
Looking forward to comments and questions, good day to all.
PrintShare it! — Rate it: up down flag this hub
Comments
yes, using this $_SERVER['PHP_SELF'], and then assigning the value to a variable called $pageOn.
This is a nice example, thank you! I try to create a similar multi-level menu.
considering me a begineer in php , how should i start it
Ok, start in PHP or start creating a menu like in the tut?
If you are wanting to gain more experience in the lanquage a good beginners ref will do, along with some articles of interest of the project.
But the planning in what you want to do with the app or page will give you a guideline in what logic and functions to create or use to give the effect.
The good thing in web scripting is there is more than one way to skin cat.
thanks how about w3schools.com
good, if you want to reference something that you may have grabbed from an article, but it still depends on what you want to do, the functionality will dictate that.
I am pleased to see such an informative hub. Your have been very clear in laying this out for us.Thank you.
Hola. You rock! Great hub on PHP. I'm still a noobie, but hope to be a stud someday.
Great job on this hub. I'll be visiting often to view your others.
This was good but i want to use ajax if you have any examples for those?I will be very happy.Thank you!
Only just cracked html/CSS - Its time to learn the daddy!!
Hello My Name is Ashwin,
i want to know how i can draw a bar chart automatically from numeric values stored in my database table, i use mysql, php and ajax.
thank you
ashwin hegde : I have a how to using Yahoo UI (Flash) and PHP and MySQL,
Nice Explanation, it will look really great if you explain more with more pictures.
CSS / html coding are not my strong suits ,thanks for explaining so much
Hello karmadir :
See the live example:
Thanks for the comment.
good
Thank you for sharing your nice work.
Right, understood everything here,Not! lol would like to learn all this , what order should I read your hubs so that I can go from the beginning .
Hawkesdream :
There really isnt any order, but I would start with the the web form with radio buttons and checkboxes.
Nice examples, thank you!
Thankyou, this was a very useful tutorial
Nice tutorial,very informative.
Thanks for the tutorial. Relative beginner here and would like to add this function to an existing WordPress template. The existing list item looks like this:
Thanks for the tutorial, very informative.
Hi,
I've been wondering, do you have a PHP solution for a include with case script?
if (!isset($_GET['page'])) $page= 'index2'; else $page= $_GET['page'];
switch($page)
{
case 'index2': include ('index2.php');break;
etc...
couse nothing seems to work for me..
CSS PHP how to poll.
Did this help you?
See results without voting
rajkishor09 says:
10 months ago
Hello i'm new in PHP anr still learning. i have visited the example site. but i want to know are yo setting menu back color dynamically.