Wikki Extensions

Aus Howtos und Gedankenstuetzen

Wechseln zu: Navigation, Suche

Inhaltsverzeichnis

Extension:CSS Dropdowns

Das Dropdown Menü wird in die Seite http://deinedomäne.de/index.php/MediaWiki:Sitenotice. Die Seiten Notitz (Sitenotice und MediaWiki:Anonnotice) ist die Stelle an die Informationen geschrieben werden, die auf jeder Seite auftauchen sollen. Das komplette Dropdown Menü besteht aus reinem CSS und arbeitet ohne Javascript.

Installation

Common.css

Folgender Code muss auf die Seite http://deinedomäne.de/index.php/MediaWiki:Common.css. 

/** CSS an dieser Stelle wirkt sich auf alle Skins aus */

div#siteNotice {
	width:100%; 	/* makes the div full width */
       float:left; /*makes the div enclose the list */
       font-size:100%;	/* SET FONT-SIZE HERE */
 margin:1px 0 1em 0;
 padding:60;
}
div#siteNotice ul {
       margin-left:0px; /* reset */
}

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 */
       list-style-image: none;
       background-color:#CCFFCC; /*sets the background of the menu items */
       border-right:1px solid #002bb8; /* creates dividing lines between the li elements */
 border-top:1px solid #002bb8;
 border-bottom:1px solid #002bb8;
 margin: -4px 0 -5px 0; /*Brings the menu items up */     
 padding:0 80px; /*creates space each side of menu item's text */
}
div#siteNotice li:first-child {
       -moz-border-radius-topleft: .6em;
       padding-bottom:0px; /*to fix from rounded edge */
       border-left:1px solid #002bb8; /*the first vertical line on the menu */
}
div#siteNotice li:last-child {
       -moz-border-radius-topright: .6em;
       padding-bottom:0px; /*to fix from rounded edge */	

/*test*/

}
div#siteNotice li:hover { 
       background-color:#FFF; /*sets the background of the menu items */
}
div#siteNotice a {
       display:block; /*makes list items in drop down highlight and wrapped lines indent correctly */
       color:#002bb8;	/* sets the font color */
}
/* the horizontal menu ends here */

/* the drop-down starts here */
div#siteNotice ul li ul {
       margin:0; /* prevents the TEMP value inheriting from the horiz menu  */
       position:absolute; /* positions the drop-down ul in relation to its relatively positioned li parent */
       width:100%; /*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) */
       border-left:1px solid #069; /*  three sides of each drop-down item */
       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 10px;
}
div#siteNotice ul li ul li:first-child {
 -moz-border-radius-topleft: 0;	/* needed to hide curve */
}
div#siteNotice ul li ul li:last-child {
-moz-border-radius-bottomright: 1em;
-moz-border-radius-bottomleft: 1em;
-moz-border-radius-topright: 0;
padding-right:0px; /*to move over right side rounded edge */

/* test*/
}
/* 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 */
div#siteNotice ul li ul li:hover ul li {padding-right:1px; -moz-border-radius-topright: 0;}
div#siteNotice ul li ul li:hover ul li:last-child {-moz-border-radius-topright: 0;}

/* second level popouts */
div#siteNotice ul li ul li:hover ul li ul {visibility:hidden;}
div#siteNotice ul li ul li ul li:hover ul {visibility:visible; margin-top:1px} /* same effect as display:block in this situation */
div#siteNotice ul li ul li ul li:hover ul li:last-child {-moz-border-radius-topright: 0;} 

/* third level popouts */
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; margin-top:1px} /* same effect as display:block in this    situation */
div#siteNotice ul li ul li ul li ul li:hover ul li:last-child {-moz-border-radius-topright: 0;} 

/* 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 */
       border-left:1px solid #069; /* adds the rightmost menu vertical line to the ul */
       }
/* 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 */
/* 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 */

MediaWiki:Sitenotice

Um das Dropdown Menü anzusprechen, kopiere folgenden Code nach http://deinedomäne.de/index.php/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:xyz]]{{Drop Down:xyz}}</li>
 <li>[[Template:Drop Down:uvw]]{{Drop Down:uvw}}</li>
 </ul>

Template:Drop Down xyz

Jetzt müssen die dazugehörigen Templates mit folgendem Code angelegt werden. In unserem Falle sind das:

http://deinedomäne.de/index.php/Template:Drop_Down:xyz

http://deinedomäne.de/index.php/Template:Drop_Down:uvw 

*[[xyz|xyz]]
*[[uvw|uvw]]


Ãœbersetzung aus dem Englischen Original.

Autor:Michael180

http://www.mediawiki.org/wiki/Extension:CSS_Dropdowns

Von „http://wiki.chaosfield.org/index.php/Wikki_Extensions“