<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>

<p>To find all the parameters for Fusion Menu and Splitmenu, such as transitions, duration and sublevel position, go to:</p>

<ul class="list-icon rightarrow">
	<li><strong>(J15) Extensions &rarr; Template Manager &rarr; rt_radiance_j15 &rarr; Menu &rarr; Menu Control &rarr; <em>Set Menu Type</em></strong></li>
	<li><strong>(J17) Extensions &rarr; Template Manager &rarr; rt_radiance &rarr; Menu &rarr; Menu Control &rarr; <em>Set Menu Type</em></strong></li>
</ul>

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

<div class="module-title"><div class="module-titl2"><div class="module-title3"><h2 class="title medmargintop">Fusion with MegaMenu</h2></div></div></div>

<p><img src="images/stories/demo/menu/fusionmenu.jpg" alt="image" width="572" height="200" 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 powered by Mootools.</p>

<div class="rt-demo-grid-3 nomarginleft">
<ul class="circle green normalfont">
	<li>1/2/3/4 Column Modes</li>
	<li>Custom Column Widths</li>
	<li>Custom Menu Width</li>
	<li>Menu Item Grouping</li>
	<li>Item Distribution Controls</li>
</ul>
</div>
<div class="rt-demo-grid-3">
<ul class="circle green normalfont">
	<li>Animation Controls</li>
	<li>Transition Controls</li>
	<li>Duration/Delay Controls</li>
	<li>Opacity Controls</li>
	<li>Per Item Styling</li>
</ul>
</div>
<div class="rt-demo-grid-3 nomarginright">
<ul class="circle green normalfont">
	<li>Inline Modules</li>
	<li>Inline Positions</li>
	<li>Menu Item Subtext</li>
	<li>Menu Item Icons</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>

<h3>Basic Fusion Parameters</h3>

<ul class="list-icon info">
	<li><em class="bold">Subtext</em> 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.</li>
	<li><em class="bold">Menu Icon</em> is the option that allows you to insert an inline icon / image to the <strong>Menu Item</strong>.</li>
</ul>

<h3>Advanced Fusion Parameters: Columns</h3>

<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>
	<li><strong>Manually:</strong> Determine the exact distribution of items across all columns in the <strong>Manual Item Distribution</strong> field. For example, if there are <strong>7</strong> menu items in <strong>3</strong> columns, you can specify a <em class="bold">4,2,1</em> distribution.</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>

<h3>Advanced Fusion Parameters: Groupings</h3>

<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>

<h3>Advanced Fusion Parameters: Modules</h3>

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

<ul class="list-icon info">
	<li><em class="bold">Inline Modules:</em> 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.</li>
	<li><em class="bold">Inline Positions:</em> 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.</li>
</ul>

<div class="module-title"><div class="module-titl2"><div class="module-title3"><h2 class="title medmargintop">Splitmenu</h2></div></div></div>

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

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

<ul class="list-icon info">
	<li><em class="bold">Subtext</em> 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.</li>
</ul>

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

<p><strong>(J15)</strong> Open <strong>/templates/rt_radiance_j15/html/modules.php</strong>:</p>
<p><strong>(J17)</strong> Open <strong>/templates/rt_radiance/html/modules.php</strong>:</p>

<p>Change</p>

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

<p>To</p>

<pre class="lines">
&lt;?php echo $menu_title_item-&gt;name; ?&gt;
</pre>

<p>Or delete the entire line.</p>

<div class="module-title"><div class="module-titl2"><div class="module-title3"><h2 class="title medmargintop">How to create Child / Sublevel menu items</h2></div></div></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>

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