Extension:CSS Dropdowns

From MediaWiki.org
Jump to: navigation, search
MediaWiki extensions manual - list
Crystal Clear action run.png
CSS Dropdowns

Release status: unknown

Extension CSS Dropdowns screenshot.jpg
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

Translate the CSS Dropdowns extension if possible

Check usage and version matrix; code metrics
See also: Extension:Drop-Down List
Rounded Edges in Firefox

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[edit | edit source]

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[edit | edit source]

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[edit | edit source]

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:#CFCFCF; /* colors the background  behind the box*/ 
a:link {color: #FFFFFF;} /* FFFFFF = COLOR WHITE */
        background:#930B00; /*  BACKGROUND COLORS FOR ENTIRE BOX 930B00 = DARK RED */ 
        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:#930B00; /*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;
        }
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 #202020 = DARK GRAY */
        }
div#siteNotice a {
        display:block; /*makes list items in drop down highlight and wrapped lines indent correctly */
        color:#FFF;  /* LINK TEXT color #FFF = WHITE */
        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 {
        /* REMOVED border-top:1px solid #069; /*the top edge of the dropdown #069 = DARK BLUE http://www.color-hex.com/color/006699 */ */
        -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#siteNoticeul 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 */
        }
/* add a top line to drops and pops in IE browsers - can't read :first-child */

* html  div#siteNotice ul li ul {
        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 */

Adding Dropdowns to your sitenotice page[edit | edit source]

To add the dropdowns, copy the following coding to your MediaWiki:Sitenotice page:

<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 these new pages you created, 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 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 <li> line like the example above.

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

Known issues[edit | edit source]

Before adding extension to MediaWiki:Common.css
After adding extension to MediaWiki:Common.css

Extension:CSS Dropdowns formats the entire MediaWiki:Sitenotice not just the dropdown, so it is not possible to have the dropdown in MediaWiki:Common.css without seriously messing up the formatting of all MediaWiki:Sitenotice.

Credit[edit | edit source]

Portions of this coding are from:

See also[edit | edit source]

Notes[edit | edit source]

  1. source