<p class="alert">Please ensure you are using the latest version of RokNavMenu, available <a href="http://www.rockettheme.com/extensions-joomla/roknavmenu" target="_blank">here</a>.</p>

<div class="module-title"><h3 class="title">Configuration</h3></div>

<p>Go to <strong>Extensions &rarr; Template Manager &rarr; rt_nebulae_j15 &rarr; Menu Control</strong> to find all the parameters for Fusion Menu and Splitmenu, such as transitions, duration and sublevel position.</p>

<p class="attention">Descriptions of each template parameter can be seen when you mouseover the label of each option.</p>

<div class="module-title"><h1 class="nomargintop">Fusion with MegaMenu</h1></div>

<p><img src="images/stories/demo/menu/fusionmenu.jpg" alt="image" width="580" height="201" class="rt-image" /></p>

<p><strong>Fusion Menu</strong> is a menu theme of the <strong>RokNavMenu</strong> extension, the addon that drives all RocketTheme template menus. It is primarily a javascript enhanced CSS dropdown menu, that combines standard suckerfish type functionality with animations, transitions and other advanced effects provided by Mootools.</p>

<p class="alert"><strong>NOTE:</strong> The latest version of <a target="_blank" href="http://www.rockettheme.com/extensions-joomla/roknavmenu">RokNavMenu</a> is required, in order for Fusion to operate.</p>

<div class="rt-demo-grid-4 nomarginleft nomarginright">
<p><em class="bold2">Latest Features</em></p>

<ul class="checkmark">
	<li>Triple / Quad Column Mode</li>
	<li>Column Menu Grouping</li>
	<li>Column Width Control</li>
	<li>Load Modules inside Dropdowns</li>
	<li>Load Module Positions inside Dropdowns</li>
</ul>
</div>
<div class="rt-demo-grid-4 nomarginright">
<p><em class="bold2">Recurring Features</em></p>

<ul class="checkmark">
	<li>Single Column Mode</li>
	<li>Dual Column Mode</li>
	<li>Menu Item Subtext</li>
	<li>Menu Item Icons</li>
	<li>Javascript Controls</li>
</ul>
</div>
<div class="clear"></div>

<p class="notice">All Menu Items can be edited from <strong>Admin &rarr; Menu &rarr; <em>Menu Name</em> &rarr; <em>Menu Item</em></strong>.</p>

<div class="module-title"><h3 class="title">Basic Fusion Parameters</h3></div>

<p><em class="bold2">Adding Subtext</em></p>

<p><strong>Subtext Line</strong> is the option that allows you to insert additional text to the <strong>Menu Item Title</strong>. There is separate styling for this, making it useful for adding brief descriptions to menu items.</p>

<p><em class="bold2">Adding Menu Icons</em></p>

<p><strong>Menu Image</strong> is the option that allows you to insert an inline icon / image to the <strong>Menu Item</strong>.</p>

<div class="module-title"><h3 class="title">Advanced Fusion Parameters: Columns</h3></div>

<p><em class="bold2">Menu Columns</em></p>

<p><strong>Columns of Child Items</strong> allows you to determine how many columns the <strong>Fusion</strong> dropdowns are presented in. You can have anywhere between a <strong>single dropdown</strong> to a <strong>four column</strong> dropdown.</p>

<p><em class="bold2">Item Distribution</em></p>

<p><strong>Item Distribution</strong> allows you to control how the menu items are ordered in the dropdowns:</p>

<ul class="list-icon doc">
	<li><strong>Evenly:</strong> If there are <strong>7</strong> menu items in <strong>3</strong> columns, Fusion will allocate a <em class="bold">3,2,2</em> distribution - trying to equalize each dropdown.</li>
	<li><strong>Order:</strong> If there are <strong>7</strong> menu items in <strong>3</strong> columns, Fusion will allocate a <em class="bold">3,3,1</em> distribution - maintaining the item ordering.</li>
</ul>

<p class="notice"><strong>NOTE:</strong> If your <strong>Columns of Child Items</strong> setting is configured to be 2 or more columns, you will need to manually set the column widths and distribution, as outlined below. The default is 180px which is too small for multiple columns.</p>

<p><em class="bold2">Drop-Down Width (px)</em></p>

<p><strong>Drop-Down Width (px)</strong> determines the total width of the dropdown, regardless of how many columns are shown. This option is to be used in conjunction with <strong>Column Widths (px)</strong></p>

<p><em class="bold2">Column Widths (px)</em></p>

<p><strong>Column Widths (px)</strong> determines the width of each Column. Separate each width by a comma. The final column's width is determined automatically. This option is to be used in conjunction with <strong>Drop-Down Width (px)</strong></p>

<p>Below are some example configurations:</p>

<ul class="list-icon doc">
	<li><strong>Drop-Down Width: 480px:</strong> <em>160,160</em>. Fusion automatically calculates the final width as <strong>160</strong>, so in practise, <em>160,160,160</em> is the actual distribution.</li>
	<li><strong>Drop-Down Width: 600px:</strong> <em>160,160</em>. Fusion automatically calculates the final width as <strong>280</strong>, so in practise, <em>160,160,280</em> is the actual distribution.</li>
</ul>

<div class="module-title"><h3 class="title">Advanced Fusion Parameters: Groupings</h3></div>

<p><em class="bold2">What is Grouping?</em></p>

<p><strong>Group Child Items</strong> changes the behaviour of child items in the dropdown menus, instead of creating a dropdown for the immediate sublevel, this option places them inline. See below for an illustrated example of the differences:</p>

<p><em class="bold2">Configuration</em></p>

<p class="attention"><strong>NOTE:</strong> Grouping cannot be applied to <strong>root</strong> items, only <strong>child</strong> items.</p>

<p>Set <strong>Group Child Items</strong> to Yes to activate the mode. The sublevels well then appear below the parent menu item in a categorical type structure.</p>

<div class="module-title"><h3 class="title">Advanced Fusion Parameters: Modules</h3></div>

<p><strong>Fusion</strong> is now capable of loading individual modules or entire module positions inside its dropdowns.</p>

<p><em class="bold2">Loading Individual Modules</em></p>

<p>Set <strong>Child Item Type</strong> to <strong>Modules</strong> to load all modules setup on your Joomla site in a list. Select the module you wish to display in the dropdown.</p>

<p><em class="bold2">Loading Module Positions</em></p>

<p>Set <strong>Child Item Type</strong> to <strong>Modules Positions</strong> to load all module positions on your Joomla site in a list. Select the position you wish to display in the dropdown.</p>

<div class="module-title"><h3 class="title">Template Configuration: Fusion Menu</h3></div>

<p>Go to <strong>Extensions &rarr; Template Manager &rarr; rt_nebulae_j15 &rarr; Menu</strong> Set <strong>Menu Control</strong> to <strong>Type</strong> : <strong>Fusion-Menu</strong>, to load all the Fusion parameters.</p>

<div class="module-title"><h1>Splitmenu</h1></div>

<p><img src="images/stories/demo/menu/splitmenu.jpg" alt="image" width="580" height="201" class="rt-image" /></p>

<p>A static menu system that displays 1st level items in the main horizontal menu and further children in the Sidebar.</p>

<p><em class="bold2">Template Configuration: Splitmenu</em></p>

<p>Go to <strong>Extensions &rarr; Template Manager &rarr; rt_nebulae_j15 &rarr; Menu</strong> Set <strong>Menu Control</strong> to <strong>Type</strong> : <strong>Split-Menu</strong>, to load all the Splitmenu parameters.</p>

<p><em class="bold2">Menu Item Parameters: Subtext</em></p>

<p><strong>Subtext Line</strong> is the option that allows you to insert additional text to the <strong>Menu Item Title</strong>. There is separate styling for this, making it useful for adding brief descriptions to menu items.</p>

<p><em class="bold2">Code Modification: Remove the <em class="normal">Menu</em> in the Title</em></p>

<p>Open <strong>/templates/rt_nebulae_j15/html/modules.php</strong> and change:</p>

<pre>
&lt;?php echo $menu_title_item-&gt;name.&#x27; &#x27;.JText::_(&#x27;Menu&#x27;); ?&gt;

</pre>

<p>To</p>

<pre>
&lt;?php echo $menu_title_item-&gt;name; ?&gt;

</pre>

<div class="module-title"><h1>How to create Child / Sublevel menu items</h1></div>

<p>Go to <strong>Admin &rarr; Menu &rarr; <em>A Menu</em> &rarr; <em>A Menu Item</em> &rarr; Select a <em>Parent Item</em></strong>, and it will appear as a child of it.</p>

<p>
	<img src="images/stories/demo/menu/tut-menu-29.jpg" alt="Image" width="270" height="212" class="rt-image floatleft" />
	<img src="images/stories/demo/menu/tut-menu-30.jpg" alt="Image" width="270" height="212" class="rt-image" />	
</p>