Consider the Database-driven CSS Menu Wizard (it covers the associated Database-driven CSS Menu server behavior) and check out the code generated in an .cfm page. First, click here to see the elements it adds in page.
The code generated in page after configuring the wizard as shown in the user manual is the following one:
Above the opening <html> tag (the code section corresponding to the generated recordset is not pasted below):
<cfinclude template = "includes/cssmenus2/MX_Menu2.inc.cfm">
<cfscript>
//Begin DynCSSMenu1
DynCSSMenu1 = Request.Create_MX_Menu2("MX_Menu2");
DynCSSMenu1.init("DynCSSMenu1");
DynCSSMenu1.setQuery(rsCSSMenu1);
DynCSSMenu1.setPK("id_mnu");
DynCSSMenu1.setFK("idmnu_mnu");
DynCSSMenu1.setNameField("label_mnu");
DynCSSMenu1.setTitleField("tooltip_mnu");
//URL parameters
DynCSSMenu1.setLinkField("url_mnu");
DynCSSMenu1.setTargetField("target_mnu");
//Layout
DynCSSMenu1.highlightCurrent(true);
DynCSSMenu1.setLevel(-1);
DynCSSMenu1.setLayout("horizontal");
DynCSSMenu1.setSkin("modern_blue");
DynCSSMenu1.setShowTimeout(400);
DynCSSMenu1.setHideTimeout(200);
DynCSSMenu1.setExitTimeout(800);
DynCSSMenu1.setSubMenuOffset(0, 1, -10, 5);
DynCSSMenu1.setAnimation("fade");
DynCSSMenu1.setImgReplace(false);
//End DynCSSMenu1
</cfscript>
Inside the <body> section (this code gets selected when you click the Database-driven CSS Menu server behavior in the Server Behaviors tab of the Application panel):
<cfscript>
//Dynamic CSS Menu
WriteOutput(DynCSSMenu1.render());
</cfscript>
Also, after the </title> tag and before the </head> one, another code section is generated. Its role is to include the needed files:
<script src="includes/cssmenus2/js/animation.js" type="text/javascript"></script>
<script src="includes/cssmenus2/js/cssmenus.js" type="text/javascript"></script>
<link href="includes/cssmenus2/skins/modern_blue/horizontal.css" rel="stylesheet" type="text/css" />
Remark how clear the generated code is, and how easy it is to edit the menu even in Code view!