Creating a Multilayer Drop-Down Menu

dangtruong

Author lv1 (3200/5000)

4,865 views

No comments

(6 votes, average: 4.33 out of 5)

When creating a website, navigation is always a problem. On a large complicated website, it can become a burden. Sometimes, having hierarchical drop-down menus can make this easier, allowing for a small amount of space on the screen to be used (the initial menu) to present a complicated menu system.

This can be accomplished through the use of JavaScript, XHTML, and CSS. PHP makes the task easier because it can be configured within PHP, and then PHP can automatically generate the code needed.This tutorial ends up creating a function that you can call, passing it a number of configuration parameters, and it creates a menu system for you. It is designed to work in most modern browsers and can be called multiple times on the same web page. Note that it uses both JavaScript and CSS to create the effect; although pure CSS methods exist for creating a menu such as this, they do not work in many browsers as of the creation of this book. Therefore that exercise is left up to the reader.

[source:php]

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title>Menu System</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
</head>
<body>
<?php
// We need a container function that will create and output all parts to our
// menuing system. It accepts an array for the menu, x/y coordinates for
// where it should appear, a width for each menu (to make them look more
// uniform), various colors, and a character ‘index’ for this menu. It can
// be left off if you are only making one menu system on a page, give it a
// different character if you are making a second system.
function create_full_menu_system($menuarray, $x, $y, $width,
$fgcolor, $bgcolor, $txtcolor, $bordercolor, $idx = ‘a’) {
// First use create_menu to create the XHTML, and to give us
// a list of all menus such created, we need them.
$xhtml = ”;
$menus = array();
create_menu($menuarray, $xhtml, $menus, $idx, $idx);

// Now, before we output the xhtml, prepare the list of menus:
$menulist = implode(’,', $menus);

// Now, output the CSS that we need custom to this menu system:
echo ”
<style type=\”text/css\”>
#menu{$idx} {
visibility: visible;
padding: 0px;
}
.menu_{$idx} {
position: absolute;
top: {$x}px;
left: {$y}px;
visibility: hidden;
border-top: 3px solid {$bordercolor};
padding: 0px 0px 0px 8px;
}
.menu_{$idx} ul {
list-style-type: none;
padding: 0px;
margin: 0px;
border-right: 1px solid {$bordercolor};
border-bottom: 1px solid {$bordercolor};
border-left: 1px solid {$bordercolor};
}
.menu_{$idx} li {
border: 1px solid {$bordercolor};
}
.menu_{$idx} a {
width: {$width}px;
display: block;
background-color: {$bgcolor};
text-align: right;
text-decoration: none;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
color: {$txtcolor};
padding: 2px;
margin: 0px;
}
.menu_{$idx} a:hover {
background-color: {$fgcolor};
}
</style>
“;

// Now create the javascript needed to run this menu:
echo ”
<script type=\”text/javascript\”>
function display_menu_{$idx}(main, submenu, line) {
// First force all current menus to disappear except parents:
remove_menus_{$idx}(’menu’ + main);

// Make the appropriate submenu appear
// Find the containing block of the parent:
var pblock = document.getElementById(’menu’ + main);

// Get the Y of the new div
var y = line.offsetTop + pblock.offsetTop + 12;

// Figure out the X of the new div:
var x = pblock.offsetLeft + pblock.offsetWidth;

// Now display it, and move it into position:
var newblock = document.getElementById(’menu’ + main + submenu);
newblock.style.top = y + ‘px’;
newblock.style.left = x + ‘px’;
newblock.style.visibility = ‘visible’;

// Now also clear the timeout like any other mouseover does:
on_over_{$idx}();
}

// Create an array holding all submenus:
document.submenus_{$idx} = new Array({$menulist});
// Now a function, that by brute force, makes all submenus invisible
// Has an optional parameter used by submenus, to ensure that their
// parents do not get closed. Set it to ” to remove ALL.
function remove_menus_{$idx}(except) {
for (i = 0; i < document.submenus_{$idx}.length; i++) {
// Only close this submenu if it doesn’t match the ‘except’ menu
if (document.submenus_{$idx}[i] !=
except.substr(0,document.submenus_{$idx}[i].length)) {
document.getElementById(document.submenus_{$idx}[i]
).style.visibility = ‘hidden’; }
}
}

function on_out_{$idx}() {
// Upon leaving a submenu, start a timer to clear it.
document.menutimer_{$idx} =
window.setTimeout(\”remove_menus_{$idx}(”)\”, 1000);
}

function on_over_{$idx}() {
// When on a submenu, make sure the timer is gone.
window.clearTimeout(document.menutimer_{$idx});
}

function on_over_clear_{$idx}() {
// When on a primary menu’s option without a submenu, clear subs
remove_menus_{$idx}(”);
on_over_{$idx}();
}
</script>
“;

// Now, finally, we can output the XHTML code:
echo $xhtml;
}

// Now, we need a function that can be called recursively, that will
// loop through this array, creating the XHTML for it.
function create_menu($m, &$xhtml, &$menus, $subtext = ‘a’, $top = ‘a’) {
// Prep the first character of subtext, we need it for the functions
$idx = $subtext{0};

// Determine if this menu should kill itself upon mouseout:
$mousediv = ” onmouseout=\”on_out_{$idx}()\”
onmouseover=\”on_over_{$idx}()\”";
$mitem = ”;
if ($subtext !== $top) {
$mitem = ” onmouseover=\”on_over_{$idx}()\”";
} else {
$mitem = ” onmouseover=\”on_over_clear_{$idx}()\”";
}

// Start creating a container for this menu:
$xhtml .= ”
<div id=\”menu{$subtext}\” class=\”menu_{$idx}\”{$mousediv}>
<ul id=\”list{$subtext}\”>
“;

// Loop through all members of the array, outputting the menu
$subs = array();
$counter = ‘a’;
foreach ($m as $name => $val) {
// If this is an array:
if (is_array($val)) {
// Push the submenu into the subs array with the counter
$subs[$counter] = $val;

// Output the line:
$xhtml .= ”
<li><a href=\”javascript:void(0)\”
onmouseover=\”display_menu_{$idx}(’{$subtext}’,'{$counter}’,this)\”
>{$name} >></a></li>
“;
// Increment the counter:
$counter++;
} else {
// This is a URL, make a link:
$xhtml .= “<li><a href=\”{$val}\”{$mitem}>{$name}</a></li>\n”;
}
}

// Now finish the division:
$xhtml .= “</ul></div>\n”;

// Now recursively call this on every submenu:
foreach ($subs as $stext => $submenu) {
// First, quickly save a copy of the menuname:
$menus[] = “‘menu{$subtext}{$stext}’”;
// Now call the function:
create_menu($submenu, $xhtml, $menus, $subtext . $stext, $top);
}
}

// Declare our menu system as an array with subarrays for submenus:
$menu = array(
‘Useful Sites’ => array(
‘Search Engines’ => array(
‘Google’ => ‘http://google.com/’,
‘Yahoo’ => ‘http://yahoo.com/’
),
‘Web Browsers’ => array(
‘Mozilla’ => ‘http://mozilla.org/’,
‘Opera’ => ‘http://opera.com/’
)
),
‘News’ => array(
‘BBC’ => ‘http://news.bbc.co.uk/’,
‘Washington Post’ => ‘http://washingtonpost.com/’,
‘New York Times’ => ‘http://nytimes.com/’,
‘Slashdot’ => ‘http://slashdot.org/’
),
‘Home’ => ‘http://eliw.com/’
);

// And create a second menu as well:
$menu2 = array(
‘Not Much’ => array(
‘To See’ => array(
‘Here’ => array(
‘Really!’ => ‘http://php.net/’
)
)
),
‘Home’ => ‘http://eliw.com/’
);

// Call it:
create_full_menu_system($menu, 5, 5, 120,
‘#00CCFF’, ‘#CCCCCC’, ‘blue’, ‘black’);
create_full_menu_system($menu2, 150, 250, 80,
‘black’, ‘#CC0000′, ‘white’, ‘#660000′, ‘b’);
?>
</body>
</html>
[/source]

The heart of this program is the fact that PHP generates the JavaScript and CSS custom to the menu at hand. This allows for a generic function that can be called multiple times on the same web page. All menus, css, and so on are indexed by a series of characters automatically created and updated for each menu. This is a base setup that generates one particular style of menus, a vertical navigation bar meant to be used on the left side of a website. Slight changes could allow this to be manipulated into any form needed.

9Tutorials to your Inbox

Creating a Multilayer Drop-Down Menu

Friends' Sites

Contact Us

Categories

Featured Links

No comments

Post a Comment »

Comment Guidelines