ArtsAutosBooksBusinessEducationEntertainmentFamilyFashionFoodGamesGenderHealthHolidaysHomeHubPagesPersonal FinancePetsPoliticsReligionSportsTechnologyTravel

PHP and CSS menu

Updated on January 17, 2014

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!


CSS PHP how to poll.

Did this help you?

See results

Comments

    0 of 8192 characters used
    Post Comment

    • profile image

      gul khan 

      4 years ago

      php never mind to you

    • profile image

      No 

      5 years ago

      Good job!

    • profile image

      Marc 

      5 years ago

      Thank you!

    • profile image

      Pandora 

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

    • profile image

      kundan kumar 

      6 years ago

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

    • profile image

      Francisfrm 

      6 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

    • profile image

      Brendan 

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

    • profile image

      Wayne 

      7 years ago

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

    • profile image

      sahin 

      7 years ago

      Thanks, I am going to use it.

    • profile image

      Dustin 

      7 years ago

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

    • profile image

      Asif M 

      7 years ago

      Good

    • profile image

      Chris 

      8 years ago

      Brilliant, just what I needed.

      Perfect for a php novice like me

    • snkhan120 profile image

      snkhan120 

      8 years ago

      good practice

    • Alpho011 profile imageAUTHOR

      Alpho011 

      8 years ago from Marietta, Georgia

      @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

      }

    • profile image

      priyadharshinik 

      8 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 imageAUTHOR

      Alpho011 

      8 years ago from Marietta, Georgia

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

      $p = $_GET['p'];

      Instead of $pageOn

    • profile image

      Dino 

      8 years ago

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

    • profile image

      Muhammad Waqas 

      8 years ago

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

      how it will work then?

    • profile image

      Catalin 

      8 years ago

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

    • profile image

      coder 

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

    • tonyhubb profile image

      tonyhubb 

      8 years ago

      Thanks for the tutorial, very informative.

    • profile image

      Paul 

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

    • profile image

      Tim The UWN 

      9 years ago

      Nice tutorial,very informative.

    • profile image

      Josh 

      9 years ago

      Thankyou, this was a very useful tutorial

    • profile image

      css maker 

      9 years ago

      Nice examples, thank you!

    • Alpho011 profile imageAUTHOR

      Alpho011 

      9 years ago from Marietta, Georgia

      Hawkesdream :

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

    • Hawkesdream profile image

      Hawkesdream 

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

    • profile image

      support1000 

      9 years ago

      Thank you for sharing your nice work.

    • gpetrou85 profile image

      gpetrou85 

      9 years ago from greece

      good

    • Alpho011 profile imageAUTHOR

      Alpho011 

      9 years ago from Marietta, Georgia

      Hello karmadir :

      See the live example:

      Thanks for the comment.

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

    • profile image

      Kambakkht Ishq 

      9 years ago

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

    • Alpho011 profile imageAUTHOR

      Alpho011 

      9 years ago from Marietta, Georgia

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

      https://hubpages.com/technology/PHP-MySql-and-Yaho...

    • profile image

      ashwin hegde 

      9 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

    • profile image

      Optimizing Backlinks Hub 

      9 years ago

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

    • mysoberlife profile image

      mysoberlife 

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

    • kea profile image

      kea 

      9 years ago

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

    • earnestshub profile image

      earnestshub 

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

    • Alpho011 profile imageAUTHOR

      Alpho011 

      9 years ago from Marietta, Georgia

      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.

    • profile image

      techie 

      9 years ago

      thanks how about w3schools.com

    • Alpho011 profile imageAUTHOR

      Alpho011 

      9 years ago from Marietta, Georgia

      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.

    • profile image

      techie 

      9 years ago

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

    • profile image

      CSS-Menu 

      9 years ago

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

    • Alpho011 profile imageAUTHOR

      Alpho011 

      9 years ago from Marietta, Georgia

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

    • rajkishor09 profile image

      RAJKISHOR SAHU 

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

    working

    This website uses cookies

    As a user in the EEA, your approval is needed on a few things. To provide a better website experience, hubpages.com uses cookies (and other similar technologies) and may collect, process, and share personal data. Please choose which areas of our service you consent to our doing so.

    For more information on managing or withdrawing consents and how we handle data, visit our Privacy Policy at: https://hubpages.com/privacy-policy#gdpr

    Show Details
    Necessary
    HubPages Device IDThis is used to identify particular browsers or devices when the access the service, and is used for security reasons.
    LoginThis is necessary to sign in to the HubPages Service.
    Google RecaptchaThis is used to prevent bots and spam. (Privacy Policy)
    AkismetThis is used to detect comment spam. (Privacy Policy)
    HubPages Google AnalyticsThis is used to provide data on traffic to our website, all personally identifyable data is anonymized. (Privacy Policy)
    HubPages Traffic PixelThis is used to collect data on traffic to articles and other pages on our site. Unless you are signed in to a HubPages account, all personally identifiable information is anonymized.
    Amazon Web ServicesThis is a cloud services platform that we used to host our service. (Privacy Policy)
    CloudflareThis is a cloud CDN service that we use to efficiently deliver files required for our service to operate such as javascript, cascading style sheets, images, and videos. (Privacy Policy)
    Google Hosted LibrariesJavascript software libraries such as jQuery are loaded at endpoints on the googleapis.com or gstatic.com domains, for performance and efficiency reasons. (Privacy Policy)
    Features
    Google Custom SearchThis is feature allows you to search the site. (Privacy Policy)
    Google MapsSome articles have Google Maps embedded in them. (Privacy Policy)
    Google ChartsThis is used to display charts and graphs on articles and the author center. (Privacy Policy)
    Google AdSense Host APIThis service allows you to sign up for or associate a Google AdSense account with HubPages, so that you can earn money from ads on your articles. No data is shared unless you engage with this feature. (Privacy Policy)
    Google YouTubeSome articles have YouTube videos embedded in them. (Privacy Policy)
    VimeoSome articles have Vimeo videos embedded in them. (Privacy Policy)
    PaypalThis is used for a registered author who enrolls in the HubPages Earnings program and requests to be paid via PayPal. No data is shared with Paypal unless you engage with this feature. (Privacy Policy)
    Facebook LoginYou can use this to streamline signing up for, or signing in to your Hubpages account. No data is shared with Facebook unless you engage with this feature. (Privacy Policy)
    MavenThis supports the Maven widget and search functionality. (Privacy Policy)
    Marketing
    Google AdSenseThis is an ad network. (Privacy Policy)
    Google DoubleClickGoogle provides ad serving technology and runs an ad network. (Privacy Policy)
    Index ExchangeThis is an ad network. (Privacy Policy)
    SovrnThis is an ad network. (Privacy Policy)
    Facebook AdsThis is an ad network. (Privacy Policy)
    Amazon Unified Ad MarketplaceThis is an ad network. (Privacy Policy)
    AppNexusThis is an ad network. (Privacy Policy)
    OpenxThis is an ad network. (Privacy Policy)
    Rubicon ProjectThis is an ad network. (Privacy Policy)
    TripleLiftThis is an ad network. (Privacy Policy)
    Say MediaWe partner with Say Media to deliver ad campaigns on our sites. (Privacy Policy)
    Remarketing PixelsWe may use remarketing pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to advertise the HubPages Service to people that have visited our sites.
    Conversion Tracking PixelsWe may use conversion tracking pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to identify when an advertisement has successfully resulted in the desired action, such as signing up for the HubPages Service or publishing an article on the HubPages Service.
    Statistics
    Author Google AnalyticsThis is used to provide traffic data and reports to the authors of articles on the HubPages Service. (Privacy Policy)
    ComscoreComScore is a media measurement and analytics company providing marketing data and analytics to enterprises, media and advertising agencies, and publishers. Non-consent will result in ComScore only processing obfuscated personal data. (Privacy Policy)
    Amazon Tracking PixelSome articles display amazon products as part of the Amazon Affiliate program, this pixel provides traffic statistics for those products (Privacy Policy)