ThePlaz.com's Dropdowns for MediaWiki

From ThePlaz.com

Jump to: navigation, search
ThePlaz-com.png Original Feature


This drop down extension has been depreciated. A new one is found here: Nuvola Skin. This MediaWiki:Sitenotice extension does not work in IE8 because IE8 is surprisingly strict with tag nesting. The new one would not work using Sitenotice (due again to tag nesting), so I hard coded the links into a new skin. I have not written all the instructions for Nuvola Skin; feel to mail me if you don't understand how to use either extension.

Version 2.0 now supports up to 4 nested levels. (Shown in Firefox 2 on Win XP

I have built pure CSS dropdown menus. They support up to 4 levels of drop downs and degrade nicely in old browsers. There is no Javascript and they can be styled to match your site or kept in the default minimalistic style (which requires no pictures). In Gecko based browsers like Firefox the edges appear rounded. In other browsers, the box appears, well boxy. Also note, this does not work in Internet Explorer 6, however it will display the first level of navigation.

They work best (and were designed for) when placed in the Sitenotice of MediaWiki [1] Here they can be edited in the database (no coding necessary) just like any other page. In fact, you can install them without changing any code or requiring file access. No special divs, spans, classes or ids are required at all! You can even use the nested bullets of MediaWiki to configure the list. No fooling around with <li>s

Contents

Introduction

These are designed to be in the 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 hold the drop downs. I customize most of it by hand, copying parts from the Stylin' with CSS Book (A really good introduction book, I highly recommend it to CSS beginners, as well as The Zen of CSS Design which dives into the design of websites (using CSS) but does not focus on learning to code)

It is pure CSS, meaning it works without JavaScript, a plus as more and more people turn off javascript for security reasons. However, it 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, as it's going away.) In IE6, only the top level bar appears, so users can click that to directed to another page, but no dropdowning. I consider this to mean 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/wiki/skins/common/dropdown/drop_down_menus.css to power the menus. This version has comments to make it easy easier to edit. Use http://theplaz.com/wiki/skins/common/dropdown/optimized_drop_down_menu.css on production sites to have it download faster (about 50% faster). If you've customized the code, use CSStidy to strip out the comments and optimize the CSS for fast downloads. Add this output 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. You can use just nested bullets (*) if you choose not to use templates or nest the bullets the same amount in the template (not recommended)

<ul>
<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 IE6 users and drop downs for Firefox users. To add more links in a dropdown just edit Template:Drop Down:Pizza. To add more drop downs, edit MediaWiki:Sitenotice, and add a <li> line like the example above.

Nesting

Simply nest the CSS <ul> and <li>s to created furnter nested lists. For example, this has everything on one page to make it simpler, but you can use the same template based method as above to seperate out the sections (and have it degrade nicely).

<ul>
*[[Pizza]]
**[[Small]]
***[[Cheese Pizza|Cheese]]
***[[Pepperoni Pizza|Pepperoni]]
**[[Medium]]
***[[Cheese Pizza|Cheese]]
***[[Pepperoni Pizza|Pepperoni]]
*[[Pizza]]
**[[Small]]
***[[Cheese Pizza|Cheese]]
***[[Pepperoni Pizza|Pepperoni]]
*[[Ice Cream]]
**[[Small]]
***[[Vanilla]]
***[[Chocolate]]
</ul>


Colors/Styles

You can also edit the CSS to change colors or shapes or add pictures. I am not going to go into that here at this time.

IE7 Bug and Support

Special Doctored Photo showing behavior in IE7. The left drop down has a child, while the right one does not.

IE 7 has a weird bug. For some reason it does displays the drop downs which have another frop down differently. All I could get to work was this weird workaround. Dropdowns which have another one slide out from it cover up the original text and drop downs with no children havce extra space between them

Tested

  • Gecko based browsers (like Firefox and Netscape) - fully suppported with curved edges
  • IE 6 on Win XP - Blocky, with left border rendering defect, no dropdowns
  • IE 7 on Win XP - Works (with extra script, see above) except for a little rendering bug. Also it's blocky as in IE 6
  • IE8 NOT WORKING - Because of the way MediaWiki (1.15.0 tested) nests li output incorrectly and that IE8 is super strict, it will not render correctly. That is why I rewrote drop downs and why this system is depreciated.
  • Safari - mostly works, blocky, except for a few very small layout bugs (see below)
  • KDE (Linux) browser - works fine
  • Text based browser - degrades nicely (as nested unordered lists)

Not Tested

Nice degradation with no CSS

Some things in the code are untested. I have marked some of them in the comments. Also I haven't tested in Opera, on a Mac (Safari, FF Mac), or on old browsers.

Not Working

  • Netscape Navigator 4 makes a total mess of it (along with most modern websites)

Open Issues

IE6 (Win XP) Behavior
  • Partial left border in IE6
  • That display bug in IE
  • The source order comes before the text, meaning non-advanced browsers have to scroll past it each time, a pain for cell phones and text browsers. If someone is able to position it at the end of the source order and absolutely position it back up, tell me. Also if someone jets it to load AJAX-ly, tell me too.
  • Last drop-down is 1px out (which side or both?) in Safari and sub-sub-menu need to be moved 1 px down

Old Versions

  • Version 2.0 (This version)
    • Nesting more then 1
    • Style improvements and clean up
    • Optimized code
  • Version 1.0
    • first release

Contact