Unfold (Sidebar)
Examples of toggle contextual overlays for displaying lists of links and more with the Space unfold plugin.
Signup form
HTML:
<!-- Account Sidebar Toggle Button -->
<a id="sidebarNavToggler" class="btn btn-xs btn-icon btn-text-dark" href="javascript:;" role="button"
aria-controls="sidebarContent"
aria-haspopup="true"
aria-expanded="false"
data-unfold-event="click"
data-unfold-hide-on-scroll="false"
data-unfold-target="#sidebarContent"
data-unfold-type="css-animation"
data-unfold-animation-in="fadeInRight"
data-unfold-animation-out="fadeOutRight"
data-unfold-duration="500">
<span class="fa fa-bars btn-icon__inner font-size-13"></span>
</a>
<!-- End Account Sidebar Toggle Button -->
<!-- Panel Sidebar Navigation -->
<aside id="sidebarContent" class="u-sidebar u-unfold--css-animation u-unfold--hidden" aria-labelledby="sidebarNavToggler">
<div class="u-sidebar__scroller">
<div class="u-sidebar__container">
<div class="u-sidebar--panel__footer-offset">
<!-- Toggle Button -->
<div class="d-flex align-items-center border-bottom py-4 px-5">
<h4 class="h5 mb-0">Account</h4>
<button type="button" class="close u-sidebar__close ml-auto"
aria-controls="sidebarContent"
aria-haspopup="true"
aria-expanded="false"
data-unfold-event="click"
data-unfold-hide-on-scroll="false"
data-unfold-target="#sidebarContent"
data-unfold-type="css-animation"
data-unfold-animation-in="fadeInRight"
data-unfold-animation-out="fadeOutRight"
data-unfold-duration="500">
<span aria-hidden="true">×</span>
</button>
</div>
<!-- End Toggle Button -->
<!-- Content -->
<div class="js-scrollbar u-sidebar__body">
<div class="u-sidebar__content py-5">
<!-- Title -->
<div class="py-2 px-5">
<h4 class="text-uppercase text-muted font-size-13 mb-0">Menu label</h4>
</div>
<!-- End Title -->
<!-- List -->
<ul class="list-unstyled font-size-14 mb-5">
<li>
<a class="media align-items-center u-sidebar--panel__link py-2 px-5" href="#">
<img class="max-width-4 mr-3" src="../assets/svg/components/finance-dark-icon.svg" alt="Image Description">
<div class="media-body">
<span>Dashboard</span>
</div>
</a>
</li>
<li>
<a class="media align-items-center u-sidebar--panel__link py-2 px-5" href="#">
<img class="max-width-4 mr-3" src="../assets/svg/components/touch-dark-icon.svg" alt="Image Description">
<div class="media-body">
<span>Activity</span>
</div>
</a>
</li>
<li>
<a class="media align-items-center u-sidebar--panel__link py-2 px-5" href="#">
<img class="max-width-4 mr-3" src="../assets/svg/components/team-dark-icon.svg" alt="Image Description">
<div class="media-body">
<span>Team</span>
</div>
</a>
</li>
<li>
<a class="media align-items-center u-sidebar--panel__link py-2 px-5" href="#">
<img class="max-width-4 mr-3" src="../assets/svg/components/email-dark-icon.svg" alt="Image Description">
<div class="media-body">
<span>Mailbox</span>
</div>
</a>
</li>
<li>
<a class="media align-items-center u-sidebar--panel__link py-2 px-5" href="#">
<img class="max-width-4 mr-3" src="../assets/svg/components/projects-dark-icon.svg" alt="Image Description">
<div class="media-body">
<span>Projects</span>
</div>
</a>
</li>
</ul>
<!-- End List -->
<!-- Title -->
<div class="py-2 px-5">
<h4 class="text-uppercase text-muted font-size-13 mb-0">Sub level</h4>
</div>
<!-- End Title -->
<!-- List -->
<ul class="list-unstyled font-size-14 mb-0">
<li>
<a class="media align-items-center u-sidebar--panel__link py-2 px-5" href="#">
<img class="max-width-4 mr-3" src="../assets/svg/components/calendar-dark-icon.svg" alt="Image Description">
<div class="media-body">
<span>Calendar</span>
</div>
</a>
</li>
<li>
<a class="media align-items-center u-sidebar--panel__link py-2 px-5" href="#">
<img class="max-width-4 mr-3" src="../assets/svg/components/cog-dark-icon.svg" alt="Image Description">
<div class="media-body">
<span>Tools</span>
</div>
</a>
</li>
<li>
<a class="media align-items-center u-sidebar--panel__link py-2 px-5" href="#">
<img class="max-width-4 mr-3" src="../assets/svg/components/archive-dark-icon.svg" alt="Image Description">
<div class="media-body">
<span>Archive</span>
</div>
</a>
</li>
</ul>
<!-- End List -->
</div>
</div>
<!-- End Content -->
</div>
<!-- Footer -->
<footer class="u-sidebar__footer u-sidebar__footer--panel py-4 px-5">
<!-- List -->
<ul class="list-inline font-size-14 mb-0">
<li class="list-inline-item">
<a class="u-sidebar--panel__link pr-2" href="../html/pages/privacy.html">Privacy</a>
</li>
<li class="list-inline-item">
<a class="u-sidebar--panel__link px-2" href="../html/pages/terms.html">Terms</a>
</li>
<li class="list-inline-item">
<a class="u-sidebar--panel__link pl-2" href="../html/pages/help.html">
<i class="fa fa-info-circle"></i>
</a>
</li>
</ul>
<!-- End List -->
</footer>
<!-- End Footer -->
</div>
</div>
</aside>
<!-- End Panel Sidebar Navigation -->
CSS library:
<link rel="stylesheet" href="../../assets/vendor/animate.css">
<link rel="stylesheet" href="../../assets/vendor/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.css">
JS library and initialization:
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.concat.min.js"></script>
<!-- JS Space -->
<script src="../../assets/js/components/hs.unfold.js"></script>
<script src="../../assets/js/components/hs.malihu-scrollbar.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// initialization of unfold component
$.HSCore.components.HSUnfold.init($('[data-unfold-target]'));
});
</script>