• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
Locked
1

Using the Menu Module Version 2

LEGEND ,
Apr 05, 2012 Apr 05, 2012

Copy link to clipboard

Copied

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.

Inserting the Module:

The module code to insert the V2 Menu Module is the following:

{module_menu, version="2", menuId="MENUID", moduleTemplateGroup="TEMPLATE FOLDER NAME"}

You can obtain your menu ID by going into the menu via the admin, clicking it and viewing the URL. If you look at the URL you will find the ID.

TOPICS
Documentation

Views

14.5K

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
May 20, 2012 May 20, 2012

Copy link to clipboard

Copied

Thanks Liam this is helpful.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Engaged ,
May 22, 2012 May 22, 2012

Copy link to clipboard

Copied

(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.)

What if you wanted to use the item roleover CSS to get the child elements of that group jump out the the right whenever that menu is rolled over or clicked on? Would that even be the proper way to achieve that goal?

Thank you so much for your insight and help Liam...

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
May 24, 2012 May 24, 2012

Copy link to clipboard

Copied

That is all handled in the CSS and any enhancements with Javascript. You do not do that inline

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
May 29, 2012 May 29, 2012

Copy link to clipboard

Copied

Anyone found a vertical CSS menu that is easy to implement in BC?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
May 30, 2012 May 30, 2012

Copy link to clipboard

Copied

Download the attached code I wrote and use the vertical css class element. Does all the core stuff, you just need to tweak and change it as you need to.

Any menu will work with BC:

http://www.laidlaw.ac.nz for example is a BC menu.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
May 30, 2012 May 30, 2012

Copy link to clipboard

Copied

I like the pop down pop up way your vertical is doing in the sample link. It would be good to have something like that made available for general use in BC as many like I do not have th skill to build it ourselves. I personally have never completely understood how to implement a nav like that (no javascript skills) though of course I have had success with the methods initially provided when V2 was released.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
May 31, 2012 May 31, 2012

Copy link to clipboard

Copied

BC guys do offer guides on javascript. Check out the jQuery ones I wrote to help you with the basic concepts in that section of these forums.

But it is extra stuff, its Javascript though and something as a web designer/developer you need to know or have staff to do this for you if your selling websites. If a site is for yourself it is something you can learn through guides on the web and do what you can.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Dec 30, 2012 Dec 30, 2012

Copy link to clipboard

Copied

Liam,

I am familiar with the basics, just learning how to implement thru the bc interface and am becomding frustrated with the v2 menu.

I am attempting to place an accordian (vertical) style menu on the left side of the shop pages only that is dynamically rendered with all shop catalogs / sub-catalogs.  I see the v2 menu modules from the alpha file manager but do not understand how to access / move / copy / customize these and where.  Leave the files where they are or what?  Everything else is being done thru the manage site interface. 

I have reviewed your post and have downloaded the suggested files, etc.  I am certain I am overlooking something simple.  Is there an article posted somewhere that goes into more detail?  Any assistance will be appreciated.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Aug 07, 2013 Aug 07, 2013

Copy link to clipboard

Copied

You can not use The Menu to dynamically render products and catalogs. You need to add items to the menu.

With the sub menus you got is it just CSS you are working with?

So you click, page loads and sub menu shows? And your issue is that the 3rd level also shows but you only want this when you are on a 2nd level page?

Or you using some javascript?

Could you post a link so people can look at the code to help?

What it will be is just your css or javascript targeting.

You use things like ul > li a and chaning of ...

ul li ul li ul {{ etc.

With large level menu's it does get a bit of CSS covering all the aspects but will totally make sense once we sort that for you.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Aug 08, 2013 Aug 08, 2013

Copy link to clipboard

Copied

Thanks for the reply. The link is:

http://www.ph-ew.com/accessories

Chris

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Aug 07, 2013 Aug 07, 2013

Copy link to clipboard

Copied

My problem with the vertical navigation is that while the secondary navigation, it only opens when clicking the primary navigation. However, if I add a third level of navigation as a child of the secondary, all of the third level navigation opens, without clicking the second level nav. Appears to be the default. Is there any way to change that? See attachment for an example of what I mean. CSS styling works well, but don't know how to make the 3rd level only open on click.

3rd-level-vertical-nav.jpg

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Guest
Aug 29, 2013 Aug 29, 2013

Copy link to clipboard

Copied

Hi Liam,  you should add a note in the instructions about the proper syntax for adding the version 2 menu to  a page... 

Jeff

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Dec 20, 2017 Dec 20, 2017

Copy link to clipboard

Copied

Thanks Liam, this is great. I have one question though.

I have inserted a version 2 module menu item into my HTML and I have added the necessary tag inside the childitem inside ModuleTemplates (see screenshots).

Screen Shot 2017-12-21 at 6.58.19 am.png


Screen_Shot_2017-12-21_at_6_57_48_am.jpg


Is this all that is required to make a menu item open up in a new window once I have specified this on the BC menu item (screenshot below)?

Menus___Template_-_Footer_Social.jpg

I can't get this working.

Any advice would be much appreciated.

Thank you!Brendon

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Jan 07, 2018 Jan 07, 2018

Copy link to clipboard

Copied

LATEST

I would actually explore using Liquid markup and the module going forward. You have more control over your layouts and functionality output then using these older layouts.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines