Navigation Usability

  Home arrow Navigation Usability arrow Page 6 - Advanced Bulleted-List Menu
NAVIGATION USABILITY

Advanced Bulleted-List Menu
By: notepad
  • Search For More Articles!
  • Disclaimer
  • Author Terms
  • Rating: 5 stars5 stars5 stars5 stars5 stars / 3
    2005-05-06

    Table of Contents:
  • Advanced Bulleted-List Menu
  • Menu Layout
  • Preserving State Without Cookies
  • Adding CSS
  • Adding JavaScript
  • Drawing Our Menu
  • Conclusion

  •  
     

    SEARCH CODEWALKERS

    TOOLS YOU CAN USE

    advertisement

    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, &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";
    }
    ?>

    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 
    "&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;
    ?>

    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.

    More Navigation Usability Articles
    More By notepad

    blog comments powered by Disqus

    NAVIGATION USABILITY ARTICLES

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

    Developer Shed Affiliates

     



    © 2003-2013 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap