Announcing menu module version 2: multiple module templates, named parameters

- Friday, March 18, 2011

We're glad to announce availability of a new menu module version. It brings support for

  • full control over generated markup
  • multiple module templates
  • named parameters syntax
  • versioning

The old menu version will continue to be used by default when adding menu modules to a page. If you'd like to use version 2, for now you have to manually adjust the module parameters. Please read on for more details and questions for you, BC partners. We look forward to your feedback here.

Full control over generated markup

There are already quite a few great looking sites on BC today. In order to let you fully express your creativity, we aim to give you full control on all markup generated by BC.

Starting with menu module 2, we're introducing the concept of "Module Templates", similar to current "Layouts". For menu, these are available by FTP in folder "/ModuleTemplates/Menu/" , at the same level with "/Layouts/".

The 2.0 menu module will generate the markup which you specifiy in the following module templates

/ModuleTemplates
	/Menu
		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 markup for the menu here. If you were using a widget, this is where you would add resources (js/css), or widget initialization code.

Sample contents:

<link rel="stylesheet" href="/styles/menu.css" type="text/css" />

<script type="text/javascript" src="/js/menu.js"></script>

<div>{tag_menugroup}</div>
    

Ideally, <nav> tag should have been used instead of <div>, but having an id on <nav> isn't supported in IE8.

group.html

Module Template for all menu groups.

Sample contents:

<ul>{tag_menuchilditem}</ul>

childitem.html

Module Template for the actual menu item.

Sample contents:

<li><a href="{tag_menuitemurl}">{tag_menuitemlabel}</a>{tag_menugroup}</li>
            

Please note the possible recursiveness, in case there is a submenu inside a menu item.

Here is an example of generated markup for all the templates above:


<link rel="stylesheet" href="/styles/menu.css" type="text/css" />

<script type="text/javascript" src="/js/menu.js"></script>


<div>

	<ul>

		<li><a href="/home.html">Home</a></li>

		<li><a href="/shop.html">Online Shop</a></li>

		<li><a href="/members.html">Members Only</a>

			<ul>

				<li><a href="/updatedetails.html">Update Your Details</a></li>

				<li><a href="/vieworders.html">View Orders</a></li>

			</ul>

		</li>

	</ul>

</div>

Support for multiple module templates

The same menu module can be generated with different markup in different parts of the site, by creating multiple sets of module templates. You can create sub-folders with the same module template files as above in the "/ModuleTemplates/Menu" folder.

Named parameters syntax & versioning

Finally, this is the syntax for using the new menu module:

{module_menu, version="2", menuId="5475", moduleTemplateGroup=""}  
for the default menu, or
{module_menu, version="2", menuId="5475", moduleTemplateGroup="a folder name from /ModuleTemplates/Menu/"}

With a key/value pair for module parameters, we hope the menu module parameters are self-explanatory :-) The order of parameters does not matter.

To start using the menu module version two, manually change the current syntax in your pages from

{module_menu, 5475}  

to the one above.

What tags are available?

{tag_menugroup} - renders all root level menu items, plus all items  which contain children (recursively)
{tag_menuchilditem} - renders 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}
 {tag_menuitemdescription}
 {tag_menuitemurl}
 {tag_menuitemtargetframe}

 {tag_menuitemimageurl}
 {tag_menuitemimagerolloverurl}
 {tag_menuitemimageselectedurl}

 {tag_menuitemcssclass}
 {tag_menuitemcssrolloverclass}
 {tag_menuitemcssselectedclass}
 {tag_menuitemidname} -- this is also offered as an option right now, in menu customization screen. The problem is, that if you will insert multiple menu modules in one page (e.g. navigation, footer), it will no longer validate - same ids multiple times.

For now, you can insert these only manually or via Dreamweaver extension.

There are no tags for Item Width & Height, since customization would take place in the module templates or external CSS.

 

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.

<ul id="nav" class="widget">
   <li>1st level item</li>
   <li>1st level item
      <ul><li>2nd level item</li></ul>
   </li>
</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 markup, we are able to work around this by adding some JavaScript to the container.html module template, which 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.

Here's a screencast tutorial on how to use menu module templates and adding a customized widget from Dreamweaver. If you are using Widget Browser and would like to make changes to widget formatting after adding it, then save the updated preset and re-insert the widget in container.html.

Having widgets encapsulated in the menu module templates will keep your page templates cleaner.

Deprecated functionality

When using menu module version 2, the following items are ignored:

  • menu type
  • menu item width/height properties

Sample templates

We've prepared a sample site which uses menu module templates. It uses the same menu in the header and footer, but with different module templates: superfish in heder, and a simple one-level list in footer. Here's an archive with menu templates.

Looking forward to your samples!

Known issues/limitations

When there are no specified custom classes or ids for menu items, the generated markup will contain empty class/id attributes.

Fallback on default menu template does not work if moduleTemplateGroup refers to a nonexistent folder, or a folder that does not contain all 3 menu template files. This will be fixed in the next release.

Further planned changes

Have several module templates out of the box, to quickly get you started with various menu types: css menu, superfish, raw.

Using the menu module version 2 by default with Advanced Site Editor in BC V3 (more details and discussion in pre-release program)

Long term: Editing module templates in BC Advanced Site Editor, not just via FTP

Long term: Support for generating "selected" class. We include support now for setting this class from JavaScript, but it doesn't work for some sections like product or blog post details. Ideally the class would be generated server-side.


Feedback request

We would like to hear your opinion on the specific items below:

  1. what do you think overall?
  2. how to make the menu module easier to use by you, and help you produce great menus?
  3. from menus perspective, how do you handle sites which are localized in multiple languages? How would it work ideally?

Thanks for your feedback and helping us better meet your needs.

On behalf of Business Catalyst CMS team,
Marius Andreiana

Comments