View source for ThePlaz.com's Dropdowns for MediaWiki/Version 1.0

{{Red Box|Old Version!|This is version 1.0 of the dropdowns.  A newer version is now out.  See [[ThePlaz.com's Dropdowns for MediaWiki|this page]] for a current version.}}
{{ThePlaz Original Feature}}
[[Image:Drop Down Rounded.JPG|thumb|601px|Rounded Edges in [[wp:Gecko (layout engine)|Gecko]]]]
{{Blue Message|'''Update:''' I just downloaded [[wp:IE7|IE7]] and the CSS drop downs work without any modification.  IE7 added the [[wp:CSS|CSS]] support for "Enable :hover on all elements not just on <a>" [http://blogs.msdn.com/ie/archive/2006/08/22/712830.aspx].  I also installed [[wp:KDE|KDE]] ([[wp:Linux|Linux]]) and it works in its native browser.  This is in addition [[wp:Firefox|Firefox]] which I always knew it worked in.  It still doesn't work in [[wp:IE6|IE6]] and I have no plans to support that now that IE7 is out for [[wp:Windows XP|XP]] and soon [[wp:Windows Vista|Vista]].  If anyone can get it to work in IE6, send me, or post here, the code.  Thanks [[User:ThePlaz|Plaz]] 12:01, 5 November 2006 (EST)}}
This is how I built, and how you can implement my pure [[wp:CSS|CSS]] dropdowns in the [[MediaWiki:Sitenotice|Sitenotice]] of [[wp:MediaWiki|MediaWiki]] [http://www.mediawiki.org/]  This is supported only in modern browsers like [[wp:IE7|Internet Explorer 7]] and [[wp:Firefox|Firefox]].  Sorry, but no support for IE6.  Remember these are pure CSS menus, no Javascript needed.

In addition, in [[wp:Gecko (layout engine)|Gecko]] based browsers like [[wp:Firefox|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 [[wp:Wikimedia Foundation|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 [http://www.amazon.com/Stylin-CSS-A-Designers-Guide/dp/0321305256/sr=8-1/qid=1157748786/ref=pd_bbs_1/104-8190287-5052756?ie=UTF8&s=books Stylin' with CSS Book]  (A really good book, I highly recomended it to CSS beginners, as well as [http://www.amazon.com/Zen-CSS-Design-Enlightenment-Voices/dp/0321303474/ref=pd_bxgy_b_text_b/104-8190287-5052756?ie=UTF8 The Zen of CSS Design])

It is pure CSS, meaning it works without JavaScript, a plus, but does not work in IE6.  <s>I am trying to find a way to fix that.</s> (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 ([[wp:Netscape Communicator|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 <s>easy</s> 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]]
<pre><nowiki>
<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>
</nowiki></pre>
Make the pages [[Template:Drop Down:Pizza]] and [[Template:Drop Down:Ice Cream]].  On those pages use this format for your links.
<pre><nowiki>
*[[Cheese Pizza|Cheese]]
*[[Pepperoni Pizza|Pepperoni]]
</nowiki></pre>

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 <nowiki><li></nowiki> line like the example above.

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

I hope this helps.--[[User:ThePlaz|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. <small> (free account required) </small>
*Contact the author: [http://theplaz.com/wiki/index.php?title=User_talk:ThePlaz&action=edit&section=new Leave Plaz a (public) message] [[Image:File_icon.gif]] or [http://theplaz.com/wiki/index.php?title=Special:Emailuser/ThePlaz send me a (private) e-mail.]

[[Category:Tech]]