MediaWiki/Foundation/Dropdown Buttons
Foundation CSS Framework for MediaWiki: Dropdown Buttons
Dropdown Buttons can be used within MediaWiki by using a custom skin, such as Pivot or Foreground, which implement the Zurb Foundation CSS Framework.
When the user clicks on a Dropdown Button a menu choice is revealed. Each item links to another page or resource.
Because the a tag is used the code for the button needs to be enclosed in html tags and $wgRawHtml must be enabled in LocalSettings.php. (Each Label includes an html link, but the code itself does not display in the examples.)
The style of Dropdown Buttons is similar to the classes used in other Foundation CSS button styles.
Note: To use components from the Zurb Foundation CSS Framework in MediaWiki, first install a custom skin such as the Foreground Skin or the Pivot Skin, which are built upon the Foundation CSS Framework.
Example 1: Dropdown Button - tiny, default style
<html>
<p><button data-dropdown="example1" aria-controls="example1" aria-expanded="false"
class="button dropdown tiny">Button Label</button><br></p>
<ul id="example1" data-dropdown-content class="f-dropdown" aria-hidden="true">
<li><a href="#">Label 1</a></li>
<li><a href="#">Label 2</a></li>
<li><a href="#">Label 3</a></li>
</ul>
</html>
Example 2: Dropdown Button - small secondary radius
<html>
<p><button data-dropdown="example2" class="button dropdown small secondary radius"
aria-expanded="false" aria-controls="example2">Button Label</button><br></p>
<ul id="example2" data-dropdown-content
class="f-dropdown" aria-hidden="true" tabindex="-1">
<li><a href="#">Label 1</a></li>
<li><a href="#">Label 2</a></li>
<li><a href="#">Label 3</a></li>
</ul>
</html>
Example 3: Dropdown Button - medium alert round
<html>
<p><button data-dropdown="example3" aria-controls="example3" aria-expanded="false"
class="button dropdown medium alert round">Button Label</button><br></p>
<ul id="example3" data-dropdown-content class="f-dropdown" aria-hidden="true">
<li><a href="#">Label 1</a></li>
<li><a href="#">Label 2</a></li>
<li><a href="#">Label 3</a></li>
</ul>
</html>
Example 4: Dropdown Button - large success
<html>
<p><button data-dropdown="example4" aria-controls="example4" aria-expanded="false"
class="button dropdown large success">Button Label</button><br></p>
<ul id="example4" data-dropdown-content class="f-dropdown" aria-hidden="true">
<li><a href="#">Label 1</a></li>
<li><a href="#">Label 2</a></li>
<li><a href="#">Label 3</a></li>
</ul>
</html>
Example 5: Dropdown Button - large expand
<html>
<p><button data-dropdown="example5" aria-controls="example5" aria-expanded="true"
class="button dropdown large expand">Button Label</button><br></p>
<ul id="example5" data-dropdown-content class="f-dropdown" aria-hidden="true">
<li><a href="#">Label 1</a></li>
<li><a href="#">Label 2</a></li>
<li><a href="#">Label 3</a></li>
</ul>
</html>
Notes
The examples here are based on code provided by Zurb Foundation at <a href="https://foundation.zurb.com/sites/docs/v/5.5.3/components/dropdown_buttons.html" target="_blank">https://foundation.zurb.com/sites/docs/v/5.5.3/components/dropdown_buttons.html</a>
Each Label includes an html link, but the code itself does not display in the examples.
These Dropdown Button components were not Accessible, but Zurb is working on it.
