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.

Go see for yourself.

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!


More by this Author


Comments 44 comments

rajkishor09 profile image

rajkishor09 7 years ago from Bangalore, Karnataka, INDIA

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.


Alpho011 profile image

Alpho011 7 years ago from Marietta, Georgia Author

yes, using this $_SERVER['PHP_SELF'], and then assigning the value to a variable called $pageOn.


CSS-Menu 7 years ago

This is a nice example, thank you! I try to create a similar multi-level menu.


techie 7 years ago

considering me a begineer in php , how should i start it


Alpho011 profile image

Alpho011 7 years ago from Marietta, Georgia 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.


techie 7 years ago

thanks how about w3schools.com


Alpho011 profile image

Alpho011 7 years ago from Marietta, Georgia 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.


earnestshub profile image

earnestshub 7 years ago from Melbourne Australia

I am pleased to see such an informative hub. Your have been very clear in laying this out for us.Thank you.


kea profile image

kea 7 years ago

Hola. You rock! Great hub on PHP. I'm still a noobie, but hope to be a stud someday.


mysoberlife profile image

mysoberlife 7 years ago

This was good but i want to use ajax if you have any examples for those?I will be very happy.Thank you!


Optimizing Backlinks Hub 7 years ago

Only just cracked html/CSS - Its time to learn the daddy!!


ashwin hegde 7 years ago

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


Alpho011 profile image

Alpho011 7 years ago from Marietta, Georgia Author

ashwin hegde : I have a how to using Yahoo UI (Flash) and PHP and MySQL,

http://hubpages.com/technology/PHP-MySql-and-Yahoo...


Kambakkht Ishq 7 years ago

CSS / html coding are not my strong suits ,thanks for explaining so much


Alpho011 profile image

Alpho011 7 years ago from Marietta, Georgia Author

Hello karmadir :

See the live example:

Thanks for the comment.

http://diadde.com/test/cssPHP/cssMenu.php


gpetrou85 profile image

gpetrou85 7 years ago from greece

good


support1000 7 years ago

Thank you for sharing your nice work.


Hawkesdream profile image

Hawkesdream 7 years ago from Cornwall

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 .


Alpho011 profile image

Alpho011 7 years ago from Marietta, Georgia Author

Hawkesdream :

There really isn't any order, but I would start with the the web form with radio buttons and checkboxes.


css maker 7 years ago

Nice examples, thank you!


Josh 7 years ago

Thankyou, this was a very useful tutorial


Tim The UWN 7 years ago

Nice tutorial,very informative.


Paul 6 years ago

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:


tonyhubb profile image

tonyhubb 6 years ago

Thanks for the tutorial, very informative.


coder 6 years ago

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..


Catalin 6 years ago

Very useful, I was looking for something like that and this was perfect. Thanks!


Muhammad Waqas 6 years ago

How about if we have current page like "about.php?p=3"

how it will work then?


Dino 6 years ago

Is it me, or does anyone else get a space about this menu? For some reason the ul tag creates white space.


Alpho011 profile image

Alpho011 6 years ago from Marietta, Georgia Author

@Muhammad Waqas then use the p like this for the page on

$p = $_GET['p'];

Instead of $pageOn


priyadharshinik 6 years ago

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.


Alpho011 profile image

Alpho011 6 years ago from Marietta, Georgia 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

}


snkhan120 profile image

snkhan120 6 years ago

good practice


Chris 6 years ago

Brilliant, just what I needed.

Perfect for a php novice like me


Asif M 5 years ago

Good


Dustin 5 years ago

Great tutorial. I was trying something very long and crazy, spending all night on it, and this worked perfectly. Thanks :)


sahin 5 years ago

Thanks, I am going to use it.


Wayne 5 years ago

Brilliant sorted my CSS menu out, now I know which page i'm on in my css menu! Thanks.


Brendan 4 years ago

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!!


Francisfrm 4 years ago

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


kundan kumar 4 years ago

This is a nice example, thank you! I try to create a similar multi-level menu.


Pandora 4 years ago

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 :)


Marc 3 years ago

Thank you!


No 3 years ago

Good job!


gul khan 2 years ago

php never mind to you

    Sign in or sign up and post using a HubPages Network account.

    0 of 8192 characters used
    Post Comment

    No HTML is allowed in comments, but URLs will be hyperlinked. Comments are not for promoting your articles or other sites.


    CSS PHP how to poll.

    Did this help you?

    • Yes
    • No
    See results without voting
    Click to Rate This Article
    working