Extension:CSS Dropdowns

Extension:CSS Dropdowns allows an editor to create CSS dropdowns in MediaWiki in the MediaWiki:Sitenotice and the MediaWiki:Anonnotice when not logged in - the area at the top of the page for the entire wiki. The Wikimedia Foundation uses the sitenotice to announce elections and donation drives.

Compatibility and appearance
The extension works in Internet Explorer 7 and Firefox. This extension does not work for Internet Explorer 6 because of its poor CSS support.

The edges of the dropdowns are rounded in Firefox and Gecko based browsers. In other browsers, the box has sharp corners.

Introduction
The dropdowns is pure CSS, meaning it works without JavaScript. I am trying to find a way to fix that. (I am not going to try to make it work in IE6.)

In unsupported browsers, only the top level appears, so users can click to directed to another page, but no dropdowning.

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.

Installation
You need the CSS from below to power the menus. Add this css to MediaWiki:Common.css. .

/*Ensure that the Sitenotice is above the body content*/

z-index: 98; } z-index: 99; }
 * 1) bodyContent {
 * 1) siteNotice {

/* START DROP DOWN MENUS */ /* http://www.mediawiki.org/wiki/Extension:CSS_Dropdowns#Adding_it_to_your_site */

div#siteNotice { width:100%;    /* makes the entire box full width */ float:left; /*makes the entire box  enclose the list */ font-size:1.3em; /* SET FONT-SIZE HERE */ background-color:#FFFFFF; /* colors the background behind the box*/ a:link {color: #FFFFFF;} background:#a0e37d; /* BACKGROUND COLORS FOR ENTIRE BOX */ margin:7px -2px -2px -2px; padding:0; } div#siteNotice li { float:left;    /* causes the list to align horizontally instead of stack */ position:relative; /* positioning context for the absolutely positioned drop-down */ list-style-type:none;  /* removes the bullet off each list item */ background-color:#a0e37d; /*sets the background of the menu items */

margin: -4px 0 0 0; /*Brings the menu items up */ padding:0 6px; /*creates space each side of menu item's text */ } div#siteNotice li:first-child { -moz-border-radius-topleft: .5em; padding-bottom:1px; /*to fix from rounded edge */ border-top-left-radius: .5em; /* REMOVED: border-left:1px solid #002bb8; the first vertical line on the menu */ } div#siteNotice li:last-child { -moz-border-radius-topright: .5em; border-top-right-radius: .5em; padding-bottom:1px; /*to fix from rounded edge */ } div#siteNotice li:hover { background-color:#202020; /*Background of the menu items when hovered over */ } div#siteNotice a { display:block; /*makes list items in drop down highlight and wrapped lines indent correctly */ color:#ff321a; /* sets the LINK TEXT color */ text-decoration: none;   /* removes underline */ }

/* the horizontal menu ends here */ /* the drop-down starts here */ div#siteNotice ul li ul { margin:0; /* prevents the TEMP value inheriting from the horizontal menu */ position:absolute; /* positions the drop-down ul in relation to its relatively positioned li parent */ width:10em; /*sets the width of the menu - in combo with the li's 100% width, makes the menu stack*/ left:-1px; /*aligns the drop exactly under the menu */ } div#siteNotice ul li ul li { margin: -1px 0 0 0; /* prevents the margin value inheriting from the horiz menu + bring menu items up */ width:100%; /* makes the list items fill the list container (ul) */ list-style-type:none;  /* removes the bullet off each list item */ list-style-image:none; /* removes the bullet off each list item */ padding:0 0 1px; -moz-border-radius-topright: 0; -moz-border-radius-topleft: 0; -moz-border-radius-bottomright: 0; -moz-border-radius-bottomleft: 0; border-bottom-right-radius: 0; border-bottom-left-radius: 0; border-top-left-radius: 0; border-top-right-radius: 0; } div#siteNotice ul li ul li:last-child { -moz-border-radius-bottomright: 1em; -moz-border-radius-bottomleft: 1em; -moz-border-radius-topleft: 0; -moz-border-radius-topright: 0; border-bottom-right-radius: 1em; border-bottom-left-radius: 1em; border-top-left-radius: 0; border-top-right-radius: 0; padding-right:1px; /*to fix from rounded edge */ } div#siteNotice ul li ul li:first-child { border-top:1px solid #069; /*the top edge of the dropdown */ -moz-border-radius-topleft: 0; border-top-left-radius: 0; } /* make the drop-down display as the menu is rolled over */

div#siteNotice ul li ul {display:none;} /* conceals the drop-down when menu not hovered */

div#siteNotice ul li:hover ul {display:block; } /* shows the drop-down when the menu is hovered */

/* pop-out starts here */ body div#siteNotice ul li ul li ul { visibility:hidden; /* same effect as display:none in this situation */ top:-1px; left:10em; } div#siteNotice ul li ul li:hover ul {visibility:visible;} /* same effect as display:block in this situation */

/* second level popouts start here*/

div#siteNotice ul li ul li:hover ul li ul {visibility:hidden;}

div#siteNotice ul li ul li ul li:hover ul {visibility:visible;} /* same effect as display:block in this situation */

/* third level popouts start here I haven't tested this */

div#siteNotice ul li ul li ul li:hover ul li ul {visibility:hidden;}

div#siteNotice ul li ul li ul li ul li:hover ul {visibility:visible;} /* same effect as display:block in this situation */

/* THE HACK ZONE - */

/* hack for IE (all flavors) so the menu has a vertical line on the left */

float:left; /* makes the ul wrap the li's */ /* REMOVED: border-left:1px solid #002bb8; /* adds the rightmost menu vertical line to the ul */ margin-left:15px; /* IE doubles the given value above - why? */       } /* add a top line to drops and pops in IE browsers - can't read :first-child */
 * html div#siteNotice ul {

/* REMOVED: border-top:1px solid #002bb8;*/ border-left:0px; /* stops the drop inheriting the ul border */ } /* the Tantek hack to feed IE Win 5.5-5.0 a lower value to get the pop-out to touch the drop-down */
 * html div#siteNotice ul li ul {

left:9.85em; voice-family: "\"}\""; voice-family:inherit; left:10em; } /* and the "be nice to Opera" rule */ html>body div#siteNotice ul li ul li ul { left:10em; }
 * html div#siteNotice ul li ul li ul {

/* an Opera-only hack to fix a redraw problem by invisibly extending the ul */ /* the first-level drop stays open for 100px below the bottom but at least it works */ /* this can be reduced to as little as 22px if you don't have pop-outs */ /* the pop-out menu stays open for 22px below the bottom but at least it works

Not Tested!! */       @media all and (min-width: 0px){ body div#siteNotice ul li ul {padding-bottom:200px;} body div#siteNotice ul li ul li ul {padding-bottom:22px;} body div#siteNotice ul li ul li ul li ul li:hover {visibility:visible;} /* same effect as display:block in this situation */ }

/*end Opera hack */

/* end of hack zone */

/* END OF LIST-BASED MENU */

/* finally after feeding values to all others, we deal with MAc5 IE */ /* IE5 Mac can't do drop-downs so we need to present the info in a different way*/ /* we present the drop down choices in a row and never show any second-level drops */ /* this stylesheet is read by IE5 Mac only - hack omits 'url' and leave no space between @import and ("  Not Tested!!*/ @import("/wiki/skins/common/dropdown/ie51_menu_hack.css"); /* END OF DROP DOWN MENUS */

Adding the Dropdowns to your sitenotice page
To add the dropdowns, copy the following coding to your MediaWiki:Sitenotice page:  Template:Drop Down:Pizza Template:Drop Down:Ice Cream 

Make the pages Template:Drop Down:Pizza and Template:Drop Down:Ice Cream. On these new pages you created, use this format for your links:
 * Cheese
 * Pepperoni

You should now have a drop down where the top level links to the list page for Internet 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  line like the example above.

You can also edit the CSS to change colors or shapes or add pictures.

Credit
Portions of this coding are from:
 * Stylin' with CSS Book. This is a a really good book, I highly recommend it to CSS beginners.
 * The Zen of CSS Design)