Extension:MenuTabs

From MediaWiki.org
Jump to: navigation, search
Wikimedia-logo-meta.png

This page was moved from MetaWiki.
It probably requires cleanup – please feel free to help out. In addition, some links on the page may be red; respective pages might be found at Meta. Remove this template once cleanup is complete.

MediaWiki extensions manualManual:Extensions
Crystal Clear action run.png
MenuTabs

Release status:Extension status experimental

DescriptionTemplate:Extension#description Create pages with "Tabs"
Author(s)Template:Extension#username Robert Castley
LicenseTemplate:Extension#license unknown
Download No link

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

Check usage and version matrix.

Update[edit]

The extension has been modified to work with any skin/template without modification to any CSS files as the CSS is now embedded into the extension itself

Introduction[edit]

Whilst building our internal Wiki it became apparent to those new to the idea that navigation could be improved upon. A member of my team loved the way that http://www.apple.com top menu navigation system worked i.e. you have a main menu with sub menu items underneath. I was asked as to whether this could be replicated in MediaWiki and so set about the task. The fruits of my labour are detailed below. The credit for the CSS code goes to http://labs.silverorange.com/archives/2004/may/updatedsimple

Robert Castley

Extension Code[edit]

Copy the following code into a file called MenuTabs.php and save this in the extensions directory:

<?php
# To activate the extension, include it from your LocalSettings.php
# with: include("extensions/MenuTabs.php");

$wgExtensionFunctions[] = "wfMenuTabs";

$wgExtensionCredits['other'][] = array(
'name' => 'MenuTabs',
'author' => 'Robert Castley',
'description' => 'allows for the creation of a menu navigation bar on each page if desired ');

function menuTabsCSS() {
	global $wgOut;
	$css = <<<eof
<style type="text/css">
#main { border-top: 1px solid #666; clear: both; width: 100%; }
#contents { background: #9aa4b3; border-top: 2em solid #e6f0ff; }
#header { position: relative; width: 100%; height: 2em; width: 45em; }
#header ul#primary { margin: 0; padding: 0; position: absolute; bottom: -1px; left: 20px; width: 45em; }
#header ul#primary li { display: inline; list-style: none; }
#header ul#primary a,#header ul#primary span,#header ul#primary a.current, #header ul#primary strong {
        width: auto; display: block; float: left; padding: 4px 0px; padding-left: 4px;
        padding-right: 4px; margin-top: 1px; margin-right: 2px; text-align: center; font-family: Arial;
        font-size: 85%; text-decoration: none; color: #333; }
#header ul#primary span,#header ul#primary a.current,#header ul#primary a.current:hover, #header ul#primary strong {
        border: 1px solid #666; border-bottom: none; background: #e6f0ff;
        padding-bottom: 6px; padding-left: 4px; padding-right: 4px; margin-top: 0; }
#header ul#primary a { background: #bbc8da; border: 1px solid #AAA; border-bottom: none; }
#header ul#primary a:hover { margin-top: 0; border-color: #666; background: #FFF7CD; padding-bottom: 5px; }
#header ul#secondary { position: absolute; margin: 0; padding: 0; bottom: -1.4em; left: 1px; width: 50em; }
#header ul#secondary li a,#header ul#secondary li span ,#header ul#secondary li strong {
        width: auto; display: block; float: left; padding: 0 5px;
        margin: 0; text-align: center; border: none; border-left: 1px dotted #AAA;
        background: none; }
#header ul#secondary li a { color: #06C; text-decoration: underline; }
#header ul#secondary li a:hover { color: #333; background: transparent; padding: 0 5px; border: none;
        border-left: 1px dotted #AAA; }
#header ul#secondary li a:active { color: #333; font-weight: normal; background: transparent; }
#header ul#secondary li:first-child a, #header ul#secondary li:first-child span { border: none; }
</style>
eof;
	$wgOut->addHTML($css);
}

function wfMenuTabs() {
	global $wgParser;
	menuTabsCSS();
	$wgParser->setHook( "maintab", "renderMainTab" );
	$wgParser->setHook( "subtab", "renderSubTab" );
}


function renderMainTab( $input ) {
	global $wgOut;
	global $wgTitle;
	global $wgRequest;
	global $wgUser;
	global $wgParser;
	$parserOptions = ParserOptions::newFromUser( $wgUser );
	$parser = & new Parser();
	$item = '';
	$title = $wgRequest->getVal( 'title' );
	$title = preg_replace("/_/", " ", $title);
	$fields = explode("||",$input);
	$prepend = "<div id=\"header\">\n";
	$prepend .= "<ul id=\"primary\">\n";
	foreach ($fields as $field) {
		if ($title == $field) {
			$item .= "<li><span>$field</span></li>\n";
		} else {
			$item .= "<li>$field</li>\n";
		}
	}
	$output = & $parser->parse($item, $wgTitle, $parserOptions);
	$linkoutput = $output->getText();
	return $prepend . $linkoutput;
}

function renderSubTab( $input ) {
	global $wgOut;
	global $wgTitle;
	global $wgRequest;
	global $wgUser;
	global $wgParser;
	$parserOptions = ParserOptions::newFromUser( $wgUser );
	$parser = & new Parser();
	$item2 = '';
	$fields2 = explode("||", $input);
	$prepend = "<ul id=\"secondary\">\n";
	foreach ($fields2 as $field2) {
		if ($field2 != '') {
			$item2 .= "<li>$field2</li>\n";
		}
	}
	$output = & $parser->parse($item2, $wgTitle, $parserOptions);
	$linkoutput = $output->getText();
	$append = "</ul>\n";
	$append .= "</ul>\n";
	$append .= "</div>\n";
	$append .= "<div id=\"main\">\n";
	$append .= "<div id=\"contents\"></div>\n";
	$append .= "</div>\n";
	return $prepend . $linkoutput . $append;
}

Then add this include statement to your LocalSettings.php:

include("extensions/MenuTabs.php");

Troubleshooting[edit]

I've encountered problems using this extension with mediawiki 1.7.1 ... each tag is parsed like this : &lt /li &gt ... This cause the extension not working ...

In order to bypass this problem I've add the two following lines just after each $linkoutput = $output->getText(); lines in the source code listed before :

$linkoutput = str_replace ( '<', '<', $linkoutput );
$linkoutput = str_replace ( '>', '>', $linkoutput );

Hope this could help :)

Best Regards, KlinT ( klint@klintcentral.net )

With mediawiki 1.8.2 the extension don't work with and without the two lines above. Can anyone help?

Yes check the mod on the discussion page, that worked for me in 1.8.2. The above mod didn't. Rune.
Thanks

Alternate method:
Step1: Remove the '||' between menu items
eg: <maintab>[[Main Page|Home]][[Professional Services]][[Sales]][[Software]][[Support]][[Corporate]]</maintab><br> <subtab>[[PS Best Practices]][[Documentation]][[Training]]</subtab>

Step 2: Replace
         $item .= "<li>$field</li>\n";

with
          $item .= "<li>$field\n";

Usage[edit]

To generate your tabs you use the tags <maintab>...</maintab> and <subtab>...</subtab>. BOTH MUST BE USED TOGETHER EVEN IF SUBTABS DO NOT EXIST e.g.

Main Tabs with Sub Tabs[edit]


<maintab>[[Main Page|Home]]||[[Professional Services]]||[[Sales]]||[[Software]]||[[Support]]||[[Corporate]]</maintab>
<subtab>[[PS Best Practices]]||[[Documentation]]||[[Training]]||[[Group Services]]||[[Webinars]]||[[Cool Tools]]</subtab>

Main Tabs with empty Sub Tabs[edit]


<maintab>[[Main Page|Home]]||[[Professional Services]]||[[Sales]]||[[Software]]||[[Support]]||[[Corporate]]</maintab>
<subtab></subtab>

Example[edit]

You should then end up with something looking similar to the following screenshot:

File:MenuTabs.png

File:MenuTabs2.png

File:MenuTabs3.png

Usage in a production Wiki[edit]

The way I have implemented this into our Wiki is to add MenuTab code into a template and then include that template on each Wiki page. Therefore, every single page in the Wiki has it's own nice CSS tabbed navigation to take you to key areas within the Wiki.