Unfold (Dropdown)
Examples of toggle contextual overlays for displaying lists of links and more with the Space unfold plugin.
Country dropdown
Look for the footer to see the Country dropdown example in action through the following page Classic default.
English
Français
Deutsch
Português
Español
Italiano
Русский
Türkçe
HTML:
<!-- Language -->
<div class="btn-group d-block position-relative mb-4 mb-lg-auto">
<a id="footerLanguageInvoker" class="btn-text-secondary d-flex align-items-center rounded py-2 px-3" href="javascript:;" role="button"
aria-controls="footerLanguage"
aria-haspopup="true"
aria-expanded="false"
data-unfold-event="click"
data-unfold-target="#footerLanguage"
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">
<span class="font-size-14">English</span>
<span class="fa fa-angle-down u-unfold__icon-pointer u-unfold--language-icon-pointer ml-4"></span>
</a>
<!-- Content -->
<div id="footerLanguage" class="u-unfold u-unfold--language bottom-0 left-0" aria-labelledby="footerLanguageInvoker">
<div class="py-6 px-5">
<h4 class="h6 mb-4">Select your language</h4>
<div class="row">
<div class="col-6">
<!-- List of Languages -->
<div class="list-group list-group-borderless list-group-flush">
<a class="active d-flex align-items-center list-group-item list-group-item-action" href="#">
<img class="max-width-3 mr-2" src="../assets/vendor/flag-icon-css/flags/4x3/us.svg" alt="United States Flag">
English
</a>
<a class="d-flex align-items-center list-group-item list-group-item-action" href="#">
<img class="max-width-3 mr-2" src="../assets/vendor/flag-icon-css/flags/4x3/fr.svg" alt="France Flag">
Français
</a>
<a class="d-flex align-items-center list-group-item list-group-item-action" href="#">
<img class="max-width-3 mr-2" src="../assets/vendor/flag-icon-css/flags/4x3/de.svg" alt="Germany Flag">
Deutsch
</a>
<a class="d-flex align-items-center list-group-item list-group-item-action" href="#">
<img class="max-width-3 mr-2" src="../assets/vendor/flag-icon-css/flags/4x3/pt.svg" alt="Portugal Flag">
Português
</a>
</div>
<!-- End List of Languages -->
</div>
<div class="col-6">
<!-- List of Languages -->
<div class="list-group list-group-borderless list-group-flush">
<a class="d-flex align-items-center list-group-item list-group-item-action" href="#">
<img class="max-width-3 mr-2" src="../assets/vendor/flag-icon-css/flags/4x3/es.svg" alt="Spain Flag">
Español
</a>
<a class="d-flex align-items-center list-group-item list-group-item-action" href="#">
<img class="max-width-3 mr-2" src="../assets/vendor/flag-icon-css/flags/4x3/it.svg" alt="Italy Flag">
Italiano
</a>
<a class="d-flex align-items-center list-group-item list-group-item-action" href="#">
<img class="max-width-3 mr-2" src="../assets/vendor/flag-icon-css/flags/4x3/ru.svg" alt="Russian Flag">
Русский
</a>
<a class="d-flex align-items-center list-group-item list-group-item-action" href="#">
<img class="max-width-3 mr-2" src="../assets/vendor/flag-icon-css/flags/4x3/tr.svg" alt="Turkey Flag">
Türkçe
</a>
</div>
<!-- End List of Languages -->
</div>
</div>
</div>
<!-- Signup -->
<a class="u-unfold--language__link p-5" href="../html/pages/signup-simple.html">
<small class="d-block text-muted mb-1">More languages 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 -->
</div>
<!-- End Content -->
</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>