From JoomlArt Wiki

Revision as of 16:21, 23 July 2010

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

This section is under construction. Please come back later.

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 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 modules 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 Custom HTML module. Go to Module Manager, then click the New button.

File:JD-Megamenu-userguide-video1.png

• Step 1 - type in a module name so you can recognize this module later, but select not to show this module name;
• Step 2 - type in a unique module position name, we are going to need this position name later;
• Step 3 - click the HTML link in the editor to open the HTML Source Editor;
• Step 4 - paste the video embedded code inside the text area;
• Step 5 - click the Update button;
• now you are going to click the Save button to save the module configuration.
  
  

Next, we will open Menu Item Manager for Main Menu, and click the New button in the top-right corner of your administration panel. Same as the example above, click the Separator menu item type, then continue with the following steps:

File:JD-Megamenu-userguide-video2.png

• Step 1 -
• Step 2 - type in a menu item title;
• Step 3 -
• Step 4 -
• Step 5 - select Yes for the Group option to show the child content item (the Vimeo flash video player) along with the menu item title;
• Step 6 - select Module positions option to be able to select one;
• Step 7 - remember the unique module position name tube we have assigned our custom module to? We are going to select it now!
• click the Save button to save the new menu item configuration, go to frontend, 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.
File:JD-Megamenu-userguide-params-reference.png