Flag This Hub

PHP and CSS menu

By


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:

click here

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.

Go see for yourself.

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.


Reference Materials

Build Your Own Database Driven Website Using PHP and MySQL
Amazon Price: $12.50
List Price: $39.95
HTML Utopia: Designing Without Tables Using CSS (Build Your Own)
Amazon Price: $0.01
List Price: $39.95

Comments

rajkishor09 3 years 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.

Alpho011 3 years ago

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

CSS-Menu 3 years ago

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

techie 3 years ago

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

Alpho011 3 years ago

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 3 years ago

thanks how about w3schools.com

Alpho011 3 years ago

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 3 years ago

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

kea 3 years ago

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

mysoberlife 3 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 3 years ago

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

ashwin hegde 3 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 3 years ago

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

http://hubpages.com/hub/PHP-MySql-and-Yahoo-Flash-

karmadir 3 years ago

Nice Explanation, it will look really great if you explain more with more pictures.

Kambakkht Ishq 3 years ago

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

Alpho011 3 years ago

Hello karmadir :

See the live example:

Thanks for the comment.

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

gpetrou85 3 years ago

good

support1000 3 years ago

Thank you for sharing your nice work.

Hawkesdream 3 years ago

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 3 years ago

Hawkesdream :

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

css maker 3 years ago

Nice examples, thank you!

Josh 2 years ago

Thankyou, this was a very useful tutorial

Tim The UWN 2 years ago

Nice tutorial,very informative.

Paul 2 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 2 years ago

Thanks for the tutorial, very informative.

coder 2 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 2 years ago

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

Muhammad Waqas 2 years ago

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

how it will work then?

Dino 2 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 2 years ago

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

$p = $_GET['p'];

Instead of $pageOn

priyadharshinik 2 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 2 years ago

@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 22 months ago

good practice

Chris 21 months ago

Brilliant, just what I needed.

Perfect for a php novice like me

Asif M 15 months ago

Good

Dustin 14 months ago

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

sahin 10 months ago

Thanks, I am going to use it.

Wayne 8 months ago

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

Brendan 2 months 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!!

Submit a Comment
Members and Guests

Sign in or sign up and post using a hubpages account.



    CSS PHP how to poll.

    Did this help you?

    • Yes
    • No
    See results without voting
    Like this Hub?
    Please wait working