I frequently get asked how to create a dynamic CSS menu based on the categories and secondary categories in Cartweaver. First let me briefly explain what I mean by Categories and “Secondary Categories”…  Don’t you mean “subcategories” you may ask. We’ll, Cartweaver doesn’t “force” a relationship between categories and secondary categories. You can assign each to products independently. This creates a far more flexible way of structuring and searching for your products. You can, for example, have “House wares” and “Clothing” as main categories then you can have,  “Men’s” “Woman’s” “Children’s” as Secondary Categories. Having no forced relationship allows you to search on just the category of “Clothing”, or search the category of Clothing and secondary category of Men’s to find men’s clothing products, or just search on the secondary category of Men’s and pull men’s products across all main categories. As you can see, this can be very flexible, but what if you want to have a CSS popup menu that allows you to “drill down” by having categories appear as your menu headings and subcategories appear in your menu popups or fly-outs. Does not forcing a relationship between categories and secondary categories in the database complicate this? Nope. There are a number of methods you could use to create the same functionality as subcategories in order to have the convenience of a drill-down menu.  I’ll give you a simple example, a menu from Project Seven and some very basic CF code and SQL.  

Note: A big thank you to the folks at Project Seven for permission to use their tutorial as a starting point!

To get started, jump over to the Project Seven web site and familiarize yourself with their “CSS Express Drop-Down Menus” tutorial:

http://www.projectseven.com/tutorials/navigation/auto_hide/index.htm

This tutorial will serve as the basis of our dynamic drop-down menu, so if you are going to try this, take a few minutes to read the tutorial and download the accompanying files. This menu and tutorial, like everything Project Seven does is clean, elegant, and well written, so it will serve as a perfect starting point/platform to work from.
Once you’ve downloaded the files, extract the zip file into a new Dreamweaver site. Since we are using ColdFusion and Cartweaver in this example, be sure to place the site in the same root directory as your other ColdFusion and Cartweaver sites.  If you are using PHP or Asp the principles will be the same you’ll just have to make the necessary adjustments in the code and SQL for your server model.

In Dreamweaver, open a new blank page and name it index.html.

By placing the Project Seven files in your local site, following the tutorial and it shouldn’t take long for you to have a local copy of a menu that looks like this:

http://www.projectseven.com/tutorials/navigation/auto_hide/workpage.htm

– Here’s a shortcut if you want to skip ahead a bit. After placing the downloaded files in your site, follow the “work page” link above. Once there, go to “view source” in your browser and copy all the code, then go to the page you just created in Dreamweaver and switch to code view. Now replace ALL the code on the page by pasting the code from your view source.
Make sure the “herf” in the link tag and “src” in the script tag are set up correctly for your local site.

<link href="EDIT-THIS/p7exp.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src=" EDIT-THIS /p7exp.js"></script>

Switch to design view, save the page, and preview it in your browser. You should see the same thing as you did on the Project Seven tutorial work page example. 

Now you’re ready to make the menu dynamic.  It only takes little bit of code and SQL to accomplish, you’ll be surprised how easy it is. 

Save a copy of your index.html page as index.cfm. Now open the page in code view. Looking at the code for the menu you’ll see that the Project Seven menu uses a standard HTML unordered list and does all the design magic with the CSS and JavaScript files you downloaded.  It’s important to note that this PVII menu is a “pure CSS menu” and is fully accessable and easy for search engines to follow. The JavaScript file is only there to get IE5 and IE6 to support "li:hover".  

We will now focus on making this list dynamic and let the PVII files handle the rest! 
First, we will take everything inside the <div id="menuwrapper"> tags and reduce it to this…<div id="menuwrapper">

<!--- Start List --->
   <ul id="p7menubar">
    <!--- Top Level --->
     <li><a class="trigger" href="#">Trigger One</a>
      <!--- Flyout Menu --->
      <ul>
        <li><a href="#">Sub 1.1</a></li>
      </ul>
    </li>
  </ul>
<!--- End Menu --->
<br class="clearit">
</div>

Now we will create a query that pulls all the Categories.

<cfquery name="getSubCategories"
     datasource="YourDSN"
     username="YourDSNPassword"
     password="YourDSNUsername">
    SELECT *
     FROM  TheCategoriesTable
</cfquery>

Note: The table and field names have been changed, for obvious security reasons.

Now that we have the query results, we can loop through and output the categories.  Like this:

<div id="menuwrapper">
   <ul id="p7menubar">
     <cfoutput query="getCategories">
       <li><a class="trigger" href="#">#getSubCategories.scndctgry_Name#</a>
        <ul>
          <li><a href="#">Sub 1.1</a></li>
       </ul>
      </li>
    </cfoutput>
  </ul>
<br class="clearit">
</div>

This gives us our basic framework, a CSS menu with the top level being populated by our categories. In my next post I’ll show you how to populate the secondary or “subcategory” fly out menus.