Create a dynamic two levels PHP menu

The creation of a dynamic nested unordered list without using any JavaScript code is sometimes a problem because the script needs to “remember” the values, sub values and also the query string from previous clicked links. In this tutorial I will explain how to create a dynamic navigation menu powered by PHP and MySQL only. While using standard HTML elements (unordered lists) it’s easy to add different CSS styles later. Follow this link for a demonstration example or download the PHP example files here.

First I need a database source holding the information for our navigation menu:

Use PHP to create the HTML from your MySQL data

Next I have to add some data for our menu: menu items and sub-menu items.
Example: The menu item “Products” will have several sub-menu items and the record id is a “2”
All sub-menu items need the number “2” as value for the parent_id. The parent_id for each main menu item is a “0” (zero).

In following code block I’m create a database result and put the value into two multi-dimensional arrays: $parent_menu and $sub_menu

The $parent_menu array is holding the label, the link (URL) and a count value that I need to decide if there is a sub-item or not. The $sub_menu is holding the label and link values and the value of the parent_id.

I “loop” through the database record set for records where the parent_id is a “0” or not. If the value equal to “0” it’s a parent record and otherwise it’s a sub-item record.

Put all the PHP code into a single function

For the creation of the whole navigation bar I place the whole code into a custom function, this way it’s more portable and I can accesses the code several times in one script without to repeat the code.

The arguments of the function are the both arrays, the name of the query string value that’s used to fold out the menu, the two ids used to identify the unordered lists with the CSS style and an extra name for some CSS pseudo class to give a main link element with sub-items a different look. A nested unordered list is a list with list items (“li” elements) and several other lists (“ul” elements). A main can hold another lists or new “ul” elements.
To do this I start in my function with a “ul” element, to identify the element with CSS we add some id attribute here.

Inside the loop there is a test for the count value from parent items, if the count is not null the menu item query string value is added.

A PHP function which is used to maintain the query string

Now the real code begins with this test for a request value send via the link from a parent menu item a new loop is opened to create a list with sub-items related to the parent item. Inside the statement the function “rebuild_link: is called, this function is used to handle the query string:

The arguments for this function are the link from the array, the variable name and value from the parent menu item (to keep the list open). Inside the function the query string will be exploded and is getting rebuilt without becoming in trouble with existing parts or new variables. At the end, the function will return a modified link with all parts of the query string.

Example menu usage

How to use this function? It’s easy just echo the function name like here:

Don’t forget to try the PHP menu demo for a better understanding.