Advanced Bulleted-List Menu - Drawing Our Menu
(Page 6 of 7 )
Alas, we're ready to draw our uber cool menu.
<?php
// recursive function to draw menu
function draw_menu($menu, $preserve, &$id) {
if($id == 0)
echo "<div id=\"$id\">\r\n<ul>\r\n";
else
echo "<div id=\"$id\" style=\"display:none;\">\r\n<ul>\r\n";
$id += 1;
foreach($menu as $key=>$value) {
if(is_array($value)) {
if(@in_array($key, $preserve))
$toggle = $id;
echo "<li><a href=\"#\" onclick=\"toggle($id);\">$key</a></li>\r\n";
draw_menu($value, $preserve, $id);
}
else {
echo "<li class=\"file\">";
if(@in_array($key, $preserve))
echo "<a class=\"live\" href=\"$value\">$key</a>";
else
echo "<a href=\"$value\">$key</a>";
echo "</li>\r\n";
}
}
echo "</ul>\r\n</div>\r\n";
if(isset($toggle))
echo "<script language=\"javascript\">toggle($toggle);</script>\r\n";
}
?> |
The draw_menu function expects three values: an array containing our menu, an array containing the titles we want open when the page loads and an ID for keeping track of things. It's important to note that the ID is passed by reference, meaning that we're working with the original variable rather than making a copy of it. If we didn't pass the ID by reference, the function would get a little confused during recursion and repeat ID's when we don't want it to.
<?php
if($id == 0)
echo "<div id=\"$id\">\r\n<ul>\r\n";
else
echo "<div id=\"$id\" style=\"display:none;\">\r\n<ul>\r\n";
$id += 1;
?> |
Here we are saying that our root div should be visible (so the rest of the menu is visible), and each additional div should start off hidden. We need to insert the style here manually rather than including it with the rest of the stylesheet.
The body of our function should be pretty self-explanatory. We traverse our menu array, inserting ul and li tags where needed, if the value we're working with is another array then we draw that array, and so on. The only other thing really worth noting is the $toggle variable. Whenever we find a key in our $preserve variable, which are the menu items we want open (because that's the page we're viewing), we set the according ID to $toggle and call the JavaScript at the end of each cycle. So our menu technically is drawn completely closed, but then we open it up by toggling the appropriate ID's without the user having to click anything.
Next: Conclusion >>
More Navigation Usability Articles
More By notepad
|
| · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | | |
|
