CFWebstore® now comes with a number of options for building your store menus. The old-style menus using a custom tag to create text or image-based menus, and a new menu-building set of functions ideal for cascading DHTML menus.
The menus are generally broken into 2 sections – the category menu and the page menu. The category menu is created from the categories you set up for your store, which would have your products, feature articles, etc. The page menu is all the stand-alone pages for store functions like the shopping cart, search, user account, etc. as well as any additional store content pages. You can use the Pages & Menus section to create a similar cascading menu for pages as you can for categories.
An example of using the old style menus can be found in the put_sidemenus.cfm page in the layouts directory. These menus are created by the menu component in the cfcs/layout directory. You have a variety of arguments you can send into the component to set things like style class, orientation, image versus text menus. You can also modify the component to do a recursive call, to create submenus (typically done for categories). By default this page stores the created menu into session memory to improve performance. This will be updated when the user logs in or out of the system. This can be changed if you use menus that change from page to page for a user. See the category menus and page sections above for more information on the various attributes you can use with these methods.
A method of doing more complex, DHTML-based menus is demonstrated in the do_dhtml_menus.cfm page (used with the lay_menus.cfm layout file). These menus use a new function in CFWebstore® which takes your categories and/or pages and outputs them into XML. You can then use that XML to create any type of menu, be it CSS-based, javascript, or even Flash. The store comes with code that will recursively parse the XML and create a nested list from it which can then be used for a CSS/DHTML menu. Let’s take a closer look at how this is done and how you can customize it for your own needs.
The first line of code in do_dhtml_menus.cfm includes the menufunc.cfm file. This includes the two functions that will take our XML category tree and create the nested list from it. The next lines are used to print out the menu javascript file and the desired style sheets to the header of the page. For the example, we are using a style sheet for a vertical category menu, and a horizontal Office-style css for the page menu. The file do_catmenu.cfm contains the code for creating the category menu. The doCatMenu function is where you can customize the html that gets output for the nested list for whatever menu you are using. Define the code used for the start and end of the menu, start and end of submenus, and for menu items. Make sure the styles match the ones used in the style sheet you are using. You can also customize the call to the XML function at the bottom of this page to use a different starting point for the menu, and specify the number of levels.
The last two lines of the file are what build the menu. The first line calls the function that builds the XML tree from your categories. The second line passes this XML and the doCatMenu function that you have customized into the recursive menu building methods. The resulting html gets saved into the ‘CatMenu’ variable which you can then output to your layout page. The example code saves it into a Session variable so these functions only need to run once per user.
The Page menu function works pretty much the same way. The do_pagemenu.cfm has the doPageMenu function which you can customize with the desired styles and/or html you wish to use for your menu.
CFWebstore® comes with some example styles, found in the includes/hiermenu directory. These have been graciously provided by Massimo Foti and can be also seen at http://www.massimocorner.com. Please note that these are designed to work for only 3 levels of categories/pages. If you decide to use these on your site, please drop by Massimo’s site and send him a donation for his excellent work.
A good tutorial on doing CSS-based menus can be found at HTML Dog:
One important note on menus. If you make any changes to the menus.cfc file, be aware that this component is normally stored in application memory. To have your changes show up, you will need to use the Reset Cache option on the admin menu.