Refraction Menu Options

Note: RokNavMenu is an essential module for the template. It is required for the modules to work so ensure that you install it into Joomla.

Refraction features an array of elegant, professional and exclusive menu systems. Here you can read an overview of the Refraction menu configuration options.

Selecting your Menu Style

Refraction allows you to choose from 4 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.

DropColum Menu

A brand new menu function, the Multiple Drop Column ability. This applies only to MooMenu and Suckerfish and allows for multiple drop down columns instead of the typical single variant. The advanced options with this feature, allow you to choose the number of columns, specify individual menu levels which exhibit the behaviour and restrict the number of columns per row. A truly versatile new feature as showcased on this demo.

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

An example configuration as used in the demo:

MooMenu bgIFrame	No Yes
MooMenu Delay
MooMenu Duration
MooMenu FPS
MooMenu Transition	linearQuad.easeOutQuad.easeInQuad.easeInOutCubic.easeOutCubic.easeInCubic.easeInOutQuart.easeOutQuart.easeInQuart.easeInOutQuint.easeOutQuint.easeInQuint.easeInOutExpo.easeOutExpo.easeInExpo.easeInOutCirc.easeOutCirc.easeInCirc.easeInOutSine.easeOutSine.easeInSine.easeInOutBack.easeOutBack.easeInBack.easeInOutBounce.easeOutBounce.easeInBounce.easeInOutElastic.easeOutElastic.easeInElastic.easeInOut
MooMenu Background Effect	No Yes
MooMenu Over Background Duration
MooMenu Over Background Transition	linearQuad.easeOutQuad.easeInQuad.easeInOutCubic.easeOutCubic.easeInCubic.easeInOutQuart.easeOutQuart.easeInQuart.easeInOutQuint.easeOutQuint.easeInQuint.easeInOutExpo.easeOutExpo.easeInExpo.easeInOutCirc.easeOutCirc.easeInCirc.easeInOutSine.easeOutSine.easeInSine.easeInOutBack.easeOutBack.easeInBack.easeInOutBounce.easeOutBounce.easeInBounce.easeInOutElastic.easeOutElastic.easeInElastic.easeInOut
MooMenu Out Background Duration
MooMenu Out Background Transition	linearQuad.easeOutQuad.easeInQuad.easeInOutCubic.easeOutCubic.easeInCubic.easeInOutQuart.easeOutQuart.easeInQuart.easeInOutQuint.easeOutQuint.easeInQuint.easeInOutExpo.easeOutExpo.easeInExpo.easeInOutCirc.easeOutCirc.easeInCirc.easeInOutSine.easeOutSine.easeInSine.easeInOutBack.easeOutBack.easeInBack.easeInOutBounce.easeOutBounce.easeInBounce.easeInOutElastic.easeOutElastic.easeInElastic.easeInOut
MooMenu Submenus Effect	No Yes
MooMenu Submenu Over Background Duration
MooMenu Submenu Over Background Transition	linearQuad.easeOutQuad.easeInQuad.easeInOutCubic.easeOutCubic.easeInCubic.easeInOutQuart.easeOutQuart.easeInQuart.easeInOutQuint.easeOutQuint.easeInQuint.easeInOutExpo.easeOutExpo.easeInExpo.easeInOutCirc.easeOutCirc.easeInCirc.easeInOutSine.easeOutSine.easeInSine.easeInOutBack.easeOutBack.easeInBack.easeInOutBounce.easeOutBounce.easeInBounce.easeInOutElastic.easeOutElastic.easeInElastic.easeInOut
MooMenu Submenu Out Background Duration
MooMenu Submenu Out Background Transition	linearQuad.easeOutQuad.easeInQuad.easeInOutCubic.easeOutCubic.easeInCubic.easeInOutQuart.easeOutQuart.easeInQuart.easeInOutQuint.easeOutQuint.easeInQuint.easeInOutExpo.easeOutExpo.easeInExpo.easeInOutCirc.easeOutCirc.easeInCirc.easeInOutSine.easeOutSine.easeInSine.easeInOutBack.easeOutBack.easeInBack.easeInOutBounce.easeOutBounce.easeInBounce.easeInOutElastic.easeOutElastic.easeInElastic.easeInOut
MooMenu Submenu Top offset
MooMenu Submenu Right offset
MooMenu Submenu Bottom offset
MooMenu Submenu Left offset

Menu Type	MooMenu SuckerFish SplitMenu Toolbar Module Position No Horizontal Menu Bar
Drop Down Rows Per Column
Drop Down Columns
Multi-Column Level
Menu Name
MooMenu BGI Frame	No Yes
MooMenu Delay
MooMenu Duration
MooMenu FPS
MooMenu Transition	linear Quad.easeOut Quad.easeIn Quad.easeInOut Cubic.easeOut Cubic.easeIn Cubic.easeInOut Quart.easeOut Quart.easeIn Quart.easeInOut Quint.easeOut Quint.easeIn Quint.easeInOut Expo.easeOut Expo.easeIn Expo.easeInOut Circ.easeOut Circ.easeIn Circ.easeInOut Sine.easeOut Sine.easeIn Sine.easeInOut Back.easeOut Back.easeIn Back.easeInOut Bounce.easeOut Bounce.easeIn Bounce.easeInOut Elastic.easeOut Elastic.easeIn Elastic.easeInOut
MooMenu Background Effect	No Yes
MooMenu Over Background Duration
MooMenu Over Background Transition	linear Quad.easeOut Quad.easeIn Quad.easeInOut Cubic.easeOut Cubic.easeIn Cubic.easeInOut Quart.easeOut Quart.easeIn Quart.easeInOut Quint.easeOut Quint.easeIn Quint.easeInOut Expo.easeOut Expo.easeIn Expo.easeInOut Circ.easeOut Circ.easeIn Circ.easeInOut Sine.easeOut Sine.easeIn Sine.easeInOut Back.easeOut Back.easeIn Back.easeInOut Bounce.easeOut Bounce.easeIn Bounce.easeInOut Elastic.easeOut Elastic.easeIn Elastic.easeInOut
MooMenu Out Background Duration
MooMenu Out Background Transition	linear Quad.easeOut Quad.easeIn Quad.easeInOut Cubic.easeOut Cubic.easeIn Cubic.easeInOut Quart.easeOut Quart.easeIn Quart.easeInOut Quint.easeOut Quint.easeIn Quint.easeInOut Expo.easeOut Expo.easeIn Expo.easeInOut Circ.easeOut Circ.easeIn Circ.easeInOut Sine.easeOut Sine.easeIn Sine.easeInOut Back.easeOut Back.easeIn Back.easeInOut Bounce.easeOut Bounce.easeIn Bounce.easeInOut Elastic.easeOut Elastic.easeIn Elastic.easeInOut
MooMenu Submenus Effect	No Yes
MooMenu Submenus Max Opacity (0 to 1)
MooMenu Submenu Over Background Duration
MooMenu Submenu Over Background Transition	linear Quad.easeOut Quad.easeIn Quad.easeInOut Cubic.easeOut Cubic.easeIn Cubic.easeInOut Quart.easeOut Quart.easeIn Quart.easeInOut Quint.easeOut Quint.easeIn Quint.easeInOut Expo.easeOut Expo.easeIn Expo.easeInOut Circ.easeOut Circ.easeIn Circ.easeInOut Sine.easeOut Sine.easeIn Sine.easeInOut Back.easeOut Back.easeIn Back.easeInOut Bounce.easeOut Bounce.easeIn Bounce.easeInOut Elastic.easeOut Elastic.easeIn Elastic.easeInOut
MooMenu Submenu Out Background Duration
MooMenu Submenu Out Background Transition	linear Quad.easeOut Quad.easeIn Quad.easeInOut Cubic.easeOut Cubic.easeIn Cubic.easeInOut Quart.easeOut Quart.easeIn Quart.easeInOut Quint.easeOut Quint.easeIn Quint.easeInOut Expo.easeOut Expo.easeIn Expo.easeInOut Circ.easeOut Circ.easeIn Circ.easeInOut Sine.easeOut Sine.easeIn Sine.easeInOut Back.easeOut Back.easeIn Back.easeInOut Bounce.easeOut Bounce.easeIn Bounce.easeInOut Elastic.easeOut Elastic.easeIn Elastic.easeInOut
MooMenu Submenu Top offset
MooMenu Submenu Right offset
MooMenu Submenu Bottom offset
MooMenu Submenu Left offset