На странице MediaWiki:Common.css
(или MediaWiki:<i>Skinname</i>.css
, если вы хотите использовать его только для определенного скина), добавьте желаемый CSS:
/* Dropdown Button */
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #ddd;}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {display: block;}
/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {background-color: #3e8e41;}
Если все в шаблоне будетвнутренняя ссылка, сделайте этот шаблон таким:
<div class="dropdown">
<div class="dropbtn">{{{title|Dropdown}}}</div>
<div class="dropdown-content"><!--
-->{{#if:{{{1|}}}|[[{{{1}}}]]}}<!--
-->{{#if:{{{2|}}}|[[{{{2}}}]]}}<!--
-->{{#if:{{{3|}}}|[[{{{3}}}]]}}<!--
-->{{#if:{{{4|}}}|[[{{{4}}}]]}}<!--
-->{{#if:{{{5|}}}|[[{{{5}}}]]}}<!--
</div>
</div>
И затем вызовите его так:
{{dropdown|Foo|Bar|Baz}}
И он сделает выпадающий список со ссылками на страницы Foo
, Bar
и Baz
в вашей вики.
Если вам требуется поддержка внешних ссылок или открытого текста, используйте вместо этого:
<div class="dropdown">
<div class="dropbtn">{{{title|Dropdown}}}</div>
<div class="dropdown-content plainlinks"><!--
-->{{#if:{{{1|}}}|<span>{{{1}}}</span>}}<!--
-->{{#if:{{{2|}}}|<span>{{{2}}}</span>}}<!--
-->{{#if:{{{3|}}}|<span>{{{3}}}</span>}}<!--
-->{{#if:{{{4|}}}|<span>{{{4}}}</span>}}<!--
-->{{#if:{{{5|}}}|<span>{{{5}}}</span>}}<!--
--></div>
</div>
Измените a
s вCSS для span
s, и добавьте правило, чтобы убедиться, что они черные вместо синего:
/* Links inside the dropdown */
.dropdown-content span {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content span:hover {background-color: #ddd;}
.dropdown-content a, .dropdown-content a:hover{
color: black;
text-decoration: none;
}
И затем, вы можете вызвать его как
{{dropdown|[[Foo]]|[https://www.google.com/ Google]|Plain text}}
, и он имеетссылка на страницу Foo
, ссылка на Google и элемент меню в виде простого текста.
Примечание: Если параметр содержит знак равенства (=
), вам необходимо указать все имена параметров, например:
{{dropdown|1=[https://duckduckgo.com/?q=foo&ia=web Search for Foo]|2=Bar}}
См. также: Передача знака равенства ('=') параметру в шаблоне MediaWiki