Skip navigation

This is an archived version of the document. The current version can be viewed here.

Currently Being Moderated

Using the Menu Module Version 2

Apr 5, 2012 1:53 AM

Menu Module Version 2 is a big improvement on Version 1. It offers some Layout and tag customisations to allow medium to advanced users to develop better menu's then they could before.

 

To acompany this document please find attached a zip containg an example CSS HTML only menu enhanced with jQuery. This is considered for people who understand HTML, CSS and jQuery quite well and understand how to use that to form their V2 Menu's.:

 

Tags used in the Menu Module Templates

 

TagDescription
{tag_menugroup}This will render all root level menu items, plus all items which contain childre
{tag_menuchilditem}This will render a list of all menu items with the same parent
{tag_menuitemlabel}Item Label (Menu Item Text)
{tag_menuitemdescription}Item Description (You will mainly use this as your title)
{tag_menuitemurl}Item URL e.g "/contactus.html"
{tag_menuitemtargetframe}Target Frame e.g. "_blank" OR use for Rel e.g. "no-follow"
{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 (Useful for as a reference for javascript as an example)
{tag_menuitemcssclass_withclass}CSS class name, with  class attribute e.g. class="itemClass" (Will render class="itemClass" in full)
{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"

Highlighted Tags indicate functionality that you can achieve through Pure CSS methods if you know how to do and not required to use.


Folder Structure & Location

 

The Menu Module layouts can be found under: ModuleTemplates -> Menu.

menuimg1.PNG

 

The Default Menu Layout is: ModuleTemplates -> Menu -> Default

menuimg2.PNG

You can see the folder contains your 3 layouts.

 

childitem.html:

This is your <li> and <a> (List item and anchor) element layout. Your actual menu items

 

container.html:

This is your main container element (The Div wrapper and basic javascript)

 

group.html:

This is your <ul> Element, this is for both the parent and sub <ul> elements at time of writing.

 

Tip 1:

Leave this layout as it is, You can make your own and this guide will show you how to use your own. You can copy  this folder and rename it relevent to what the menu will be.

 

menuimg3.PNG

Tip 2: Naming Your  Folders:

I like to name my menu folders the same as they are in the Admin. This helps you reference which belongs to which very easily.

 

childitem.html

 

This file by default looks like this:

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

 

Both the withid tag and the withClass tag will render id="yourID" and class="yourClass" respectivly if you add these into the menu item in the admin.

menuadmin.PNG

We wont be using the Item roleover or Select Class fields as this guide considers you will be doing this in your CSS and selected state is run by the provided BC Javascript.

 

There is one key missing element out of the box in the HTML though. It is missing the anchor title. So in your menu's you can go and add that in like in the example code below. You will use the item description tag to achieve this.

 

<li {tag_menuitemidname_withid} {tag_menuitemcssclass_withclass}><a href="{tag_menuitemurl}" title="{tag_menuitemdescription}">{tag_menuitemlabel}</a>{tag_menugroup}</li>

 

Note: At time of writing if you do not add any item description your HTML will render title="".

 

This is pretty much it, you can add and change it more but you do not want to break valid HTML structure and you want to try and keep it as simple as possible. You can do heaps just in your CSS!

 

group.html


This is simply:

<ul>{tag_menuchilditem}</ul>


At time of writing this layout is used for both the primary and secondy UL elements. (The main UL and the UL elements for secondary navigation)
With this in mind there is not much you can modify here to be unique for sub menu items but you can change this to fit your needs. One thing I often add is a "clearfix" class to correct floating elements inside for browsers.

 

<ul class="clearfix">{tag_menuchilditem}</ul>

 

container.html

There is a few things going on here and a few traps people fall into as well as some advanced things you can do to update/modify this layout.

 

Below is the default HTML..

<div id="myMenu1">{tag_menugroup}</div>
 
<!-- the following script is needed to set the selected state -->
<script type="text/javascript" src="/CatalystScripts/Java_DynMenusSelectedCSS.js"></script>
<script type="text/javascript" >
    // ids need to be unique per page, use different ones if you are including multiple menus in the same page
    // id of the nav tag, used above
    var divTagId = "myMenu1";
 
    // desired id for 1st <ul> tag 
    var ulTagId = "myMenu1List";
 
    // desired class for 1st <ul> tag 
    var ulTagClass = "";
 
    if ((null !== ulTagId) && ("" !== ulTagId)) {
        document.getElementById(divTagId).getElementsByTagName("ul")[0].setAttribute("id",ulTagId);
    }
    if ((null !== ulTagClass) && ("" !== ulTagClass)) {
        document.getElementById(divTagId).getElementsByTagName("ul")[0].className = ulTagClass;
    }
 
    // this will set the selected state
    if ((null !== ulTagId) && ("" !== ulTagId)) {
        catSetSelectedCSSItem(ulTagId);
    }
</script>
 
<!-- 
For a sample CSS menu:
1. download the archive from http://lwis.net/free-css-drop-down-menu/ 
2. unpack the css files in your site
3. set the ulTagClass above to
    var ulTagClass = "dropdown dropdown-horizontal";
4. uncomment the following
5. if necessary, correct the path to reflect the files' location in your site
-->
<!--
<link href="/css/dropdown/dropdown.css" media="screen" rel="stylesheet" type="text/css" />
<link href="/css/dropdown/themes/default/default.css" media="screen" rel="stylesheet" type="text/css" />
<style>
ul.dropdown li.selected>a{
    border-bottom: 1px solid #000000;
}
</style>
-->
 
 

 

You should be able to see that in recent viewsions of this layout has a link and information on how to use some custom CSS Menu layouts which you can use with BC Menu Module V2. Why not check these out too.

 

1. The BC Javascript is there to create the selected state for the menu. This adds class="selected" on the <li> element. You can choose to remove this if you use or build your own active state scripting.


2. To use this layout wih the javascript you must ensure you give the <div> wrapping element a unique ID and ensure you add this to this part of the javascript: var ulTagId = "myMenu1List";


3. If you wish to add a class to the UL you can do it javascript wise by adding it into this varible. This will add the class on the parent (main) UL only.
var ulTagClass = "";

Note: This is a javascript method and you may prefer to add it manually in the group.html layout


4. Remove the Comment part as you do not need it, it is just a reference note. If you keep the Default folder that will have that reference for you to refer to.

Attachments:
 
Comments (12)