From JoomlArt Wiki

Revision as of 10:51, 30 July 2010

{{#customtitle:JD T3 Framework 2.0 for Drupal - Navigation Systems|JD T3 Framework 2.0 for Drupal - Navigation Systems}}

Introduction

JD T3 Framework comes with four menu systems:

• Mega Menu - the most powerful menu system out there as it can load blocks, regions, and can combine vertical, horizontal and columns design to make the main navigation more friendly.
• Split Menu - a menu system to display the sub menus vertically when a root menu item is active. The second level is displayed in a cascade style.
• Dropline Menu - very similar to Split Menu but it has an additional ability to show sub menu items on mouse hover.
• CSS Menu - the most popular menu system to use a simple cascade design, with no script required.

Mega Menu System was introduced with the first version of the JA T3 Framework 1.0 for Joomla! back in 2009, and now it is one of the most powerful menu system out there.
The Mega Menu system will add more flexibility for Drupal powered website navigation as it is capable to load modules as menu items and provide unlimited possibilities for the menu layout and design. Some of the features were already part of Drupal menu management like Menu Item Description and others, so now the framework uses best features for both Joomla! and Drupal.
The override feature is very similar as for the JA T3 Framework 2.0 for Joomla! and makes possible to use a certain menu system for a certain page.
This section provide a step by step guide on how to edit your main navigation (JD Links in most cases) to add more value to your website.

Basically, we are going to show you examples on:

• how to add menu images / icons;
• how to edit menu item parameters;
• how to edit specific Mega Menu parameters;
• how to load module blocks as menu items.

At the end of this section you can find a complete parameter reference.

If you need a hand understanding the basics of Drupal Menu Management, please refer to Menu Management Reference.

Editing menu items

When you install the first time a T3 Framework based template for Drupal, you will have a navigation menu system looking similar to this:

The image suggest no Mega Menu parameters used in this particular case. We are going to set more and more parameters and explain how to make it look just like the demo, but first let's check some requirements.

Checklist

In order to be able to enable the complete features list of the T3 navigation systems, you have to check:

• you have installed the Template Engine, this holds the framework core scripts (including menu systems scripts) and basic styling.
• you have your T3 Framework based Drupal theme set as your default theme;
• you have set up Mega Menu as your default navigation system, so this way you can set up all your desired settings.

Please note that using JD T3 Blank theme quickstart pack do not require to follow this checklist, it is only for manual installation.

Adding menu images

To be able to add icons to your menu items, first you are going to upload your favorite icons to the your_site_root/sites/all/images folder.
Allowed extension is .png and please use 16x16 pixels icons to avoid layout breaks.

Next, in the administration section of your website, please navigate to Site building - Menus - JD Links, and then click the Edit link for Home menu item to add an appropriate icon for it.

• Step 1 - Find the Menu Image parameter and select your desired icon for Home menu item;
• Step 2 - Scroll down and click the Save button located at the bottom of the administration panel to apply this change.

Now you can do the same for Typography menu item, then refresh the page and see how it looks like!

Editing additional menu parameters

Grouping menu items

When you enable Mega Menu for the first time, menu items will use no parameter setting, therefore it will show up similar to CSS Menu Systems:

In the image above, you can see the Explore menu item having three child menu items:

• Layout,
• Menu Showcase,
• Vimeo.

We are going to edit each one of them, as we need to show up their child menu items or child content along with these parent items. We are going to click the Edit link for Layout menu item to edit it.

As you see in the image above, just by selecting Yes for the Group option will group the Layout menu item with it's child menu items into a compact column, and the parent menu item Layout becomes the head of the first column of the main menu item Explore. Now we can do the same thing for the other two parent menu items: Menu Showcase and Vimeo.

Please note that this parameter only applies for Mega Menu navigation system.

Setting up columns

We find a good idea to show you now the Explore menu item structure. Take a closer look at the menu structure in the left side and the menu system view in the right side. This makes sense to edit some more Mega Menu parameters:

As we marked the columns, we have to change the Explore menu item parameters to show up properly it's child menu items, so let's click the Edit link for this menu item and customize it:

• Step 1 - Set the columns number to three, it will apply for each menu item: 1 - Layout, 2 - Menu Showcase and 3 - Vimeo;
• Step 2 - Add a custom width for each column to make it more visual appealing, especially for the Vimeo video player that exceeds the default column width of 200 pixels;
• Step 3 - Click the Save button, refresh the page and see the changes.

Please note that this parameter only applies for megamenu navigation system.

Loading blocks as menu items

In this section we are going to show you how to load different types of modules as menu items. Basically you can load any type of module:

• Full HTML: embedded videos, external content, advertising (Google Ads or any other affiliated adds service), community links, etc;
• Regular Drupal modules: login module, quick contact module, external content feeds, generally all modules you have installed in your setup.

Please note that child content items will only show up for Mega Menu navigation system, for the others, CSS Menu, Split Menu and Dropline Menu, the navigation bar will only show up menu titles.

Loading embedded video

We have shown you above a Vimeo video player as a menu item. Now we are going to explain how to do that, so first let's create a new Full HTML module. Go to Administer - Site building - Blocks, then click the Add block tab button. Next, please follow this quick guide:

• Step 1 - type in a block description;
• Step 2 - type in a block title, we are going to need this later;
• Step 3 - paste the video embedded code inside the text area of the Block body;
• Step 4 - select the Full HTML in the Input format section;
• Step 5 - scroll down and click the Save configuration button.

Next, we will open Menu Item Manager for JD Links, and click the Add item tab button, then continue with the following steps:

JD Mega Menu Parameters

• Step 1 - Select Yes option for Group parameter;
• Step 2 - Select Blocks option for Submenu Content;
• Step 3 - Select Vimeo module block;

Standard Menu Settings

• Step 4 - Add a path for the menu item;
• Step 5 - Type in a Menu link title;
• Step 6 - select Parent item for the menu item;
• Step 7 - Scroll down and click the Save button.

Refresh the page and see the changes.
The result of these changes can be viewed in the Setting up columns section.

Parameters reference

In this section we would like to build a complete reference for all T3 Navigation System Parameters. We are going to explain each parameter: functions, usage, values and examples of best practices.

TIP: hovering your mouse pointer over each of the parameters in the menu item editing panel, basic usage instructions will pop-up and give you a hint on how to setup the parameters.

Columns Parameter

This parameter defines the number of columns needed to display child menu items of a parent menu item. There are some things you must always remember:

• the default value of this parameter is 1 (one);
• if you have for instance 4 child menu items, you will have to set this parameter to 4 columns for the parent item of these menu items, or you can set 2 columns to have a narrowed navigation;
• you can create as many columns as you need into your navigation structure, but it is better to use columns only for the main menu items, those in your menu root, this way you will avoid template breaks;
• this parameter is a pair parameter with Group parameter;
• this parameter only applies to Mega Menu navigation system.

Group Parameter

This parameter will group the parent menu item with it's child menu items to form compact columns. Remember:

• the default value of this parameter is No;
• it only groups the parent item with it's direct child items (EG: parent from level 1 with child1, child2, ... childn from level 2);
• this parameter is a pair parameter for Columns Parameter parameter;
• see an example here;
• this parameter only applies to Mega Menu navigation system.

Submenu Width Parameter

This parameter will override the width of the entire child content area. Properties:

• this parameter has no default value;
• this parameter must be used for parent menu items and applies to child content area, no matter the number of columns;
• this parameter is useful for a single column of child items, especially for special advertising or different types modules having a higher width value than the default 200 pixels column width;
• this parameter only applies to Mega Menu navigation system.

Column Width Parameter

This parameter will override the default column width of 200 pixels for all columns. So:

• this parameter has no default value;
• this parameter is used for parent menu items, and applies to all direct child items columns;
• this parameter might be useful when you have relatively long menu item titles or you just want to add a distinctive look to your navigation;
• this parameter only applies to Mega Menu navigation system.

Specific Column Width Parameter

This parameter will override the default width of 200 pixels for one or more columns.

• this parameter has no default value;
• this parameter is used for parent menu items, and applies to specific direct child items columns;
• this parameter is very useful when you have more columns with distinctive menu item title lengths or larger images and you want to use a custom width for certain columns, just like we have done for the Vimeo video player;
• for each of the child items, you have to define the width using this variable: colw1 - meaning width of the first column;
• when using custom width for multiple columns, you must not use comma. Example: colw1=220 colw2=230
• you can see an example here;
• this parameter only applies to Mega Menu navigation system.

Submenu Content Parameter

Child menu items OR None

• this is the default option for the Submenu Content parameter;
• this option will define the menu item behavior as a regular Drupal menu item;
• the significance of this option is that the menu item will load no additional content, furthermore it will not load any scripts for such actions, just like we would disable loading block modules;
• using this option will produce no effect on any menu system, but switching to this option, will disable loading additional content for Mega Menu navigation system.

Blocks as menu items

• using this option will allow you to load a module block by it's title, with other words if you set your module title "Latest News", this is what you are going to see here for block module selection;
• this option only affects Mega Menu and enables the first method of loading block modules as menu items.

Regions as menu items

• using this option will allow you to load one or several block modules assigned to a certain region, and the select box will show you all regions defined in the Drupal theme (user1, user2, top-panel, mass-bottom, etc)
• this option only affects Mega Menu and enables the second method of loading modules as menu items.

Menu Image

• This is a Joomla! feature for menu items now available for Drupal thanks to JD T3 Framework.
• It allows you to set an appropriate icon for each menu item.
• See an example here.
• This parameter applies to all menu systems.

Additional Class

• Another common feature for both Joomla! and Drupal.
• It provides an excellent way to make your menu items unique by using menu item class suffix.
• Examples:
  • green_item class with styling .green-item {background-color:green;} - will override the default menu item background color with the one you set this way;
  • float-right class with styling .float-right {float:right;} - will force alignment for the menu item.
  • See a live demo here.

JD T3 Framework 2.0 for Drupal Resources
Overview | Developer Guides | Customization FAQs | Navigation | Copyright

JA T3 Framework 2.0 for Joomla! Resources
Overview | Developer Guides | Customization FAQs | Navigation | Copyright