Thursday, September 21, 2017
   
Text Size

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.

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

Video Tutorial Currently Available! Launch the Joomla Menu Setup Video Tutorial now!

Selecting your Menu Style

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

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


For more details with diagrams, visit the Mootools documentation site

Creating the dropdown menu items

To have specific menu items appear as sub items, you must assign them to the specific navigation item in which they will originate from. The following tutorial will show you how simple it is to create your ideal menu system.

Step 1 - Navigation

Once you have logged into the Joomla! Administration Area, you must navigate to the Menu area. Hover over the Menu item in the taskbar to show the dropdown menu. For this example, we are going into the mainmenu but the technique is exactly the same for all menus in the Administrative area.

Step 2 - The Menu Manager

You will then be transported to the Menu Manager for mainmenu. At this point, you can do two things. The first is to edit an existing menu item, which we will be doing in this tutorial or create a New menu item to be subordinate to an existing item. Click on the item you want to be part of the dropdown menu.

Step 3 - Assigning a Parent Item

You can now assign the content item to the mainmenu item in which you want to be in the dropdown menu. Identify the "Parent Item" section of the manager. You will select the item in which you wish to be the parent and the source of the dropdown menu. In this example, we have selected "Home".
Restore Default Settings