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