Using css/html dropdown as Mediawiki template - mediawiki

Question

I am trying to use this dropdown as a Mediawiki template and allow for Mediawiki parameters in the URL creation (I.e. {{PAGENAME}}). Apparently, this type of html elements is not parsed. Trying $wgRawHtml = true; resulted in the template being displayed, but, apart from being a security risk, there was no way to have parsable elements. I did find this template but I could not figure out how do adapt it to work with the styling of the dropdown in question.

Answer 1

In the page MediaWiki:Common.css (or MediaWiki:Skinname.css, if you only want it for a certain skin), add your desired 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;}
If everything in the template is going to be an internal link, make this your template:
<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>
And then invoke it like this:
{{dropdown|Foo|Bar|Baz}}
And it will make a dropdown with links to the pages Foo, Bar, and Baz on your wiki.
If you have to support external links or plaintext, use this instead:
<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>
Change the as in the CSS to spans, and add a rule to make sure they are black instead of blue:
/* 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;
}
And then, you can invoke it like
{{dropdown|[[Foo]]|[https://www.google.com/ Google]|Plain text}}
and it has a link to the page Foo, a link to Google, and a plain-text menu item.
Note: If a parameter contains an equals sign (=), you need to specify all the parameter names, like this:
{{dropdown|1=[https://duckduckgo.com/?q=foo&ia=web Search for Foo]|2=Bar}}
See also: Passing an equal sign ('=') to a parameter in a MediaWiki template

Answer 2

So I tried to use this, and I'm having an issue where the rest of the page content that is after the dropdown, is in the dropdown itself. IT doesn't look like any of the parameters aren't closed, so I'm not sure why it's doing that. Using MW1.32