Privacy Policy
Support

USERNAME

PASSWORD

>>> SIGN UP!

Lost Password?

NAVIGATION USABILITY

RSS

Advanced Bulleted-List Menu

By: notepad	Search For More Articles! Disclaimer Author Terms
Rating: / 3
2005-05-06

Table of Contents:

Advanced Bulleted-List Menu

Menu Layout

Preserving State Without Cookies

SEARCH CODEWALKERS

TOOLS YOU CAN USE

Advanced Bulleted-List Menu - Conclusion

(Page 7 of 7 )

Booya; nice looking portable menus with very little setup effort. The final code should be assembled as seen below, just include it in your template, change the styles to match your site, and you're all set.

&lt;html&gt;
&lt;head&gt;
&lt;title&gt;advanced bulleted-list menu&lt;/title&gt;
&lt;link rel="stylesheet" title="default" href="style.css" /&gt;
&lt;script type="text/javascript"&gt;
&lt;!--
function toggle(id) {
  if(document.getElementById) {
    var el = document.getElementById(id);
    el.style.display = (el.style.display == 'none') ? 'block' : 'none';
  }
}
//--&gt;
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;?php

// menu title =&gt; menu target
$menu = array('Menu One'=&gt;array('Page One'=&gt;'blist_menu.php?pg=1',
                  'Page Two'=&gt;'blist_menu.php?pg=2'),
              'Menu Two'=&gt;array('Page Three'=&gt;'blist_menu.php?pg=3',
                  'Page Four'=&gt;'blist_menu.php?pg=4'),
              'Menu Three'=&gt;array('Page Five'=&gt;'blist_menu.php?pg=5',
                  'Menu Four'=&gt;array('Page Six'=&gt;'blist_menu.php?pg=6',
                      'Page Seven'=&gt;'blist_menu.php?pg=7')));

// alternative method to using cookies
function array_search_recursive($needle, $haystack) {
    $pos = null;
    $keys = array_keys($haystack);
    while(!$pos &amp;&amp; (list($garbage, $value)=each($keys))) {
        if(is_scalar($haystack[$value])) {
            if($haystack[$value] === $needle)
                $pos[] = $value;
        } elseif(is_array($haystack[$value])) {
            if($pos = array_search_recursive($needle, $haystack[$value]))
                array_unshift($pos, $value);
        }
    }
    return $pos;
}

// recursive function to draw menu
function draw_menu($menu, $preserve, &amp;$id) {
    if($id == 0)
        echo "&lt;div id=\"$id\"&gt;\r\n&lt;ul&gt;\r\n";
    else
        echo "&lt;div id=\"$id\" style=\"display:none;\"&gt;\r\n&lt;ul&gt;\r\n";
    $id += 1;

    foreach($menu as $key=&gt;$value) {
        if(is_array($value)) {
            if(@in_array($key, $preserve))
                $toggle = $id;
            echo "&lt;li&gt;&lt;a href=\"#\" onclick=\"toggle($id);\"&gt;$key&lt;/a&gt;&lt;/li&gt;\r\n";
            draw_menu($value, $preserve, $id);
        }
        else {
            echo "&lt;li class=\"file\"&gt;";
            if(@in_array($key, $preserve))
                echo "&lt;a class=\"live\" href=\"$value\"&gt;$key&lt;/a&gt;";
            else
                echo "&lt;a href=\"$value\"&gt;$key&lt;/a&gt;";
            echo "&lt;/li&gt;\r\n";
        }
    }
    echo "&lt;/ul&gt;\r\n&lt;/div&gt;\r\n";
    if(isset($toggle))
        echo "&lt;script language=\"javascript\"&gt;toggle($toggle);&lt;/script&gt;\r\n";
}

$id = 0;
$base = basename($_SERVER['PHP_SELF']);
$self = isset($_SERVER['QUERY_STRING']) ? $base.'?'.$_SERVER['QUERY_STRING'] : $base;
$preserve = array_search_recursive($self, $menu);
draw_menu($menu, $preserve, $id);

?&gt;

&lt;/body&gt;
&lt;/html&gt;

About the Author

Hi, I'm notepad.

DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.

blog comments powered by Disqus

NAVIGATION USABILITY ARTICLES

- Advanced Bulleted-List Menu
- Using Multiple Pages for Navigation

Find More Navigation Usability Articles