Unfold (Dropdown)
Examples of toggle contextual overlays for displaying lists of links and more with the Front unfold plugin.
Language dropdown
HTML:
<!-- Language -->
<div class="position-relative">
<a id="languageDropdownInvoker" class="d-flex align-items-center u-unfold-wrapper" href="javascript:;" role="button"
aria-controls="languageDropdown"
aria-haspopup="true"
aria-expanded="false"
data-unfold-event="hover"
data-unfold-target="#languageDropdown"
data-unfold-type="css-animation"
data-unfold-duration="300"
data-unfold-delay="300"
data-unfold-hide-on-scroll="true"
data-unfold-animation-in="slideInUp"
data-unfold-animation-out="fadeOut">
<img class="u-unfold__icon" src="../assets/vendor/flag-icon-css/flags/4x3/us.svg" alt="SVG">
<span class="d-inline-block d-sm-none">US</span>
<span class="d-none d-sm-inline-block">United States</span>
<span class="fa fa-angle-down u-unfold__icon-pointer"></span>
</a>
<div id="languageDropdown" class="u-unfold mt-2" aria-labelledby="languageDropdownInvoker">
<a class="active u-list__link" href="#">English</a>
<a class="u-list__link" href="#">Deutsch</a>
<a class="u-list__link" href="#">Español</a>
</div>
</div>
<!-- End Language -->
JS library and initialization:
<!-- JS Implementing Plugins -->
<script src="assets/js/components/hs.unfold.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// initialization of unfold component
$.HSCore.components.HSUnfold.init($('[data-unfold-target]'));
});
</script>
Country dropdown
Look for the footer to see the Country dropdown example in action through the following page Classic business.
Australia
Austria
Belgium
Canada
Denmark
Finland
France
Germany
Netherlands
New Zealand
Norway
Portugal
Singapore
Spain
Sweden
Switzerland
United Kingdom
HTML:
<!-- Country -->
<div class="btn-group position-relative">
<a id="footerCountryInvoker" class="u-btn-text-primary" href="javascript:;" role="button"
aria-controls="footer-country"
aria-haspopup="true"
aria-expanded="false"
data-unfold-event="click"
data-unfold-target="#footer-country"
data-unfold-type="css-animation"
data-unfold-duration="300"
data-unfold-delay="300"
data-unfold-hide-on-scroll="false"
data-unfold-animation-in="slideInUp"
data-unfold-animation-out="fadeOut">
<img class="u-unfold__icon u-list__link-icon mr-2" src="../assets/vendor/flag-icon-css/flags/4x3/us.svg" alt="United States Flag">
<strong class="font-size-14">United States</strong>
</a>
<!-- Content -->
<div id="footer-country" class="u-unfold u-unfold--country bottom-0 left-0" aria-labelledby="footerCountryInvoker">
<!-- Signup Instantly -->
<div class="bg-white u-unfold--country__content">
<div class="p-6">
<h4 class="h6 mb-3"><strong>Front available in</strong></h4>
<div class="row">
<div class="col-6">
<!-- List of Countries -->
<a class="u-list__link" href="#">
<img class="u-list__link-icon mr-2" src="../assets/vendor/flag-icon-css/flags/4x3/au.svg" alt="Australia Flag">
Australia
</a>
<a class="u-list__link" href="#">
<img class="u-list__link-icon mr-2" src="../assets/vendor/flag-icon-css/flags/4x3/at.svg" alt="Austria Flag">
Austria
</a>
<a class="u-list__link" href="#">
<img class="u-list__link-icon mr-2" src="../assets/vendor/flag-icon-css/flags/4x3/be.svg" alt="Belgium Flag">
Belgium
</a>
<a class="u-list__link" href="#">
<img class="u-list__link-icon mr-2" src="../assets/vendor/flag-icon-css/flags/4x3/ca.svg" alt="Canada Flag">
Canada
</a>
<a class="u-list__link" href="#">
<img class="u-list__link-icon mr-2" src="../assets/vendor/flag-icon-css/flags/4x3/dk.svg" alt="Denmark Flag">
Denmark
</a>
<a class="u-list__link" href="#">
<img class="u-list__link-icon mr-2" src="../assets/vendor/flag-icon-css/flags/4x3/fi.svg" alt="Finland Flag">
Finland
</a>
<a class="u-list__link" href="#">
<img class="u-list__link-icon mr-2" src="../assets/vendor/flag-icon-css/flags/4x3/fr.svg" alt="France Flag">
France
</a>
<a class="u-list__link" href="#">
<img class="u-list__link-icon mr-2" src="../assets/vendor/flag-icon-css/flags/4x3/de.svg" alt="Germany Flag">
Germany
</a>
<a class="u-list__link" href="#">
<img class="u-list__link-icon mr-2" src="../assets/vendor/flag-icon-css/flags/4x3/nl.svg" alt="Netherlands Flag">
Netherlands
</a>
<!-- End List of Countries -->
</div>
<div class="col-6">
<!-- List of Countries -->
<a class="u-list__link" href="#">
<img class="u-list__link-icon mr-2" src="../assets/vendor/flag-icon-css/flags/4x3/nz.svg" alt="New Zealand Flag">
New Zealand
</a>
<a class="u-list__link" href="#">
<img class="u-list__link-icon mr-2" src="../assets/vendor/flag-icon-css/flags/4x3/no.svg" alt="Norway Flag">
Norway
</a>
<a class="u-list__link" href="#">
<img class="u-list__link-icon mr-2" src="../assets/vendor/flag-icon-css/flags/4x3/pt.svg" alt="PortugalPREVIEW Flag">
Portugal
</a>
<a class="u-list__link" href="#">
<img class="u-list__link-icon mr-2" src="../assets/vendor/flag-icon-css/flags/4x3/sg.svg" alt="Singapore Flag">
Singapore
</a>
<a class="u-list__link" href="#">
<img class="u-list__link-icon mr-2" src="../assets/vendor/flag-icon-css/flags/4x3/es.svg" alt="Spain Flag">
Spain
</a>
<a class="u-list__link" href="#">
<img class="u-list__link-icon mr-2" src="../assets/vendor/flag-icon-css/flags/4x3/se.svg" alt="Sweden Flag">
Sweden
</a>
<a class="u-list__link" href="#">
<img class="u-list__link-icon mr-2" src="../assets/vendor/flag-icon-css/flags/4x3/ch.svg" alt="Switzerland Flag">
Switzerland
</a>
<a class="u-list__link" href="#">
<img class="u-list__link-icon mr-2" src="../assets/vendor/flag-icon-css/flags/4x3/gb.svg" alt="United Kingdom Flag">
United Kingdom
</a>
<a class="active u-list__link" href="#">
<img class="u-list__link-icon mr-2" src="../assets/vendor/flag-icon-css/flags/4x3/us.svg" alt="United States Flag">
United States
</a>
<!-- End List of Countries -->
</div>
</div>
</div>
<a class="u-unfold--country__link p-6" href="#">
<small class="d-block text-muted mb-1">More countries coming soon.</small>
<small class="d-block">Signup to get notified <span class="fa fa-arrow-right u-unfold__icon-pointer"></span></small>
</a>
<!-- End Signup Instantly -->
</div>
</div>
<!-- End Content -->
</div>
<!-- End Country -->
JS library and initialization:
<!-- JS Implementing Plugins -->
<script src="assets/js/components/hs.unfold.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// initialization of unfold component
$.HSCore.components.HSUnfold.init($('[data-unfold-target]'));
});
</script>