Search / Login

Quick Links:
Latest Releases
Browse by Artist
Love and Rockets Guide
Peanuts books
Disney books
More browsing options under "Browse Shop" above


Search: All Titles

Advanced Search
Login / Free Registration
Detail Search
Download Area
Show Cart
Your Cart is currently empty.

Subscribe

Sign up for our email newsletters for updates on new releases, events, special deals and more.

Versatility III Menu Options Print
Saturday, 31 March 2007

Selecting your Menu Style

Versatility III allows you to choose from 2 menu options:

  • SplitMenu - Then 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.
  • RokMooMenu - The exciting new menu system based on the ever popular Suckerfish menu style, featuring mootools powered transitions and effects.

You can designate which menu style you want to use on your site with a single control in the template's index.php file which is editable via the Joomla Administrator as well as in an external text editor.

$menu_type = "moomenu";	 // splitmenu | moomenu | module

The All New RokMooMenu

Brand new for Versatility III, is the 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 is accessible and degrades to a standard SuckerFish menu if JavaScript is not enabled or supported. 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:

<script type="text/javascript">
window.addEvent('domready', function() {
	new rokmoomenu($E('ul.nav'), {
		bgiframe: false,
		delay: 500,
		animate: {
			props: ['opacity', 'width', 'height'],
			opts: {
				duration:400,
				fps: 100,
				transition: Fx.Transitions.sineOut
			}
		}
	});
});
</script>

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.

fps

- speed of the animation - leave at 100 for best results.

transition

- any of the available MooTools transitions. See below for more details.

The transition variable can be any of the following MooTools transitions and should be in the format ìFx.Transitions.?????î

linear
quadIn
quadOut
quadInOut
cubicIn
cubicOut
cubicInOut
quartIn
quartOut
quartInOut
quintIn
quintOut
quintInOut
sineIn
sineOut
sineInOut
expoIn
expoOut
expoInOut
circIn
circOut
circInOut
elasticIn
elasticOut
elasticInOut
backIn
backOut
backInOut
bounceIn
bounceOut
bounceInOut

Using RokMooMenu Menu DropDowns

Assigning Parent Items to Create Your Drop-Downs

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.

  • Navigating to the Menu area
    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.

    Suckerfish
  • The Menu Manager
    You will then be transported to the Menu Manager for mainmenu. At this point, you can do 2 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.

    Suckerfish
  • Assigning the Parent item
    Now that you are in the editor for the individual content item, you can then assign it to the mainmenu item in which you want the dropdown menu with your intended item to be place. 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".

    Suckerfish

Versatility III Top Menu

Versatility III also features custom styling and positioning for a handy Top Menu giving you some extra navigation options for your visitors. The Versatility III template also includes a set of icons that are perfect for drawing attention to these extra menu options.

Top Menu

To set up your Top Menu for the Versatility III template, follow these steps:

  • From the Joomla Administrator, select Modules then Site Modules. This will take you to the Site Module Manager which allows you to configure the placement and configuration of all modules in your joomla website. Find the module named Top Menu and click on it to enter its configuration.
  • In the Top Menu configuration Details section, set Show Title to "No", set Position to "top", and set Published to "Yes"
  • In the Top Menu configuration Parameters section, set Menu Style to "Flat List", set Show Menu Icons to "Yes", and set Menu Icon Alignment to "Left"
  • If your Module Class Suffix field has "-nav" in it, be sure to Remove this suffix in order for the Top Menu to function properly.

Now your Top Menu module is published in the Top module position and will display your menu in the top right hand corner of the template. Next, you will need to set up your icons so that they will be displayed next to your top menu links. You can do this by following these steps:

  • Place your icon images you wish to use in the images/stories folder in your joomla install. The Versatility III release includes a Source PNG file (versatilityiii_icons.png) that contains a wide selection of icons you can use. You can either export these images to the images/stories folder, or create your own and place them in the images/stories folder.
  • From the Joomla Administrator, select Menu then Menu Manager. This will take you to the list of available menus. Click the menu item icon to the right of "topmenu". This will list out all of the menu items in the "topmenu". You can add or delete your top menu items here, as well as configure their settings.
  • Click on one of the topmenu menu items (for example, Home), this will bring up the Edit Menu Item screen. In the "Parameters" panel in the right column, there is a "Menu Image" dropdown selector. The icons you placed in the images/stories folder will show up in this dropdown, select the one you wish to use for this menu item and click Save at the top. Repeat this for each of your menu items in the "topmenu".

Now your Top Menu is properly configured and will display in the top right corner of the template with icons to the left of each of the menu links as seen in the Versatility III demo.

Last Updated ( Tuesday, 01 May 2007 )