How to replace the default DNN menu with a MenuBox?

The MenuBox works in both ways - as regular a DotNetNuke module, which you can add to any content pane on any page, and as a Skin Object.

Before using the MenuBox in any of two ways, you should install it to your portal. Installation procedure is pretty straightforward and well-know to any DotNetNuke user. Just install the module as any other DotNetNuke module. If you have troubles, check our video tutorial how to install the module.

1. Using MenuBox as a Skin Object

Using Menu Box as a Skin Object is very similar to the default DNN menu. So, let's look through all steps you should to do to set it up.

1. Install the Menu Box module
2. Open a skin file you would like to add the menu to. Let's add the new menu to MinimalExtropy skin - index 1024.ascx. You can find this file in {DNN Installation}/Portals/_default/Skins/MinimalExtropy/index 1024.ascx

3. You may notice Register directive list at the very top of the file. That how controls are registered on the page. You can see Nav.ascx registration among others:

   <%@ Register TagPrefix="dnn" TagName="NAV" Src="~/Admin/Skins/Nav.ascx" %>

   This is a default menu control. It's used in this file below as

   <div class="menu_style">
       <dnn:NAV runat="server" id="dnnNAV"  ProviderName="DNNMenuNavigationProvider" 
       	IndicateChildren="false" ControlOrientation="Horizontal" CSSControl="mainMenu" 
       />
   </div>    				
   

   
   So, it tells DNN to add navigation to div.menu_style. All we need is to change the old control to a new one.

4. Register a MenuBox skin object control at the top of the file as others.

   <%@ Register TagPrefix="cs" TagName="MENUBOX" 
   			src="~/DesktopModules/CodingStaff.MenuBox/MenuBoxSkinObject.ascx" %>

5. Use the MenuBox control instead of dnn:NAV
   

   <div class="menu_style">
   	<cs:MENUBOX runat="server" id="menuBox" SkinId="ThemeFolder" />
   </div>

   SkinId attribute defines a theme you would like to use. Let's add SkinId="SuperFishMenuHorizontal", it is one of 2 out-of-the-box themes which is included into the module. Save the file and open the portal to make sure that everything works correctly.

2. Using custom theme with the MenuBox Skin Object

As you probably know, the main idea behind the module is that you can create own themes easily by using Menu Factory service or completely customized on your own.

To install a new theme, add the module to any page (or better create a new one under the Admin Section and name it MenuBox) and click Manage Menu Themes. You will see a list of available themes. To instal a new one click "Import a new theme", browse a file with your theme and click import. The theme should appear in the list. (More information on installation see in our video tutorial.)

Also the newly installed theme will appear under ~/DesktopModules/CodingStaff.MenuBox/Skins/{SKIN ID}, where the skin id is a unique identifier of the theme.

To use the new theme, change SkinId attribute value in MenuBox Skin Object control. If, for example, we installed a theme with "menuabc" skin id, then we will see a folder with the same name and we should change SkinId to "menuabc" as

<cs:MENUBOX runat="server" id="menuBox" SkinId="menuabc" />

2 pictures below illustrate what skin id is: