A dynamically generated fly-out menu
If a 'fly-out' navigation menu is what you're after for your web site, than you almost certainly will have come across those carefully styled and crafted menus as coded by Stu Nicholls and available under copyright from his CSS play web site. The multi-level menu used for this site is a derivative of his 'revised and simplified' fly-out menu. A simple twist to this menu as used here is its server-side dynamic architecture as encoded by a PHP script. A simple feed file provides this script with a link title and a corresponding link to a file name and will generate a fly-out menu, well, uhm, 'on the fly'. The script can accomodate many levels of navigation. Note that the $l variable holds the depth of the (sub)menu and can be used for level-specific styling.
<?php
/***********************************************
File name: css_menu.php
Version: 2.00
** Copyright **
HTML and CSS by Stu Nicholls - www.cssplay.co.uk
PHP by Sjaak van der Sar - www.skylla.co.uk
************************************************/
include('menu_fodder.php'); // include the menu feed file
$l = 0; //initiate depth of array (=sub menu level), start at zero
function generateMenu($href) {
global $l; //include $l in function
$tab = str_repeat("\t", $l); //indent HTML with tabs depending on depth of menu,
echo "$tab<ul>\n";
foreach ($href as $title => $href) { //cycle through array
if (!is_array($href)) { //shall we generate a sub menu?
echo "$tab<li><a href=\"$href\">$title</a></li>\n"; //no sub menu neccesary
} else { //make a sub menu
echo "$tab<li class=\"sub\"><a href=\"#nogo\">$title<!--[if IE 7]><!--></a><!--<![endif]-->\n$tab<!--[if lte IE 6]><table><tr><td><![endif]-->\n";
$l++; //deeper into the menu
generateMenu($href, $l); //repeat the function to generate a sub menu
$l--; //...and back up again
echo "$tab</li>\n";
} //end else
} //end foreach
echo "$tab</ul>\n";
if ($l > 0) { echo "$tab<!--[if lte IE 6]></td></tr></table></a><![endif]-->\n"; }
}
generateMenu($menuFodder);
?>
Whereas the CSS can be found at CSSplay the feed file for the fly-out menu should look something like this:
<?php
/***********************************************
File name: menu_fodder.php
Version: 2.0
** Copyright **
HTML and CSS by Stu Nicholls - www.cssplay.co.uk
PHP by Sjaak van der Sar - www.skylla.co.uk
************************************************/
$menuFodder = array(
'Home' => 'home.php',
'Title 1' => array(
'Title 1.a' => array(
'Title 1.a.a' => 'link1aa.php',
'Title 1.a.b' => 'link1ab.php'),
'Title 1.b' => array(
'Title 1.b.a' => 'link1ba.php',
'Title 1.b.b' => 'link1bb.php',
'Title 1.b.c' => 'link1bc.php'),
'Title 1.c' => 'link1c.php'),
'Title 2' => 'link2.php',
'Title 3' => 'link3.php',
'Title 4' => 'link4.php');
?>
Published on 08.06.2006 by Sjaak van der Sar – Leave critique or other comments
Paamayim Nekudotayim spells 'trouble'!
Parse error: syntax error, unexpected ')', expecting T_PAAMAYIM_NEKUDOTAYIM in ...
Seemingly Hebrew, possibly meaning 'Unexpected double-colon'. Happened when a variable had its $ missing in a 'foreach loop'.
Published on 02.04.2007 by Sjaak van der Sar – Leave critique or other comments
