Menu Options Menu
Menu Options
- Details
- Created: 19 October 2008
- Last Updated: 14 August 2012
- Written by Super User
Versatility IV features an array of elegant, professional and exclusive menu systems. Here you can read an overview of the Versatility IV menu configuration options.
Video Tutorial Currently Available!Launch the Joomla Menu Setup Video Tutorial now!(Requires Flash)
Selecting your Menu Style
Versatility IV allows you to choose from 5 menu modes:
- RokMooMenu - The advanced menu system based on the ever popular Suckerfish menu style, featuring mootools powered transitions and effects.
- Suckerfish - The versatile dropdown menu is an option in combination with RokMooMenu to minimize library conflicts and improve site performance.
- SplitMenu - The venerable SplitMenu is a solid choice for navigation. It works by rendering the top-level menu options horizontally, and the submenu/child items are rendered in a module on the side.
- No Menu Bar - Setting the menu type to "none" will remove the horizontal menu as well as the menu bar graphics making the header flush with the main content giving you more control over the appearance of your site.
You can designate which menu type you want to use on your site with a single control in the template configuration:-
The Powerful & Popular RokMooMenu
This menu has been developed from scratch using the latest and greatest MooTools JavaScript framework. The RokMooMenu is a highly advanced and fully customizable menu system. Some of the great features include:- Hover support for IE6 using the sfHover javascript class just like in Suckerfish.
- Fully degradable to standard SuckerFish menu if javascript is not supported.
- Configurable mouse-out delay to allow for accidental mousing out of the menu.
- Completely customizable animation effects using MooTools transitions. Can be configured in X and/or Y directions.
- Support for fade-in transparency
- Experimental support for IE6 z-index bug using the iFrame hack.
<script type="text/javascript">
window.addEvent('domready', function() {
new Rokmoomenu($E('ul.menutop '), {
bgiframe: <?php echo $moo_bgiframe; ?>,
delay: <?php echo $moo_delay; ?>,
animate: {
props: ['height', 'opacity'],
opts: {
duration: <?php echo $moo_duration; ?>,
fps: <?php echo $moo_fps; ?>,
transition: Fx.Transitions.<?php echo $moo_transition; ?>
}
},
bg: {
enabled: <?php echo $moo_bg_enabled; ?>,
overEffect: {
duration: <?php echo $moo_bg_over_duration; ?>,
transition: Fx.Transitions.<?php echo $moo_bg_over_transition; ?>
},
outEffect: {
duration: <?php echo $moo_bg_out_duration; ?>,
transition: Fx.Transitions.<?php echo $moo_bg_out_transition; ?>
}
},
submenus: {
enabled: <?php echo $moo_sub_enabled; ?>,
overEffect: {
duration: <?php echo $moo_sub_over_duration; ?>,
transition: Fx.Transitions.<?php echo $moo_sub_over_transition; ?>
},
outEffect: {
duration: <?php echo $moo_sub_out_duration; ?>,
transition: Fx.Transitions.<?php echo $moo_sub_out_transition; ?>
},
offsets: {
top: <?php echo $moo_sub_offsets_top; ?>,
right: <?php echo $moo_sub_offsets_right; ?>,
bottom: <?php echo $moo_sub_offsets_bottom; ?>,
left: <?php echo $moo_sub_offsets_left; ?>
}
}
});
});
</script>
Menu Settings
- Bgiframe: Can be true or false. Only turn on if you are having problems with IE and z-index. This feature is experimental.
- Delay: Defaults to 500ms. This is the how long you can mouse off the menu before it vanishes.
- Props: These are the properties that will be applied to the menu. Can be any combination of opacity, width, height. The two properties, width and height are affected by the transition defined in opts.
- Duration: The time in ms the animation will run for.
- Transitions: Any of the available MooTools transitions. See below for more details.
For example, "Bounce.easeIn or Bounce.easeOut or Bounce.easeInOut" produce a bouncing effect. - BG: This is an added effect with Moomenu that allows a background fade (whether solid colour or image) to appear on hover of the first level Moomenu items so you will have a transition for the first level background and reveal of the second level dropdowns. With this setting, you can decide whether this feature is active as well as define the duration / transition of the moveover and mouseout state (i.e. when you hover over the menu, then move your cursor away).
- Submenu: Yet another feature in the new RokMoomenu. This appears add a javascript based hover on the submenu items of Moomenu. You can control all the necessary parts f the javascript effect form transition to duration as well as the hover state.