Since originally writing this article, there has been a new Dreamweaver extension released that can build your database-driven CSS drop-down menus for you. It’s CSS Menu Writer 2 from WebAssist. It creates unlimited levels of menu navigation in horizontal or vertical formats. It comes will a bunch of preset styles, so you can either use one out-of-the-box or customize it to meet your needs. Now, back to the article…
This article will demonstrate an easy way to create dynamic CSS-based navigation menus that allow you to change your website navigation sitewide with one simple MySQL database update. For this example, I will be using the Chrome CSS Drop Down Menu available from Dynamic Drive. It’s a free, lightweight CSS menu that is easily customizable and only uses a small amount of JavaScript. There are other free CSS menus available such as the Suckerfish menu and other commercial menu options are available.
This article assumes the reader is somewhat familiar with Dreamweaver, PHP and MySQL. Powering your navigation menu from a database allows you to easily change your website’s navigation menu simply by updating the database fields that make up the Dreamweaver recordset. Building your site navigation using CSS also allows for quick sitewide changes via the stylesheet formatting.
The first step is to implement the CSS menu of your choice. It’s useful to include several mock menu items as you style your menu so you can see how the menu will appear with multiple navigation choices. Once your menu is in place, go back and delete all but the first menu item in the HTML unordered list.
The second step is to create your MySQL database table which will power your menu. Using the MySQL manager of your choice, create a table which includes three fields: a unique auto-numbering ID field, a field which will hold the text displayed by each menu option, and a hyperlink field, which will include the link each menu item follows when clicked. Depending on your site structure, you can use relative or absolute URLs in this field. At this point, insert data into the database table which will populate the site when loaded. For example, in the first table row, you could have the menu text “HOME” and the URL “index.php”.
Next, back to Dreamweaver to set up the dynamic menu. With your page open, establish a connection to the MySQL database and create the menu recordset. Include all database fields and don’t use any filters on the data. Back in the code, find the first menu item that you left in place earlier. Highlight the text between the quotation marks after the href portion of code. Go into your bindings panel and open the recordset you created for the menu. Click and drag the field representing the link URL field into your code where you highlighted the href link. This will create the PHP code to dynamically assign the link for each menu item. Next, highlight the code in your menu item that will display the browser text for each menu item. Grab the corresponding recordset binding and drag it into your code. This will create the required PHP code that will dynamically display each menu item.
The last step in the process is to create the repeating region that will loop for each database table row. Simply highlight all code from the opening to the closing li tags surrounding the menu item. Go to your server behaviors panel in Dreamweaver and select the “Repeated Region” option. Select the correctrecordset for the menu and click the radio button selecting all records. That completes the dynamic menu creation.
After uploading the page to your testing server, you will see each menu item you entered in your database displayed in your menu. The dynamically generated links will all point to the corresponding pages. If you view the page code, you can see it renders a clean list for the menu items. The code is short and simple and very search engine friendly.
For added functionality and the creation of the drop-down menus, simply create a database table that includes the sublinks and include a table field which will hold the parent table ID value. Simply filter by ID for each main menu option, and dynamically generate the submenu the same way you did the main menu. The menu can then be included in a Dreamweaver template for inclusion on every page of your website. When a page is added to the site, simply add the menu item and link in your database and it will appear on every page that includes the navigation menu. It doesn’tget much easier than that to create dynamic database-driven CSS menus.
I recommend checking out CSS Menu Writer 2 for creating your database driven CSS menus with Dreamweaver. Honestly, I don’t know why you’d hand code a menu when you can do it automatically with CSS Menu Writer.