Extension:MegaMenu

The MegaMenu extension adds a jQuery MegaMenu to the top of Mediawiki. It includes several configurable parameters that make use of the jQuery library of effects such as hover, fade, slide and click.

= Features =

Comes with numerous features including the ability to include video, images or in its unmodified form upto 66 menu items per parent item (if you need more reduce the font size.

jQuery offers a range of effects (see above), with more to follow in future releases.

= Compatibility =

Designed and tested using the Vector Skin only.

The initial test version worked on 1.22.2 and more recently (8th April 2014) on 1.22.5 with no problems.

The extension works with all major browsers apart from I.E 6 due to its lack of Javascript and CSS support.

= Installation =

Installation

Download the zipped folder and unpack in the extension directory.

Add the following to to LocalSettings.php

require_once("$IP/extensions/MegaMenu/MegaMenu.php");

Common.js edit

Navigate to MediaWiki:Common.js and add the following;

$(document).ready(function($){ 	$('.megamenu').megaMenuExt({ menu_speed_show : 300, menu_speed_hide : 200, menu_speed_delay : 200, menu_effect : 'open_close_slide', menu_easing : 'jswing', menu_click_outside : 1, }); });

Vector edit

Open Vector.php and find the following (around line 163);

Directly below this paste;



Find the following (around line 60);

$out->addModules( array( 'skins.vector.js', 'skins.vector.collapsibleNav' ) );

And directly above paste;

$out->addModuleScripts( 'ext.MegaMenu' );

Find the following (around line 73);

$out->addModuleStyles( $styles );

And directly below paste;

$out->addModuleStyles( 'ext.MegaMenu' );

If you are worried about making changes to Vector.php there's a copy of the modified version available to download.

Return to Mediawiki refresh the browser (Shift + Ctrl + R for Chrome and Firefox) and visit Special:Version to check that MegaMenu has installed.

= Configuration Parameters =

Change the links to suit your own needs by modifying extensions/MegaMenu/includes/MegaMenu.php

Change the layout, font and additional css by modifying extensions/MegaMenu/modules/ext.megamenu.css (Remember to Refresh!)

Change the jQuery effects by modifying Common.js. The following are available;

Menu Effects: 'hover_fade', 'hover_slide', 'click_fade', 'click_slide', 'open_close_fade', 'open_close_slide' Menu Easing: 'easeInQuad', 'easeInElastic', 'jswing',

= Version History =


 * 0.0.1 Beta - (6/4/2014) A complete core hack!


 * 0.0.2 Beta - (8/4/2014) Creation of a basic extension that uses resourceloader to add the extension modules.


 * 0.0.3 Beta - (9/4/2014) Developement complete, needs testing and feedback before making stable.

= See Also =


 * Extension:CSS MenuSidebar
 * Extension:TreeAndMenu
 * Extension:CSS_Dropdowns