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.:
Tag | Description |
---|---|
{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.
The Menu Module layouts can be found under: ModuleTemplates -> Menu.
The Default Menu Layout is: ModuleTemplates -> Menu -> Default
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.
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.
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.
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.
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!
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>
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.
Copy link to clipboard
Copied
Thanks Liam this is helpful.
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...
Copy link to clipboard
Copied
That is all handled in the CSS and any enhancements with Javascript. You do not do that inline
Copy link to clipboard
Copied
Anyone found a vertical CSS menu that is easy to implement in BC?
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.
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.
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.
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.
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.
Copy link to clipboard
Copied
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.
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
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).
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)?
I can't get this working.
Any advice would be much appreciated.
Thank you!Brendon
Copy link to clipboard
Copied
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.