cvboucher
Posts: 191
|
| Posted: 10/04/2013, 12:12 PM |
|
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 and I'm generating a horizontal menu. If yours is named 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 added 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="{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>
HTH,
Craig
|
