ThePlaz.com's Dropdowns for MediaWiki/Version 1.0
From ThePlaz.com
Old Version!
This is version 1.0 of the dropdowns. A newer version is now out. See this page for a current version.
Original Feature
Update: I just downloaded IE7 and the CSS drop downs work without any modification. IE7 added the CSS support for "Enable :hover on all elements not just on <a>" [1]. I also installed KDE (Linux) and it works in its native browser. This is in addition Firefox which I always knew it worked in. It still doesn't work in IE6 and I have no plans to support that now that IE7 is out for XP and soon Vista. If anyone can get it to work in IE6, send me, or post here, the code. Thanks Plaz 12:01, 5 November 2006 (EST)
This is how I built, and how you can implement my pure CSS dropdowns in the Sitenotice of MediaWiki [2] This is supported only in modern browsers like Internet Explorer 7 and Firefox. Sorry, but no support for IE6. Remember these are pure CSS menus, no Javascript needed.
In addition, in Gecko based browsers like Firefox the edges appear rounded. In other browsers, the box appears, well boxy.
Introduction
The pull down menu is written in 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 in IE6. I am trying to find a way to fix that. (I am not going to try to make it work in IE6.) In dumb browsers, only the top level appears, 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. Unfortunately they will need to scroll by these on every page, making it a pain to be using really old browsers (Netscape 4.x and text-only ones, for example) as well as most cell-phones.
Adding it to your site
You need the CSS from http://theplaz.com/static/dropdowns/1.0/drop_down_menus.css to power the menus. This version has comments to make it easy easier to edit. Use http://theplaz.com/static/dropdowns/1.0/optimized_drop_down_menu.css instead to have it download faster (about 50% faster). You can add this to MediaWiki:Common.css. On my site, I link to it directly, 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 helps.--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
