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:
