Navigation Usability

  Home arrow Navigation Usability arrow 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


    (Page 1 of 7 )

    Explore drawing dynamic navigation menus using PHP, CSS and JavaScript. This tutorial teaches you how to generate an easily modifiably bulleted-list that is fully collapsible and preserves state between pages.

    In today's lesson, we're going to explore using PHP to dynamically draw your site's navigation menu. Personally, I feel as though the menu is one, if not "the most" important part of a website's design. The easiest way to create a semi-decent looking menu is using the HTML tags ul (un-ordered list), and li (list item) to form a bulleted-list.

    We're going to generate an easily modifiable bulleted-list on-the-fly, and then spice it up and make it fully collapsible with a little JavaScript and CSS. Our menu will also be able to preserve its state between pages, without using cookies!

    In other words, we're going to turn the boring image seen below on the left, into the exciting image seen below on the right:

    Are we ready?

    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