Using the module_menu v2

Updated on 20-October-2016 at 10:16 AM

The Menu Module V2 gives you full control over the HTML mark-up for your dynamic menu. This is done by using the concept of "Module Templates". Module Templates are files found within FTP that can be modified to customize your menu look and feel. These module templates can be found in the /ModuleTemplates/Menu/Default folder via FTP or the file manager.
Within this folder, you will find 3 main files:

  • container.html
  • group.html
  • childitem.html
Let's go over them one by one:

container.html

This is a wrapper around the actual menu output. You can add any additional mark-up for the menu here. For example, If you want to use a widget, this is where you would add resources such as JavaScript/CSS files or widget initialization code. This file needs to have the {tag_menugroup} in order to render the menu.

Sample content:

<link rel=""stylesheet" href="/styles/menu.css" type="text/css"/>
<script type=""text/javascript" src="/js/menu.js" type="text/css"></script>
<div>&#123;tag_menugroup&#125;</div>

group.html

This is the Module Template used for all top-level menu groups. This file must contain the {tag_menuchilditem} to render the menu group.

 Sample content:

<ul>&#123;tag_menuchilditem&#125;</ul>

childitem.html

This is the Module Template used to customize the individual menu items. The tags that are used in this file are {tag_menuitemurl}, {tag_menuitemlabel}, {tag_menugroup}

Sample content:

<li><a href="&#123;tag_menuitemurl&#125;">&#123;tag_menuitemurl&#125;</a>&#123;tag_menugroup&#125;</li>

The {tag_menugroup} in this file is used to display any sub-menu items under a parent menu item. If no sub-menu item exists, this will not render anything.

 

Here is an example of generated mark-up for all the templates above:

 <link rel="stylesheet" href="/styles/menu.css" type="text/css" /><br /><script type="text/javascript" src="/js/menu.js"></script><br
    /><div><br /><ul><br /><li><a href="/home.html">Home</a></li><br /><li><a href="/shop.html">Online
    Shop</a></li><br /><li><a href="/members.html">Members Only</a><br /><ul><br /><li><a
    href="/updatedetails.html">Update Your Details</a></li><br /><li><a href="/vieworders.html">View Orders</a></li><br
    /></ul><br /></li><br /></ul><br /></div>

Support for multiple Module Templates

Multiple templates can be used for a single dynamic menu in different areas of the website. This is done by creating sub-folders within the /ModuleTemplates/Menu directory, for example if I wanted to create a second template called 'Side-Menu', this will be created as below

/ModuleTemplates/Menu/Side-Menu/

This new folder must contain the 3 Module Menu files (Container, group, children). 

Inserting the V2 Menu into your page or template

To insert the Menu Module V2, you will need to place the below module on the page/template: 

{module_menu, version="2", menuId="5475", moduleTemplateGroup="Default"}  

The 'menuId' must be the id of one of the existing dynamic menu's created within the admin. The 'moduleTemplateGroup' can be the default menu folder or one of the sub-folders you have created under ?/ModuleTemplates/Menu/?. There are 2 ways in which you can find the ID for one of your menus:

  • You can use the module manager to insert the relevant menu which will have the correct ID and then you can edit the module to reflect the format of {module_menu, version="2", menuId="MENU ID HERE", moduleTemplateGroup="Default"}
  • Navigate to the Website > Dynamic Menus screen and hover over one of the menu items, your browser window should display a preview of the URL similar to the below:
    • mysite.com/Admin/WebFormsV2_Detail.aspx?WebFormID=10851

Tags used in the Menu Module Templates

{tag_menugroup} - This will render all root level menu items, plus all items which contain children
{tag_menuchilditem} - This will render a list of all menu items with the same parent

The following correspond to fields you set for each menu item in the Admin Console menu customization:

{tag_menuitemlabel} - Item Label
{tag_menuitemdescription} - Item Description
{tag_menuitemurl} - Item URL e.g "/contactus.html"
{tag_menuitemtargetframe} - Target Frame e.g. "_blank"
{tag_menuitemimageurl} - Image URL
{tag_menuitemimagerolloverurl} - Image URL for rollover state
{tag_menuitemimageselectedurl} - Image URL for selected state
{tag_menuitemcssclass} - CSS class name
{tag_menuitemcssrolloverclass} - CSS class name for rollover state
{tag_menuitemcssselectedclass} - CSS class name for selected state
{tag_menuitemidname} -- Menu Item ID
{tag_menuitemcssclass_withclass} - CSS class name, with class attribute e.g. class="itemClass"
{tag_menuitemcssrolloverclass_withclass} - CSS class name for rollover state, with class attribute e.g. class="itemClassRollover"
{tag_menuitemcssselectedclass_withclass} - CSS class name for selected state, with class attribute e.g. class="itemClassSelected"
{tag_menuitemidname_withid} - Item ID, with id attribute e.g. id="myId"

For example, {tag_menuitemcssclass_withclass} will output class="itemClass" if you specified "itemClass" for a menu item, and won't output anything if you didn't specify a custom class.

Tip for using menu widgets

There are quite a few menu widgets on the web: Superfish, Spry, CSS dropdown, Menumatic, and filament, to name just a few.

Most of menu widgets require an id or a class set on the <ul> tag, e.g.

<code class=" language-markup"> <ul id="nav" class="widget"><br
    /><li>1st level item</li><br /><li>1st level item<br
    /><ul><li>2nd level item</li></ul><br /></li><br
    /></ul>

If you added the id/class to group.html module template, they would be generated for all sub-menus, not just the top-level ones.

Having full control on the generated mark-up, you are able to work around this by adding some JavaScript to the container.html module template. This will set the desired id or class on the first <ul> child of the <nav> tag. The default module templates already contain this JavaScript, ready to be customized by you.

Check out this forum article for a hands on tutorial for Menu V2

Using the Menu Module Version 2