Vorlage:Dropdown

Fügt ein anpassbares Dropdown-Menü wie dieses hier hinzu:

In HTML:

Links

• Category:CSS
• Main Page
• Special:WikiActivity

Mit Vorlage:

Links

• Category:CSS
• Main Page
• Special:WikiActivity

Quelle: https://dev.fandom.com/wiki/DropdownMenu

Benutzung:

{{Dropdown|Links|[[:Category:CSS]]|[[{{MediaWiki:Mainpage}}|Main Page]]|[[Special:WikiActivity]]}}

Code:

<onlyinclude><div class="custom-dropdown wikia-menu-button"><span>{{{1}}}</span><ul class="WikiaMenuElement">{{#if:
{{{2|}}} | <li>{{{2}}}</li>{{#if:
{{{3|}}} | <li>{{{3}}}</li>{{#if:
{{{4|}}} | <li>{{{4}}}</li>{{#if:
{{{5|}}} | <li>{{{5}}}</li>{{#if:
{{{6|}}} | <li>{{{6}}}</li>{{#if:
{{{7|}}} | <li>{{{7}}}</li>{{#if:
{{{8|}}} | <li>{{{8}}}</li>{{#if:
{{{9|}}} | <li>{{{9}}}</li>{{#if:
{{{10|}}} | <li>{{{10}}}</li>{{#if:
{{{11|}}} | <li>{{{11}}}</li>{{#if:
{{{12|}}} | <li>{{{12}}}</li>{{#if:
{{{13|}}} | <li>{{{13}}}</li>{{#if:
{{{14|}}} | <li>{{{14}}}</li>{{#if:
{{{15|}}} | <li>{{{15}}}</li>{{#if:
{{{16|}}} | <li>{{{16}}}</li>{{#if:
{{{17|}}} | <li>{{{17}}}</li>{{#if:
{{{18|}}} | <li>{{{18}}}</li>{{#if:
{{{19|}}} | <li>{{{19}}}</li>{{#if:
{{{20|}}} | <li>{{{20}}}</li>}} }} }} }} }} }} }} }} }} }} }} }} }} }} }} }} }} }} }}</ul></div></onlyinclude>

{{#css:
.custom-dropdown {
    display: inline-block;
    padding: 1px 8px;
}
.custom-dropdown > :first-child:after {
    background-image: url("data:image/gif;base64,R0lGODlhAQABAIABAAAAAP///yH5BAEAAAEALAAAAAABAAEAQAICTAEAOw%3D%3D");
    border-color: white transparent transparent;
    border-style: solid;
    border-width: 4px;
    content: "";
    display: inline-block;
    height: 1px;
    margin-left: 4px;
    margin-top: 2px;
    position: relative;
    vertical-align: middle;
    width: 1px;
}
.custom-dropdown:hover {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    margin-bottom: -1px;
}
.custom-dropdown ul {
    list-style: none outside none;
    min-width: 100%;
    top: auto;
    display: none;
    margin: 0;
    position: absolute;
    z-index: 100;
}
.custom-dropdown:hover ul,
.custom-dropdown.wikia-menu-button:hover ul {
    display: block;
}
.custom-dropdown li a {
    font-size: 12px;
    height: 14px;
    line-height: 14px;
}
 
body /* was bedeutet .WikiaArticle */ {
    overflow: visible;
}
 
/**
 * The following rules approximate legacy styles which are missing from UCP.
 *
 * Some notes, in no particular order, follow.
 *
 *  - Because of the template, we only need the base styles for `.wikia-menu-button`.
 *    The `:hover` styles from <buttons-wikia-menu.scss> revert the `:hover` styles from <buttons-wikia.scss> to the base styles.
 *    We don't need `button`-specific stuff (like `[disabled]`) or variants (like `.secondary` and `.big`).
 *    Since the `div` has no `tabindex`, we don't need `:focus` either.
 *
 * For details, see:
 *
 *   - <https://discordapp.com/channels/246075715714416641/246737000189788161/761137290251862037>;
 *   - <https://github.com/Wikia/app/blob/release-1153.001/skins/shared/styles/buttons/buttons-wikia-menu.scss>; and
 *   - <https://github.com/Wikia/app/blob/release-1153.001/skins/shared/styles/buttons/buttons-wikia.scss>.
 *
 */
 
.custom-dropdown.wikia-menu-button {
    /* non-overridden declarations from <buttons-wikia.scss> follow: */
    background-color: var(--theme-accent-color);
    /* TODO: maybe set `background-image` to `linear-gradient(to bottom, $color-button-highlight 35%, var(--theme-accent-color) 65%)` */
    border: 1px solid var(--theme-accent-color);
    border-radius: 4px;
    color: var(--theme-accent-label-color);
    cursor: pointer;
    display: inline-block;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 12px;
    height: 19px;
    line-height: 20px;
    white-space: nowrap;
 
    /* non-overridden declarations from <buttons-wikia-menu.scss> follow: */
    list-style: none;
    margin: 0;
    position: relative;
    text-align: left;
}
 
.custom-dropdown.wikia-menu-button a {
    text-decoration: none;
}
 
.custom-dropdown.wikia-menu-button ul {
    background: var(--theme-page-background-color);
    border: 1px solid var(--theme-accent-color);
    display: none;
    left: -1px;
    margin: 0;
    position: absolute;
    z-index: 100;
    box-shadow: 1px 2px 12px 0 #000; /* TODO: maybe calculate color as `darken(var(--theme-article-background-color), 80%)` */
}
 
.custom-dropdown.wikia-menu-button ul a,
.custom-dropdown.wikia-menu-button ul .mw-selflink {
    color: var(--theme-page-text-color);
    display: block;
    padding: 9px 9px 7px;
}
 
.custom-dropdown.wikia-menu-button ul a:hover {
    background-color: var(
        --theme-page-background-color--secondary
    ); /* TODO: compute this properly; for light wikis, `$dropdown-background` is `mix(var(--theme-accent-color), var(--theme-article-background-color), 20%)`, and for dark wikis, it's `lighten($dropdown-background, 8%)` */
 
    /* extra UCP crap follows: */
    color: var(--theme-page-text-color);
}
 
.custom-dropdown.wikia-menu-button ul li {
    border-top: 1px solid var(--theme-border-color);
    line-height: normal;
 
    /* extra UCP crap follows: */
    margin: 0;
}
 
.custom-dropdown.wikia-menu-button ul li:first-child {
    border: 0;
}
 
.custom-dropdown.wikia-menu-button .WikiaMenuElement {
    margin: 0;
}
}}