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!
Reference Materials
CSS PHP how to poll.
Did this help you?
Comments
php never mind to you
Good job!
Thank you!
You are my hero! I was stumbling over javascript for 2days. In fact php is the simplest and easiest way to solve my problem. Now I can sleep :)
This is a nice example, thank you! I try to create a similar multi-level menu.
Cela fait un bon moment deja, j’etais a l'aguet d’info relatif à la bourse en ligne.
Bien plus qu’une maniere specifique pour gagner de l’argent, j'imagine que le monde des finances placement et indice boursier ma éternellement interesse. Comment m'y mettre etait la seule question qui me venais en tete et cela me semblais toujours impossible n’ayant jamais été veritablement fort en [math, je me sentais pas miser avec mes revenus sur une chose #de risque mais aussi et surtout mal maitrise. Pour le coup je n’avais jamais tenté ayant peur de me faire rouler par le premier escroc du coin.
Etant un grand joueur dans l’ame, j’ai teste plusieur chose du style comme le Casino (technique dite de la Martingual), des choses comme le P.T.C ou P.T.R et l'unique chose que je puisse vous dire c’est que je me suis fait totalement arnaquer par les belles paroles des sois-disant experts du domaine qui ont du gagner un peu d’argent sur mes côtes. Cela aura eu au moin la vertue d eme servir de lecon ...
Enormement d’arnaque, astuce méthode et technique qui serais suceptible de vous couter cher si jamais vous ne faite pas attention ou etes trop confiant. Depuis cette experience et diverse echange, je deconseille tres fortement ce style de pratique et je n’en est assimilé les ficelles que bien trop tardivement.
Apres pas mal de recherche, je me suis tombé sur quelque chose de valable à cette adresse : http://lesoptionsbinaires.blogspot.fr/
Cela y est tres bien expliqué d'une maniere tres simple et concise et permet de mieux comprendre et developper ce qui vas fonctionner ou ce qui est fait pour vous truander …
Amicalement :)
Tags : methode argent, bourse en ligne, option binaire
Hi, great work on this simple menu fix for php. Just wondering if you have made a script for templates? I want to make it so that when you click on a menu item it reloads the current page but changes the content of the page. So you only make one page for the layout (eg. index.php as a template) and then you make a separate content area for every other page. Anyway I'm using your menu design now. I also made 2 menus, one for the index and another for every other page and it was made so that it switches automatically with an if else statement. I love php, it saves so much coding!!
Brilliant sorted my CSS menu out, now I know which page i'm on in my css menu! Thanks.
Thanks, I am going to use it.
Great tutorial. I was trying something very long and crazy, spending all night on it, and this worked perfectly. Thanks :)
Good
Brilliant, just what I needed.
Perfect for a php novice like me
good practice
- AUTHOR
@priyadharshinik
Using what is shown, just use another variable in the url
ie; main.php?page=1&subMenu=2
switch($_GET['pageOn'){
case '1':
//inside this another switch for the submenu
switch($_GET['subMenu']){
case '1':
//sub item one
break;
}
break
}
Hi,
i want to create sidebar menus with one r more submenus using css and php.can any one help me.i know css and php little bit.
- AUTHOR
@Muhammad Waqas then use the p like this for the page on
$p = $_GET['p'];
Instead of $pageOn
Is it me, or does anyone else get a space about this menu? For some reason the ul tag creates white space.
How about if we have current page like "about.php?p=3"
how it will work then?
Very useful, I was looking for something like that and this was perfect. Thanks!
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..
Thanks for the 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:
Nice tutorial,very informative.
Thankyou, this was a very useful tutorial
Nice examples, thank you!
- AUTHOR
Hawkesdream :
There really isn't any order, but I would start with the the web form with radio buttons and checkboxes.
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 .
Thank you for sharing your nice work.
good
- AUTHOR
Hello karmadir :
See the live example:
Thanks for the comment.
CSS / html coding are not my strong suits ,thanks for explaining so much
- AUTHOR
ashwin hegde : I have a how to using Yahoo UI (Flash) and PHP and MySQL,
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
Only just cracked html/CSS - Its time to learn the daddy!!
This was good but i want to use ajax if you have any examples for those?I will be very happy.Thank you!
Hola. You rock! Great hub on PHP. I'm still a noobie, but hope to be a stud someday.
I am pleased to see such an informative hub. Your have been very clear in laying this out for us.Thank you.
- AUTHOR
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.
thanks how about w3schools.com
- AUTHOR
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.
considering me a begineer in php , how should i start it
This is a nice example, thank you! I try to create a similar multi-level menu.
- AUTHOR
yes, using this $_SERVER['PHP_SELF'], and then assigning the value to a variable called $pageOn.
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.
44