Navigation Usability
  Home arrow Navigation Usability arrow Page 7 - Advanced Bulleted-List Menu
Codewalker Forums 
  Tutorials  
Database Articles  
Miscellaneous  
Navigation Usability  
PEAR Articles  
Programming Basics  
Server Administration  
XML Tutorials  
  Reviews  
Database Book Reviews  
Linux Book Reviews  
Miscellaneous Reviews  
PHP Book Reviews  
PHP Software Reviews  
Server Admin Reviews  
SQL Tool Reviews  
  Code Gallery  
Content Management Code  
Contest Code  
Counters Code  
Database Code  
Date Time Code  
Discussion Board Code  
Email Code  
File Manipulation Code  
GUI Code  
Link Farm Code  
Miscellaneous Code  
Search Code  
Site Navigation Code  
User Management Code  
Forums Sitemap 
Download TestComplete 
JMSL Numerical Library 
IBM® developerWorks
Weekly Newsletter 
 
Developer Updates  
Free Website Content 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us Get Paid 
Request Media Kit
Contact Us 
Site Map 
Privacy Policy 
Support 
 USERNAME
 
 PASSWORD
 
 
  >>> SIGN UP!  
  Lost Password? 
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

  • Rate this Article: Poor Best 
      ADD THIS ARTICLE TO:
      Del.ici.ous Digg
      Blink Simpy
      Google Spurl
      Y! MyWeb Furl
    Email Me Similar Content When Posted
    Add Developer Shed Article Feed To Your Site
    Email Article To Friend
    Print Version Of Article
    PDF Version Of Article
     
     
    ADVERTISEMENT


    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.

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

    <?php

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

    // alternative method to using cookies
    function array_search_recursive($needle, $haystack) {
        $pos = null;
        $keys = array_keys($haystack);
        while(!$pos && (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, &$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";
    }

    $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);

    ?>

    </body>
    </html>

    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.

       · I receive this error:Parse error: parse error, unexpected...
       · check that the menu array is layed out right using the print_r code. if not,...
       · So, dont laugh me..uhh, how can i define the pages data in the blist_menu.php,...
       · Hey notepad why didn't you put up a working example? I don't mean to be a pain in...
       · How can i modify the link target? can i use "iframe" tag in the...
       · finally i fucked up the target"=main". the right example is a...
       · try maybe escaping some parts of the url like ? etc., that might be the problem I...
       · You're a contract hacker and you make these n00b menues? Lol shame on you!Btw,...
       · just put an ) at the end of the wole array and keep doing that til the error is...
       · if u now put in a link u get a button!!...
       · if u now put in a link u get a button!!...
       · array('Menu One'=>array('Page One'=>'urlinkhere.php', ...
       · Hey,This is a cool tutorial and very useful,but why not let us know how to fetch...
       · Hey,This is a cool tutorial and very useful,but why not let us know how to fetch...
     

    NAVIGATION USABILITY ARTICLES

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





    © 2003-2008 by Developer Shed. All rights reserved. DS Cluster 5 hosted by Hostway
    Stay green...Green IT