Extension:CSS Dropdowns
From MediaWiki.org
 Release status: unknown |
|
|---|---|
 |
|
| Implementation | Skin |
| Description | CSS based drop-downs for MediaWiki to live in the Sitenotice (the area at the top of the page) They are pure CSS (no javascript!!) and work in IE7 and Gecko based browsers like Firefox. In addition the edges are rounded in Gecko based browsers. |
| Author(s) | Michael180 |
| Download | no link |
Michael180 has developed CSS based drop-downs for MediaWiki to live in the Sitenotice (the area at the top of the page) They are pure CSS (no javascript!!) and work in IE7 and Gecko based browsers like Firefox. In addition the edges are rounded in Gecko based browsers.
This is how I have built, and how you can implement my pure CSS dropdowns in the Sitenotice of MediaWiki This is supported only in modern browsers like Internet Explorer 7 and Firefox. Sorry, but no support for IE6, due to its bad CSS support. 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.
[edit] 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 recommend 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 browsers 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.
[edit] 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.
[edit] See also
- Extension:CSS for handling CSS modifications from a MediaWiki article rather than altering the filesystem
