Extension:CSS Dropdowns
 Release status: unknown |
|
|---|---|
 |
|
| Implementation | Skin |
| Description | CSS dropdown in the Sitenotice - the area at the top of the page for the entire wiki |
| Author(s) | ThePlaz |
| License | No license specified |
| Download | No link |
| Check usage and version matrix | |
Extension:CSS Dropdowns allows an editor to create CSS dropdowns in MediaWiki in the Sitenotice - the area at the top of the page for the entire wiki. 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.
Contents |
Introduction [edit]
The pull down menu is for 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 the sitenotice to announce elections and donation drives.
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.
Portions of this coding are 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)
Adding it to your site [edit]
You need the CSS from below to power the menus. Add this css to MediaWiki:Common.css.[1].
/*Ensure that the Sitenotice is above the body content*/
#bodyContent {
z-index: 98;
}
#siteNotice {
z-index: 99;
}
/* 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 */
* html div#siteNotice ul {
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 li 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 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;
}
/* 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 */
Calling the Dropdowns [edit]
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.
See also [edit]
- Extension:CSS MenuSidebar
- Extension:TreeAndMenu
- AJAX Menu, ajaxmenu.com
- How to: Drop-Down List
- Extension:CSS for handling CSS modifications from a MediaWiki article rather than altering the filesystem
- Manual:Gallery of user styles/Paulgu's drop down menu
- ThePlaz.com's Dropdowns for MediaWiki
