A Php Menu-builder Tutorial

This Sidebar Menu-builder code and the php scripts are adapted from a Tutorial on the Astahost.com Forum titled : CMS101 - Content Management System Design .
Since the original tutorial's author (vujsa) did such a marvellous job of describing the system in the original Topic posting, I will not attempt to explain it here, rather, I invite you to have a look at his Topic and learn from it.
The Basic tutorial provided coding for developing a table-based web-site template which used php includes and embedded data to create a 'menu section' in the template, which was simply building a list of anchors inside a table cell using php. This adapted version takes it a couple of steps further.

Notes

1.) To begin with, the list of menu items are inside a div tag which is more compliant to the standards. The Template used by vujsa is 'table based', but, using the 'sidebar' code in a div-structured page would bring it in-line with proper css and (x)html coding, (using div's and embedded css rather than tables). (*see note about validation below*) The focus here is on the 'menu' creation, not the template structure.

2.) Secondly, the list is built using dl, dt and dd tags instead of ul's and li's. This allows for a little more control on the styling of the Menu. Where the "ul,li" method is a two level structure, the "dl, dt, dd"
method allows for three levels of styling. There are numerous tutorials on the web showing dl menus and
I encourage you to read them.

3.) Thirdly, the new sidebar version adds class tags to, again, allow for some CSS hooks.

4.) Fourthly, be aware that this Model will, NOT pass the w3c validator for the simple
reason that the menu includes an "alt=" tooltip feature.(with this exception, the code did in fact validate.)
The alt= is a deprecated html tag and is not allowed in the most recent Standards, so if you are a 'purist',
this code isn't for you unless you remove this portion of the function and data structure. Title tags are
included. They are the preferred method to include 'tooltips', but with the large percentage of users still
bound to this proprietary Microsoft feature, I have chosen to allow for it here.

5.) Fifth, the css for the table is embedded in the code, but is easily removed and could be linked to an external stylesheet. I'll leave you to do that. The css for the sample sidebar in the index2.php file is already in a file named sidebar.css.

CODE
//
<?php    // start using php parsin
//
// this is the function which uses the data defined below
//

function make_menu($name,$class, $url,$alt,$title) {

//
// check to see if the div is starting
//
if ($url == "header") {
    $link = '<div><dl><dt class="' . $class .'" >' . $name . '</dt>';
    }
//
//    or else  check to see if the div is ending
//
    else  {if ($url == "footer") {
        $link = '</dl></div>';
        }
//
//        or there must be link information
//
        else{
            $link = '<dd class="' . $class . '"> <a href="' . $url . '" title="' . $title . '" alt="' . $alt . '">' .
$name . '</a>';
            }
        }
/
// return from the function with a string variable for echoing
//
return $link;
}
?> // end this function

<?php // place this code where you want the menu in your html page
/
//    $crlf is used to format the html output. One long line of text which is difficult to read
//
$crlf="\n\r\t";
//
//    call the function once for each entry in the list of links
//    the first call prints the opening div tag and sets a class for the div. specify $url as 'header'
//

echo make_menu("Sidebar Header Here", "sbhead1", "header","","") . $crlf;

//
//    the remaining calls create a link (anchor) tag of another class
//    using variables in this order:($name,$class, $url,$alt,$title)
//
//        $name - displayed button name
//        $class - css class for the link / header
//        $url - h t t p address for the button or defines a header and footer
//        $alt - the contents of the alt tag displayed on mouse over
//        $title - the contents for the title tag displayed on mouse over
//        
//    echo make_menu("displayed button name", "css class for the link / header", "place link here inside quotes","contents of the alt tag","the contents for the title tag") . $crlf;
// each link can have different classes if desired see the Third group of the index2.php example
//
//    Sample data as used for the index2.php file
//
echo make_menu("Google", "link", "http://www.google.com","Google Search","Google Search from here") .
$crlf;
echo make_menu("Yahoo!", "link", "http://www.yahoo.com","Yahoo Search","Yahoo!") . $crlf;
echo make_menu("My Favourite Forum", "link", "http://www.trap17.com","Trap17 Forum","Trap17 Forum") .
$crlf;
//
// call the ending div tag by specifying 'footer' as the variable $url
//
echo make_menu("", "", "footer","","") . $crlf;
?>

<?php
//
// multiple sub-sidebars of different classes can be called within the same div by repeating the function calls
using new data
//
echo make_menu("Second Sidebar", "sbhead2", "header","","") . $crlf;
echo make_menu("Google", "link1", "http://www.google.com","Google it from here","Google it from here") .
$crlf;
echo make_menu("Yahoo!", "link1", "http://www.yahoo.com","Yahoo Search","Yahoo Search") . $crlf;
echo make_menu("Another Great Forum", "link1",
"http://www.astahost.com/info.php/cms101-content-management-system-design_t7778.html","Astahost
Forum","Astahost Forum") . $crlf;
echo make_menu("", "", "footer","","") . $crlf;
?>

<?php
//    
//    or alternate the classes for presentation. This example alternates the background colours for the dd's.
//    All three dl's use different classes in this example, but the css is not defined for them.
//
echo make_menu("Third Sidebar", "sbhead3", "header","","") . $crlf;
echo make_menu("Google", "link", "http://www.google.com","Google it from here","Google it from here") .
$crlf;
echo make_menu("Yahoo!", "link1", "http://www.yahoo.com","Yahoo Search","Yahoo Search") . $crlf;
echo make_menu("Yet Another Forum", "link",
"http://www.astahost.com/info.php/cms101-content-management-system-design_t7778.html","Astahost
Forum","Astahost Forum") . $crlf;
echo make_menu("", "", "footer","","") . $crlf;
?>
//


The primary purpose for making this template available is to provide a learning experience, not to provide
coders with the end product. Admittedly, this Template is very basic and is not meant to be 'cut and pasted'
into a web site, but rather, to be used as a learning tool to provide you with the means to build your site using templating concepts which makes the maintenance of a site easier, and the presentation more consistent across pages. Some html/css knowledge would be required to make changes to the files, but very little.

Just a reminder to make any modifications on a 'copy' of the files so if you alter something critical to the
function of the code, you will have an un-modified version to resume your work from.

Happy coding.

Zip File Contents

For the Basic Template use :
index.php
header.php
menu.php
main.php
footer.php

For the Sidebar Version use :
index2.php
header.php
menu2.php
main.php
footer.php
sidebar.css

Download the sample files here

A sample of the original menu code is available in the file named
menu.php
To build the menu inside a template using php includes as per vujsa's Tutorial:
index.php
To sample an unstyled 'sidebar menu' : menu2.php
To build the Basic Template with the a styled sidebar menu :
index2.php
To alter the css for the index2.php: sidebar.css

Using these files on your Local Computer requires a version of php installed and the files resident in your
"localhost" path. Instructions for the use or installation of php is beyond the scope of this article.
Google on "xammp" or "wamp" to find out more about those two packages.

Download Zip file Here

 

 

 


Comment/Reply (w/o sign-up)