Using Menu Builder with Designs
I like using table (Data Source) generated menus in my CCS apps but they don’t work when using Artisteer designs. So I’ve come up with a workaround so the CCS menu builder control will display properly with Artisteer designs. I’m using the ASP.Net VB InMotion templates and don’t know if it will work with any other templates. Also, my menu control was named Menu1. If yours is name something else change it in the following steps.
1. Create an includable page and use the Menu Builder to create your menu. In the menu builder wizard at the Style step, select Use styles from Design.
2. Switch to HTML view and comment out all of the generated script tags. I add a “<!–” to the first line of the file and a “–>” just before <!–BEGIN Menu Menu1 –> (without quotes).
3. Add the following JavaScript after the comment but before the control starts.
<script src="/dnn/Portals/9/{page:pathToRoot}js/jquery/jquery.js" type="text/javascript"></script>
<script>
$().ready(function() {
//Remove extra surrounding elements so db generated menu will work.
$("div[id$='Menu1']").find('.art-hmenu').unwrap().unwrap();
//Remove the old responsive menu or you will get two responsive menus on devices (one of them empty).
$("a.art-menu-btn:first").remove();
//Remove the extra "active" classes or else all of the menu items show as active.
$("ul.art-hmenu").find("li").not(".active").find("a").removeClass("active");
});
</script>
4. Add the following HTML tag between <!– BEGIN Menu Menu1 –> and <!– BEGIN Item –>:
<ul class=”art-hmenu”>
5. Add the following HTML tag between <!– END Item –> and <!– END Menu Menu1 –>:
</ul>
Below is the entire HTML file
<!--
<script language="JavaScript" type="text/javascript">
//Begin CCS script
//Include Common JSFunctions @1-65835CB2
</script>
<script src="/dnn/Portals/9/ClientI18N.aspx?file=globalize.js&locale={res:CCS_LocaleID}" type="text/javascript" charset="windows-1252"></script>
<script type="text/javascript">
//End Include Common JSFunctions
//Include User Scripts @1-A6D16B54
</script>
<script src="/dnn/Portals/9/{page:pathToRoot}js/jquery/jquery.js" type="text/javascript"></script>
<script src="/dnn/Portals/9/{page:pathToRoot}js/jquery/event-manager.js" type="text/javascript"></script>
<script src="/dnn/Portals/9/{page:pathToRoot}js/jquery/selectors.js" type="text/javascript"></script>
<script src="/dnn/Portals/9/{page:pathToRoot}js/jquery/menu/ccs-menu.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="{page:pathToRoot}Styles/adx.css">
<link rel="stylesheet" type="text/css" href="{page:pathToRoot}Styles/None/Menu.css">
<script type="text/javascript">
//End Include User Scripts
//Common Script Start @1-8BFA436B
jQuery(function ($) {
var features = { };
var actions = { };
var params = { };
//End Common Script Start
//Plugin Calls @1-157DF984
$('*:ccsControl(main_menu, Menu1Container)').ccsBind(function() {
this.ccsMenu();
});
//End Plugin Calls
//Common Script End @1-562554DE
});
//End Common Script End
//End CCS script
</script>
-->
<script src="/dnn/Portals/9/{page:pathToRoot}js/jquery/jquery.js" type="text/javascript"></script>
<script>
$().ready(function() {
//Remove extra surrounding elements so db generated menu will work.
$("div[id$='Menu1']").find('.art-hmenu').unwrap().unwrap();
//Remove the old responsive menu or you will get two responsive menus on devices (one of them empty).
$("a.art-menu-btn:first").remove();
//Remove the extra "active" classes or else all of the menu items show as active.
$("ul.art-hmenu").find("li").not(".active").find("a").removeClass("active");
});
</script>
<!-- BEGIN Menu Menu1 -->
<ul class="art-hmenu">
<!-- BEGIN Item -->
<!-- BEGIN OpenLevel -->
<ul class="level{Menu1:Item_Level}">
<!-- END OpenLevel -->
<li><a href="{ItemLink_Src}" class="{Menu1:Submenu}" target="{Menu1:Target}" title="{Menu1:Title}">{ItemLink}</a>
<!-- BEGIN CloseItem --></li>
<!-- END CloseItem -->
<!-- BEGIN CloseLevel -->
</ul>
</li>
<!-- END CloseLevel --><!-- END Item -->
</ul>
<!-- END Menu Menu1 --></li>
