In this tutorial, we go over the steps necessary to setup a mega menu with a difference, using Morph's built in Mega Shelf Menu jQuery plugin. Since nothing like this existed, we decided to write our own jQuery plugin and it is now included in Morph 2.0. Once you have completed the tutorial, you should end up with a mega shelf menu like the one demonstrated in this tutorial.
Before you start:
This tutorial assumes that are on the latest version of Joomla 1.5 (using Morph's Quick Installer) and that you are running the latest 2.0 version of Morph, Configurator and themelet of your choice.
Step 1: Enable the Mega Shelf Menu Plugin
The first step is to enable the plugin in Configurator, so go to the Plugins > Mega Menu tab and enable the plugin. Once that is done, you can save your Configurator preferences.
Step 2: Add your new shelves
In this step, we're going to take advantage of one of Morph's 2.0 exciting new features, namely Morph Hooks.
Brief Introduction to Morph Hooks
We'll be posting a comprehensive tutorial on this in the near future, but the hooks are essentially placeholders that allow you to "inject" your own custom content above or below any of Morph's blocks.
Similar to a module position, however there is no restriction to what you can add. Need another shelf? No problem! Need to include a php based gallery system? Easy peasy!
This feature really allows you to extend Morph, without ever having to modify any of the templates code (keeping your custom code safe from upgrades).
Still in Configurator, navigate to the Tools > Code Editor tab, then select the custom php option for your themelet. You can also use the custom.php via your themelet, but we prefer saving our custom code in the database.
Now, using this snippet as a base, add:
<?php
function addShelfMenu () {
$output = '<div id="products" class="doc4 yui-g5 grid shelfmenu" rel="megamenu">';
$output .= '<jdoc:include type="modules" name="products" style="grid" />';
$output .= '</div>';
$output .= '<div id="support" class="doc4 yui-gb grid shelfmenu" rel="megamenu">';
$output .= '<jdoc:include type="modules" name="support" style="grid" />';
$output .= '</div>';
echo $output;
}
$action->add_action('subhead_after', 'addShelfMenu');
?>In the above example, we're creating a new php function, which will output two new shelves, after the Subhead block. These will each contain their own module positions, that can be used to publish specific modules to each of the menu shelf blocks.
The first line names the function and wraps around the full function content. The code between lines three and twelve control the output of the function, which in this case, would simply output the following html after the Subhead block:
<div id="products" class="doc4 yui-g5 clearer grid shelfmenu" style="display:none;">
<!-- any modules published to the "products" module position will be outputted here -->
</div>
<div id="support" class="doc4 yui-gb clearer grid shelfmenu" style="display:none;">
<!-- any modules published to the "support" module position will be outputted here -->
</div>Notice how each of the blocks has its own id, which is used to customize the layout of that specific block.
The doc4 class is used to set the site width on the contents of each shelf, keeping it inline with the other blocks.
We use the "yui-g5" class to evenly space the 5 modules in the Products shelf and the "yui-gb" to evenly space the 3 modules in the Support shelf. We then use css to tweak the dimensions of the various modules, to better accommodate their content.
The last rel attribute is needed by the jQuery plugin and is used to define the relationship between the shelves, similar to how many lightbox scripts work.
In the first code example, we added a new module position for each of the blocks (products and services), so any modules you publish to those positions, would automatically be outputted in the relevant shelf.
Step 3: Initiate the Mega Shelf Menu plugin
Now switch over to the custom js option in the editor and paste the following snippet:
$('#item78').megamenu('#products');
$('#item79').megamenu('#support');The "item78" and "item79" are the id's that are automatically added to menu items in Morph. These are the id's for the specific menu items I want to use to activate the relevant shelves. In this case, its my Products and Services menu items.
The ('#products') and ('#support') bits are the id's of the shelves I want opened when the specific menu item is clicked and are the id's of the new shelves we added using Morph's Hooks in the previous step.
Step 4: Publish the modules to the new shelf positions
In this last step, you need to publish the modules you want displayed in each of the shelves. For the purpose of this tutorial, we'll publish a simple "Custom HTML" module, via Joomla's Module Manager.
Step 5: Tweak the shelf contents with css
The last thing you'll need to do is tweak the styling of the modules in your shelves. Things like adjusting the width to better accommodate the modules contents, colors, etc.
Below is the basic css I used to tweak the styling:
/* mega menu demo specific css
******************************************************/
/* remove any excess styling from the modules */
#mega-wrap .mod,
#mega-wrap .mod h3,
#mega-wrap .mod ul,
#mega-wrap .mod ul li{border:0;background:none;padding:0;}
/* reset the lists styling */
#mega-wrap ul,
#mega-wrap li{list-style:none;margin:0;}
/* tweak the module headings to our liking */
#mega-wrap .mod h3{font-size:16px;color:#fff;margin-bottom:.7em;}
/* tweaking the products modules spacing */
#mod72,
#mod73{width:16%;}
#mod74{width:21%;}
#mod74 p{width:200px}
#mod75{width:23%;}
/* styling the various menu's in the shelves */
#mod80 .menu li,
#mod82 .menu li,
#mod83 .menu li{width:50%;float:left;}
#support li span{color:#666;font-size:10px;}You can view the full set of styles here.
Step 6: Changing the persistence
You can set whether the menu stays open when the page is reloaded or if it should close again. If persistence is set to "true" then it will always stay open on page reload if the user had it open before reloading. If the persistence is set to "false" then the menu will always be closed, even if it was open before the page was reloaded.
Override the persistence by passing an object literal when you set the menu to overide the mega menu plugins persistent option. eg: "{persistent: true}"
$('#menuID').megamenu('#shelfID', {persistent: true});