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.
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.