Navigation Usability

  Home arrow Navigation Usability arrow Page 2 - 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 - Menu Layout


    (Page 2 of 7 )

    The first thing we want to do is layout our menu in a way that is easy to change. I've decided to use a multi-dimensional array for this, and it should be easy to follow considering that an array is laid out just like a bulleted-list.

    The array's structure is as follows: Menu Title => Menu Target.

    If we want the "target" to be a sub-menu, then the target will simply be another array which follows the same structure, and so on...

    <?php
    // associative array of menu items
    // menu title => 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')));
    ?>

    If you want to make sure your menu is laid out right, print_r can be used to display the entire array in a nice, easily readable format.

    <?php
      
    echo "&lt;pre&gt;";
      
    print_r($menu);
      echo 
    "&lt;/pre&gt;";
    ?>

    I saved my menu code in a file called "blist_menu.php" and you can see my script references itself in the "target" sections. Your menu doesn't have to link back to itself, but I do it here because it's easier to read and test. Your menu targets can go anywhere you want them to go, otherwise we'd have a pretty crappy menu wouldn't we?

    CAUTION: It is important to note that each menu title and target should have a unique name in order for the "preserve" functionality to work, which we'll discuss next. This should not be a problem in the majority of cases; however, for you code-happy monkeys that want to tweak this menu to list entire directory structures, it might be a problem.

    More Navigation Usability Articles
    More By notepad

    blog comments powered by Disqus

    NAVIGATION USABILITY ARTICLES

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


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