Extension:MegaMenu

From MediaWiki.org
Jump to navigation Jump to search
MediaWiki extensions manualManual:Extensions
Crystal Clear action run.svg
MegaMenu

Release status:Extension status stable

ImplementationTemplate:Extension#type Skin
DescriptionTemplate:Extension#description Adds a Mega Drop-Down Menu above the content area
Author(s)Template:Extension#username Lee Miller (SwiftSystalk)
Latest versionTemplate:Extension#version 1.0.0 Stable (2014-05-22)
MediaWikiTemplate:Extension#mediawiki 1.22+
PHPTemplate:Extension#php 5.4+
Database changesTemplate:Extension#needs-updatephp No
LicenseTemplate:Extension#license GPL
Download Download
ExampleTemplate:Extension#example MegaMenu Demo

Translate the MegaMenu extension if it is available at translatewiki.net

Check usage and version matrix.

The MegaMenu extension adds a jQuery MegaMenu to the top of any MediaWiki page. It is a horizontal menu that includes several configurable parameters that make use of the jQuery library of dropdown effects such as hover, fade, slide and click. Links or other content (such as images or video) are added and configuration settings changed by editing a php file directly (no wikitext involved).

Note that this menu is separate from the normal navigation menu edited through MediaWiki:Sidebar. The extension was created for Vector although it may also work with other skins.

Features[edit]

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.

Font Awesome[edit]

From version 1.0.1 MegaMenu includes full support for Font Awesome, see demo for details, no additional install is required. Font Awesome icons can be included anywhere in Mediawiki.

Compatibility[edit]

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 and 1.22.6 (27th May 2014).

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

it does not work

Installation[edit]

IT DOES NOT WORK


  • [1] and place the file(s) in a directory called MegaMenu in your extensions/ folder.
  • Add the following code at the bottom of your LocalSettings.php:
    require_once "$IP/extensions/MegaMenu/MegaMenu.php";
    
  • Edit the "MediaWiki:Common.js" page 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,
	});
});
  • Open the "Vector.php" file and find the following (around line 163);
<div id="mw-page-base" class="noprint"></div>		
<div id="mw-head-base" class="noprint"></div>
Directly below this paste;
<?php include './extensions/MegaMenu/includes/MegaMenu.php';?>
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)
  • YesY Done – Navigate to Special:Version on your wiki to verify that the extension is successfully installed.

Configuration[edit]

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',

More jQuery effects will be available in the stable version.

Version History[edit]

  • 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.
  • 1.0.0 Stable (22/05/2014)
  • 1.0.1 Stable (27/05/2014) Font Awesome support included.

See Also[edit]