MediaWiki:Common.css

2026-08-27T00:06:26Z

Admin:

2026-08-26T01:50:56Z

Admin:

/*
===============================================================================
EXUVIA WIKI SIDEBAR DROPDOWNS
===============================================================================

The sidebar contains the top-level navigation:

Locations
Religions
People
World Building

The JavaScript turns those entries into expandable menus.

Each dropdown's contents are defined HERE.

To add another dropdown later, add another entry to the "menus" object.

===============================================================================
*/

$( function () {

/*
===========================================================================
DROPDOWN CONTENT
===========================================================================

Each key must exactly match the text of a sidebar entry.

The value is an array containing the pages that should appear underneath
that entry.

Example:

Locations: [
'Continents',
'Kingdoms',
'Towns'
]

creates:

Locations ▼
Continents
Kingdoms
Towns

===========================================================================
*/

var menus = {

Locations: [
'Continents',
'Kingdoms',
'Towns'
]

/*
Add future dropdowns here.

Example:

Religions: [
'The Valor',
'The Brumal'
],

People: [
'High Lord Kip',
'Queen Melena'
],

'World Building': [
'History',
'Magic',
'War'
]
*/

};

/*
===========================================================================
FIND THE TIMELESS SIDEBAR
===========================================================================
*/

var sidebar = $( '#mw-site-navigation' );

if ( !sidebar.length ) {
return;
}

/*
===========================================================================
PROCESS EACH DROPDOWN
===========================================================================
*/

Object.keys( menus ).forEach( function ( menuName ) {

/*
Find the sidebar link whose visible text matches the menu name.
*/

var mainLink = sidebar.find( 'a' ).filter( function () {
return $.trim( $( this ).text() ) === menuName;
} ).first();

/*
If the sidebar entry doesn't exist, skip it.
*/

if ( !mainLink.length ) {
return;
}

/*
Find the <li> containing the sidebar link.
*/

var parent = mainLink.closest( 'li' );

/*
Create the dropdown list.
*/

var dropdown = $( '<ul>' )
.addClass( 'exuvia-dropdown-menu' );

/*
Add each page to the dropdown.
*/

menus[ menuName ].forEach( function ( pageName ) {

var link = $( '<a>' )
.attr( 'href', mw.util.getUrl( pageName ) )
.text( pageName );

var item = $( '<li>' )
.append( link );

dropdown.append( item );

} );

/*
Add the dropdown underneath the main navigation item.
*/

parent.append( dropdown );

/*
Hide the dropdown when the page first loads.
*/

dropdown.hide();

/*
Make the main navigation item behave like a button.

Clicking it opens or closes the dropdown instead of opening a page.
*/

mainLink.on( 'click', function ( event ) {

event.preventDefault();

dropdown.stop( true, true ).slideToggle( 150 );

} );

/*
Add an arrow so users know that this item expands.
*/

mainLink.append(
$( '<span>' )
.addClass( 'exuvia-dropdown-arrow' )
.text( ' ▼' )
);

} );

} );