Horizontal Menu default version

Horizontal

  1. Edit all theme's masterpages in use (.master files)
  2. Locate the menu script
  3. Replace code as shown on the right

 

You will need to set the Style value to default. The menu orientation is automatically detected depending on whether you target #MenuH or #MenuV. 

        <dnn:MENU1 runat="server" ID="BindMENU1" MenuStyle="BindMENU">
        <ClientOptions>
        <dnn:ClientString Name="Style" Value="Default" />
        </ClientOptions>
        </dnn:MENU1>

Vertical Menu accordion

  1. Edit all theme's masterpages in use (.master files)
  2. Locate the menu script
  3. Replace code as shown on the right

You will need to set the Style value to Accordion. The menu orientation is automatically detected depending on whether you target #MenuH or #MenuV. 

        <dnn:MENU2 runat="server" ID="BindMENU2" MenuStyle="BindMENU">
        <ClientOptions>
        <dnn:ClientString Name="Style" Value="Accordion" />
        </ClientOptions>
        </dnn:MENU2>

Mega Menu for structured submenus

Our megamenus were design to provide you the best navigation experience.
They will automatically display a megamenu structure when nested sub items are present, or a regular drop-down sub-navigation, when only one sub level is present.

Horizontal

  1. Edit all theme's masterpages in use (.master files)
  2. Locate the menu script
  3. Replace code as shown on the right

 

You will need to set the Style value to MegaMenu. 

        <dnn:MENU1 runat="server" ID="BindMENU1" MenuStyle="BindMENU">
        <ClientOptions>
        <dnn:ClientString Name="Style" Value="MegaMenu" />
        </ClientOptions>
        </dnn:MENU1>

 

For horizontal Mega menus with lots of items, you might be interested in set a maximum allowed columns MaxColumns. Instead of having a single menu row, your items can be organized in several rows as needed. 

        <dnn:MENU2 runat="server" ID="BindMENU2" MenuStyle="BindMENU">
        <ClientOptions>
        <dnn:ClientString Name="Style" Value="MegaMenu" />
        <dnn:ClientString Name="MaxCols" Value="2" />
        </ClientOptions>
        </dnn:MENU2>

 

Optionally, you can set the minimum and maximum width for your submenu items (in pixels). Use MinWidth and MaxWidth as follows. 

        <dnn:MENU1 runat="server" ID="BindMENU1" MenuStyle="BindMENU">
        <ClientOptions>
        <dnn:ClientString Name="Style" Value="MegaMenu" />
        <dnn:ClientString Name="MaxCols" Value="2" />
        <dnn:ClientString Name="MinWidth" Value="140" />
        <dnn:ClientString Name="MaxWidth" Value="140" />
        </ClientOptions>
        </dnn:MENU1>

Animations completely customizable

Horizontal

  1. Edit all theme's masterpages in use (.master files)
  2. Locate the menu script
  3. Replace code as shown on the right

With the animation properties Type, Speed and Appear you can completely control your fade in effects. 

        <dnn:MENU1 runat="server" ID="BindMENU1" MenuStyle="BindMENU">
        <ClientOptions>
        <dnn:ClientString Name="Type" Value="easeout" />
        <dnn:ClientString Name="Speed" Value="slow" />
        <dnn:ClientString Name="Appear" Value="bottom" />
        </ClientOptions>
        </dnn:MENU1>

Collapse phone or tablet

Horizontal

  1. Edit all theme's masterpages in use (.master files)
  2. Locate the menu script
  3. Replace code as shown on the right

With the collapse property, you can set when the menu collapse happens. 

        <dnn:MENU1 runat="server" ID="BindMENU1" MenuStyle="BindMENU">
        <ClientOptions>
        <dnn:ClientString Name="Collapse" Value="tablet" />
        </ClientOptions>
        </dnn:MENU1>

Offcanvas dynamic and convenient

Vertical

  1. Edit all theme's masterpages in use (.master files)
  2. Locate the menu script
  3. Replace code as shown on the right

You will need to set the Collapse value to Phone or Tablet. 

        <dnn:MENU2 runat="server" ID="BindMENU2" MenuStyle="BindMENU">
        <ClientOptions>
        <dnn:ClientString Name="Collapse" Value="Tablet" />
        </ClientOptions>
        </dnn:MENU2>

Event Trigger

Horizontal and Vertical

  1. Edit all theme's masterpages in use (.master files)
  2. Locate the menu script
  3. Replace code as shown on the right

You can set the EventTrigger value to Hover or Click

        <dnn:MENU2 runat="server" ID="BindMENU2" MenuStyle="BindMENU">
        <ClientOptions>
        <dnn:ClientString Name="EventTrigger" Value="Click" />
        </ClientOptions>
        </dnn:MENU2>

Link Trigger

Horizontal and Vertical

  1. Edit all theme's masterpages in use (.master files)
  2. Locate the menu script
  3. Replace code as shown on the right

This option only works when you set the EventTrigger value to Click

        <dnn:MENU1 runat="server" ID="BindMENU1" MenuStyle="BindMENU">
        <ClientOptions>
        <dnn:ClientString Name="EventTrigger" Value="Click" />
        <dnn:ClientString Name="LinkTrigger" Value="Longpress" />
        </ClientOptions>
        </dnn:MENU1>

To access links that also work as submenu parent items, we've introduced 2 different methods for accessing the link:

  • LinkTrigger: "Spacial" Click on the left side of the menu item to open the link and on the right side to open the submenu.
  • LinkTrigger: "Longpress" Long click/press the menu item to open the link.

All Options

Name Type Default Options Description
Style string Default Default, MegaMenu, Accordion The default menu style uses standard submenus, with MegaMenu you can have all your items organized inside only one submenu.
EventTrigger string Hover Hover, Click Event that will cause the show and hide of the menu options. Can only be hover or click. If the Event parameter is omitted, the default value is used.
LinkTrigger string Spacial Spacial, Longpress Allows you to access parent links with an alternative clicking method.
Type string Ease EaseIn, Ease, EaseOut Allows you to choose the animation of the submenus.
Speed string Fast Fast, Normal, Slow Allows you to control the speed of the animation of the submenus.
Appear string Top Left, Right, Top, Bottom Allows you to control the point of origin of the submenu as it appears on the screen.
Collapse string Phone Phone, Tablet Allows you to decide when the menu transforms into a mobile menu. The horizontal menu collapses and the vertical menu goes off-canvas.
MinWidth Horizontal menu only number 180 any value Allows you to set the minimum width for subitems. If any other string is supplied, or if the MinWidth parameter is omitted, the default value of 180px is used.
MaxWidth Horizontal menu only number 250 any value Allows you to set the minimum width for subitems. If any other string is supplied, or if the MaxWidth parameter is omitted, the default value of 250px is used.
MaxColumns Mega menu only number not specified any value Allows you to control the amount of columns displayed in Mega menu. Ideal for Mega menus with several subitems. If any other string is supplied, or if the MaxColumns parameter is omitted, the submenu will be displayed in a single row.
MaxLinks Horizontal menu only number not specified any value Allows you to set a max number of items on the menu, the remaining items will hide inside a collapsible submenu.
MenuVWidth Vertical Menu Only string Fast Small, Normal Allows you to set the width of the vertical menu.