Monday, June 27, 2016

One Page Menu System

I thought it would make sense to make my first article in this blog be about how to make a simple menu system.

You wouldn't use this menu on a "public" site, this menu is well suited for a Content Management System (CMS). Rather than writing a menu for each section of your site you can create one page that contains all the menus.

You can also apply this same concept to any page that you would like to be different based on how the page was entered.

It's done using very basic PHP and CSS.

The strategy is a simple one. Create a container to hold the menu system, create a container for each menu and then display the one you need.

<div id="menu-display">
   <div id="main">
       <a class="menu-entry" href="index.php?menu=user">User Menu</a>
       <a class="menu-entry" href="index.php?menu=system">System Menu</a>
   <div id="user">
       <a class="menu-entry" href="user1.html">User Page 1</a>
       <a class="menu-entry" href="user2.html">User Page 2</a>
       <a class="menu-entry" href="user3.html">User Page 3</a>
       <a class="menu-entry" href="index.php">Main Menu</a>
   <div id="system">
       <a class="menu-entry" href="system1.html">System Page 1</a>
       <a class="menu-entry" href="system2.html">System Page 2</a>
       <a class="menu-entry" href="system3.html">System Page 3</a>
       <a class="menu-entry" href="index.php">Main Menu</a>

The "menu-display" <div> is the container that holds all the menus. Style this for color, font, etc and your menus will all look the same.

The "main", "user", and "system" <divs> are the individual menus. It doesn't matter what order they are in unless you plan to display 2 at once. An example would be additional menu items available only to certain users.

So how do you make things appear and disappear? That is where PHP is your friend, it just takes a couple lines of code.

At the top of your page:


$display = "main";

if (isset($_GET['menu']) { $display = $_GET['menu']; }


In the above the variable $display is set to "main". So if the page is called without any menu request, it will default to the main menu.

The next line checks to see if a menu name was passed to the page. If so, then the $display variable is changed from the default.

The following code is then executed at the bottom of the <head> section of the page. Just before the </head> closing tag.

    if ($display != "main") { echo "#main { display: none"; }
    if ($display != "system") { echo "#system { display: none"; }
    if ($display != "user") { echo "#user { display: none"; }

The above is a simple set of statements that checks the $display variable and sets the <div> to not be displayed if there is not a match. If you have a large number of menus you could easily use a loop to accomplish the task.

You can see a working example and download the code here.


  1. Brilliant ideas that you have share with us.It is really help me lot and i hope it will help others also.update more different ideas with us.
    Loadrunner Training in Chennai
    JAVA Training in Chennai
    Hadoop Training in Chennai
    Selenium Training in Chennai
    German Classes in chennai
    german classes

    1. IEEE Final Year projects Project Centers in Chennai are consistently sought after. Final Year Students Projects take a shot at them to improve their aptitudes. IEEE Final Year project centers ground for all fragments of CSE & IT engineers hoping to assemble.Final Year Projects for CSE

      Spring Framework has already made serious inroads as an integrated technology stack for building user-facing applications. Spring Framework Corporate TRaining .

      Specifically, Spring Framework provides various tasks are geared around preparing data for further analysis and visualization. Spring Training in Chennai

      The Angular Training covers a wide range of topics including Angular Directives, Angular Services, and Angular programmability.Angular Training