ThePlaz.com's Dropdowns for MediaWiki
From ThePlaz.com
Original Feature
I recently received an inquiry wondering how I built my dropdowns in the Sitenotice. (See Above, currently only working in Firefox) So, I pulled out my keyboard and began to type out a response....
Introduction
The pull down menu is located at MediaWiki:Sitenotice. The site notice (and the MediaWiki:Anonnotice when not logged in) is a space to put messages that you want on every page on your site. The Wikimedia Foundation uses it to announce elections and stuff, but I configured it to add the drop downs. I coded most of it by hand, copying parts from the Stylin' with CSS Book (A really good book, I highly recomended it to CSS beginners, as well as The Zen of CSS Design)
It is pure CSS, meaning it works without JavaScript, a plus, but does not work (yet) in IE. I am trying to find a way to fix that. Only the top level appears in IE, so users can click to directed to another page, but no dropdowning, meaning it degrades nicely. Also a plus, non-CSS browers can see all of the links in a normal unordered list.
Adding it to your site
You need the CSS from http://theplaz.com/wiki/skins/common/dropdown/drop_down_menus.css to power the menus. Add this to MediaWiki:Common.css. On my site, I do it a bit differently, but copying it to there should work. (If not, send me a message)
To call the dropdowns, copy this to your MediaWiki:Sitenotice
<ul id="sitenotice_nav" style="list-style-type: none; list-style-image:
none;-moz-border-radius-topright: 1em;-moz-border-radius-topleft: 1em;
-moz-border-radius-bottomright: 1em; -moz-border-radius-bottomleft: 1em;
background:#F1F1CB;margin:7px -2px -2px -2px;padding:0;">
<li>[[Template:Drop Down:Pizza]]{{Drop Down:Pizza}}</li>
<li>[[Template:Drop Down:Ice Cream]]{{Drop Down:Ice Cream}}<li>
</ul>
Make the pages Template:Drop Down:Pizza and Template:Drop Down:Ice Cream. On those pages use this format for your links.
*[[Cheese Pizza|Cheese]] *[[Pepperoni Pizza|Pepperoni]]
You should now have a drop down where the top level links to the list page for IE users and drop downs for Firefox users. To add more links just edit Template:Drop Down:Pizza. To add more drop downs, edit MediaWiki:Sitenotice, and add a <li> line like the example above.
You can also edit the CSS to change colors or shapes or add pictures.
I hope this answers your question.--Plaz 17:36, 8 September 2006 (EDT)
- This document is running on a wiki, that means you can change and add information by just hitting "edit" up top. (free account required)
- Contact the author: Leave Plaz a (public) message
or send me a (private) e-mail.
Email Me
