Theme Components
Drop Down Menu
See https://foundation.zurb.com/sites/docs/dropdown-menu.html
<![CDATA[
<ul class="dropdown menu" data-dropdown-menu>
<li>
<a href="#">Item 1</a>
<ul class="menu">
<li><a href="#">Item 1A</a></li>
<li><a href="#">Item 1B</a>
<ul class="menu">
<li><a href="#">Item 1B - i</a></li>
<li><a href="#">Item 1B - ii</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a></li>
</ul>
]]>
Slick Slider
See http://kenwheeler.github.io/slick/ for more options
Slide 1
Slide 2
Slide 3
Slide 4
Slide 5
<![CDATA[
<div class="slider">
<div>Slide 1</div>
<div>Slide 2</div>
<div>Slide 3</div>
<div>Slide 4</div>
<div>Slide 5</div>
</div>
]]>
Tabs
See https://foundation.zurb.com/sites/docs/tabs.html for more options
<![CDATA[
<ul class="tabs" data-tabs id="example-tabs">
<li class="tabs-title is-active"><a href="#panel1" aria-selected="true">Tab 1</a></li>
<li class="tabs-title"><a data-tabs-target="panel2" href="#panel2">Tab 2</a></li>
</ul>
<div class="tabs-content" data-tabs-content="example-tabs">
<div class="tabs-panel is-active" id="panel1">
<p>Panel 1</p>
</div>
<div class="tabs-panel" id="panel2">
<p>Panel 2</p>
</div>
</div>
]]>
Reveal (modal)
See https://foundation.zurb.com/sites/docs/reveal.html for more options
Tiny
Small
Large
Full
<![CDATA[
<p><button class="button" data-open="exampleModal1">Tiny</button></p>
<div class="reveal tiny" id="exampleModal1" data-reveal>
<p>Tiny Modal</p>
<button class="close-button" data-close aria-label="Close modal" type="button">
<span aria-hidden="true">×</span>
</button>
</div>
<p><button class="button" data-open="exampleModal2">Small</button></p>
<div class="reveal small" id="exampleModal2" data-reveal>
<p>Small Modal</p>
<button class="close-button" data-close aria-label="Close modal" type="button">
<span aria-hidden="true">×</span>
</button>
</div>
<p><button class="button" data-open="exampleModal3">Large</button></p>
<div class="reveal large" id="exampleModal3" data-reveal>
<p>Large Modal</p>
<button class="close-button" data-close aria-label="Close modal" type="button">
<span aria-hidden="true">×</span>
</button>
</div>
<p><button class="button" data-open="exampleModal4">Full</button></p>
<div class="reveal full" id="exampleModal4" data-reveal>
<p>Full Modal</p>
<button class="close-button" data-close aria-label="Close modal" type="button">
<span aria-hidden="true">×</span>
</button>
</div>
]]>
Drop Down
See https://foundation.zurb.com/sites/docs/dropdown.html for more options
Toggle Dropdown
Click dropdown example
Hoverable Dropdown
Hover dropdown example
<![CDATA[
<button class="button" type="button" data-toggle="example-dropdown">Toggle Dropdown</button>
<div class="dropdown-pane" id="example-dropdown" data-dropdown data-auto-focus="true">
Click dropdown example
</div>
<button class="button" type="button" data-toggle="example-dropdown-1">Hoverable Dropdown</button>
<div class="dropdown-pane" id="example-dropdown-1" data-dropdown data-hover="true" data-hover-pane="true">
Hover dropdown example
</div>
]]>
