<img style="margin: 0px 0px 10px 10px; float: right;" src="images/yootheme/menusystem.png" alt="Menu System Overview" title="Menu System Overview" width="270" height="257" />

<p>The Warp framework provides a powerful menu system to handle menu types with different templates and styles, letting you create any interface you have in mind. Learn more about setting up the menu by reading this <a href="http://tutorials.yootheme.com/index.php?option=com_mtree&amp;task=viewlink&amp;link_id=99&amp;Itemid=2" target="_blank" title="Read how to set up the YOOmenu system">tutorial</a>.</p>

<h4>Menu Types</h4>
<p>In addition to our default menu rendering we provide two different menu types: the accordion and drop down menu. Both can be loaded by using the menu class suffix. For example, use "dropdown" or "accordion" as the menu class suffix to render the specific menu type.</p>

<h4>Subtitles</h4>
<p>Menu items can have subtitles to provide a more detailed explanation on what information a user will find. Just use the pipe character twice in your menu item name. For example, "My title || My Subtitle".  Don't worry about the Joomla search. The pipe characters are removed in the Joomla search results. Read the <a href="http://tutorials.yootheme.com/index.php?option=com_mtree&amp;task=viewlink&amp;link_id=141&amp;Itemid=2" target="_blank" title="See how to set subtitles for the menu items">tutorial</a>.</p>

<h4>JavaScript Effects</h4>
<p>Most YOOtheme menus come with lots of fancy effects like smooth transitions and fading colors. Take a look at the <a href="index.php?option=com_content&amp;view=article&amp;id=56&amp;Itemid=152#javascript">JavaScript based menus</a> provided by the Warp Framework to learn more.</p>

<h4>Background Images</h4>
<p>The menu item you set in the Joomla menu administration for each menu item will appear as the item's background image. It is also possible to load a different image for the same menu item, depending on the menu type. For example, if you have set an image "item1.jpg" for the dropdown menu and you need a smaller image in the sub menu, just place an image called "item1_alt.jpg" in the same folder. <a href="http://tutorials.yootheme.com/index.php?option=com_mtree&amp;task=viewlink&amp;link_id=102&amp;Itemid=2" target="_blank" title="Read how to set a menu item background image">Learn more...</a></p>

<h4>Page Color</h4>
<p>A page color can be set individually for each menu item. That way, you can style every page linked to from a menu item independently. For example, use "itemcolor-black" as the page class suffix and the CSS class black will appear in the body tag of that page. <a href="http://tutorials.yootheme.com/index.php?option=com_mtree&amp;task=viewlink&amp;link_id=101&amp;Itemid=2" target="_blank" title="Learn how to change the site color for each menu item.">video tutorial</a>.</p>

<hr class="dotted" />

<h2>Drop Down Menu</h2>
<p>Use "dropdown" as the menu class suffix and publish the menu in the "menu" position to load the drop down menu.</p>

<div class="floatbox">

	<div class="float-left width50">
		<div style="margin-right: 15px;">
			<h3>Multi columns</h3>
			<p>The number of columns in the drop down area can be set individually for each menu item to suit any of your needs. For example, use "columns-2" in the page class suffix and the drop down menu of this menu item will have two columns. This way you can define different drop down columns for each menu item.</p>
		</div>
	</div>
	
	<div class="float-left width50">
		<h3>Flexible drop down width</h3>
		<p>To keep CSS modification as simple as possible, we provide a template parameter for the column width of the drop down menu. You can set the column width in the template configuration.</p>
	</div>
	
</div>

<div class="floatbox">

	<div class="float-left width50">
		<div style="margin-right: 15px;">
			<h3>JavaScript</h3>
			<p>Moves the drop down area out with a smooth transition. The drop down area also remains visible for some milliseconds when the mouse leaves it unintendedly. And of course, the menu keeps fully functional if JavaScript is disabled.</p>
		</div>
	</div>
	
	<div class="float-left width50">
		<h3>Drop Down Module Position</h3>
		<p>You can mix the drop down menu with any Joomla module by publishing it in the "menu" position. The login module, for example. The module will drop down and look like it is part of the menu.</p>
	</div>
	
</div>

<hr class="dotted" />

<h2>Accordion Menu</h2>
<p>Use "accordion" as the menu class suffix and publish the menu (for example, in the "left" or "right" position) to load the accordion menu.</p>

<p>A smooth accordion effect can be applied to the sub menu when using a menu item "separator". Closed/Opened state and two different sliding modes are supported. <a href="http://tutorials.yootheme.com/index.php?option=com_mtree&amp;task=viewlink&amp;link_id=108&amp;Itemid=2" target="_blank" title="Get to know how to set up the accordion menu">Learn more</a>.</p>