Unfold (Sidebar)
Examples of toggle contextual overlays for displaying lists of links and more with the Front unfold plugin.
Login form
HTML:
<a id="sidebarLoginFormInvoker" class="btn btn-xs u-btn--icon u-btn-text-secondary u-sidebar__toggler" href="javascript:;" role="button"
aria-controls="sidebarLoginForm"
aria-haspopup="true"
aria-expanded="false"
data-unfold-event="click"
data-unfold-hide-on-scroll="false"
data-unfold-target="#sidebarLoginForm"
data-unfold-type="css-animation"
data-unfold-animation-in="fadeInRight"
data-unfold-animation-out="fadeOutRight"
data-unfold-duration="500">
<span class="fa fa-user-circle u-btn--icon__inner font-size-14"></span>
</a>
<aside id="sidebarLoginForm" class="u-sidebar u-unfold--css-animation u-unfold--hidden" aria-labelledby="sidebarLoginFormInvoker">
<div class="u-sidebar__scroller">
<div class="u-sidebar__container">
<div class="u-header-sidebar__footer-offset">
<div class="d-flex align-items-center pt-4 px-7">
<button type="button" class="close ml-auto"
aria-controls="sidebarLoginForm"
aria-haspopup="true"
aria-expanded="false"
data-unfold-event="click"
data-unfold-hide-on-scroll="false"
data-unfold-target="#sidebarLoginForm"
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>
<div class="js-scrollbar u-sidebar__body">
<div class="u-sidebar__content u-header-sidebar__content">
<form class="js-validate">
<div id="login" data-target-group="idForm">
<header class="text-center mb-7">
<h2 class="h4 mb-0">Welcome Back!</h2>
<p>Login to manage your account.</p>
</header>
<div class="js-form-message mb-4">
<div class="js-focus-state input-group u-form">
<div class="input-group-prepend u-form__prepend">
<span class="input-group-text u-form__text">
<span class="fa fa-user u-form__text-inner"></span>
</span>
</div>
<input type="email" class="form-control u-form__input" name="email" required
placeholder="Email"
aria-label="Email"
data-msg="Please enter a valid email address."
data-error-class="u-has-error"
data-success-class="u-has-success">
</div>
</div>
<div class="js-form-message mb-2">
<div class="js-focus-state input-group u-form">
<div class="input-group-prepend u-form__prepend">
<span class="input-group-text u-form__text">
<span class="fa fa-lock u-form__text-inner"></span>
</span>
</div>
<input type="password" class="form-control u-form__input" name="password" required
placeholder="Password"
aria-label="Password"
data-msg="Your password is invalid. Please try again."
data-error-class="u-has-error"
data-success-class="u-has-success">
</div>
</div>
<div class="clearfix mb-4">
<a class="js-animation-link float-right small u-link-muted" href="javascript:;"
data-target="#forgotPassword"
data-link-group="idForm"
data-animation-in="slideInUp">Forgot Password?</a>
</div>
<div class="mb-2">
<button type="submit" class="btn btn-block btn-primary u-btn-primary transition-3d-hover">Login</button>
</div>
<div class="text-center mb-4">
<span class="small text-muted">Do not have an account?</span>
<a class="js-animation-link small" href="javascript:;"
data-target="#signup"
data-link-group="idForm"
data-animation-in="slideInUp">Signup
</a>
</div>
<div class="text-center">
<span class="u-divider u-divider--xs u-divider--text mb-4">OR</span>
</div>
<div class="d-flex">
<a class="btn btn-block btn-sm u-btn-facebook--air transition-3d-hover mr-1" href="#">
<span class="fab fa-facebook-square mr-1"></span>
Facebook
</a>
<a class="btn btn-block btn-sm u-btn-google--air transition-3d-hover ml-1 mt-0" href="#">
<span class="fab fa-google mr-1"></span>
Google
</a>
</div>
</div>
<div id="signup" style="display: none; opacity: 0;" data-target-group="idForm">
<header class="text-center mb-7">
<h2 class="h4 mb-0">Welcome to Front.</h2>
<p>Fill out the form to get started.</p>
</header>
<div class="js-form-message mb-4">
<div class="js-focus-state input-group u-form">
<div class="input-group-prepend u-form__prepend">
<span class="input-group-text u-form__text">
<span class="fa fa-user u-form__text-inner"></span>
</span>
</div>
<input type="email" class="form-control u-form__input" name="email" required
placeholder="Email"
aria-label="Email"
data-msg="Please enter a valid email address."
data-error-class="u-has-error"
data-success-class="u-has-success">
</div>
</div>
<div class="js-form-message mb-4">
<div class="js-focus-state input-group u-form">
<div class="input-group-prepend u-form__prepend">
<span class="input-group-text u-form__text">
<span class="fa fa-lock u-form__text-inner"></span>
</span>
</div>
<input type="password" class="form-control u-form__input" name="password" required
placeholder="Password"
aria-label="Password"
data-msg="Your password is invalid. Please try again."
data-error-class="u-has-error"
data-success-class="u-has-success">
</div>
</div>
<div class="js-form-message mb-4">
<div class="js-focus-state input-group u-form">
<div class="input-group-prepend u-form__prepend">
<span class="input-group-text u-form__text">
<span class="fa fa-key u-form__text-inner"></span>
</span>
</div>
<input type="password" class="form-control u-form__input" name="confirmPassword" required
placeholder="Confirm Password"
aria-label="Confirm Password"
data-msg="Password does not match the confirm password."
data-error-class="u-has-error"
data-success-class="u-has-success">
</div>
</div>
<div class="mb-2">
<button type="submit" class="btn btn-block btn-primary u-btn-primary transition-3d-hover">Get Started</button>
</div>
<div class="text-center mb-4">
<span class="small text-muted">Already have an account?</span>
<a class="js-animation-link small" href="javascript:;"
data-target="#login"
data-link-group="idForm"
data-animation-in="slideInUp">Login
</a>
</div>
<div class="text-center">
<span class="u-divider u-divider--xs u-divider--text mb-4">OR</span>
</div>
<div class="d-flex">
<a class="btn btn-block btn-sm u-btn-facebook--air transition-3d-hover mr-1" href="#">
<span class="fab fa-facebook-square mr-1"></span>
Facebook
</a>
<a class="btn btn-block btn-sm u-btn-google--air transition-3d-hover ml-1 mt-0" href="#">
<span class="fab fa-google mr-1"></span>
Google
</a>
</div>
</div>
<div id="forgotPassword" style="display: none; opacity: 0;" data-target-group="idForm">
<header class="text-center mb-7">
<h2 class="h4 mb-0">Recover Password.</h2>
<p>Enter your email address and an email with instructions will be sent to you.</p>
</header>
<div class="js-form-message mb-4">
<div class="js-focus-state input-group u-form">
<div class="input-group-prepend u-form__prepend">
<span class="input-group-text u-form__text">
<span class="fas fa-envelope u-inner-form__text"></span>
</span>
</div>
<input type="email" class="form-control u-form__input" name="email" required
placeholder="Your email"
aria-label="Your email"
data-msg="Please enter a valid email address."
data-error-class="u-has-error"
data-success-class="u-has-success">
</div>
</div>
<div class="mb-2">
<button type="submit" class="btn btn-block btn-primary u-btn-primary transition-3d-hover">Recover Password</button>
</div>
<div class="text-center mb-4">
<span class="small text-muted">Remember your password?</span>
<a class="js-animation-link small" href="javascript:;"
data-target="#login"
data-link-group="idForm"
data-animation-in="slideInUp">Login
</a>
</div>
</div>
</form>
</div>
</div>
</div>
<footer class="u-sidebar__footer u-sidebar__footer--account">
<ul class="list-inline mb-0">
<li class="list-inline-item pr-3">
<a class="u-sidebar__footer--account__text" href="../pages/privacy.html">Privacy</a>
</li>
<li class="list-inline-item pr-3">
<a class="u-sidebar__footer--account__text" href="../pages/terms.html">Terms</a>
</li>
<li class="list-inline-item">
<a class="u-sidebar__footer--account__text" href="../pages/help.html">
<i class="fa fa-info-circle"></i>
</a>
</li>
</ul>
<div class="position-absolute-bottom-0">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 300 126.5" style="margin-bottom: -5px; enable-background:new 0 0 300 126.5;" xml:space="preserve">
<path class="u-fill-primary" opacity=".6" d="M0,58.9c0-0.9,5.1-2,5.8-2.2c6-0.8,11.8,2.2,17.2,4.6c4.5,2.1,8.6,5.3,13.3,7.1C48.2,73.3,61,73.8,73,69
c43-16.9,40-7.9,84-2.2c44,5.7,83-31.5,143-10.1v69.8H0C0,126.5,0,59,0,58.9z"/>
<path class="u-fill-primary" d="M300,68.5v58H0v-58c0,0,43-16.7,82,5.6c12.4,7.1,26.5,9.6,40.2,5.9c7.5-2.1,14.5-6.1,20.9-11
c6.2-4.7,12-10.4,18.8-13.8c7.3-3.8,15.6-5.2,23.6-5.2c16.1,0.1,30.7,8.2,45,16.1c13.4,7.4,28.1,12.2,43.3,11.2
C282.5,76.7,292.7,74.4,300,68.5z"/>
<circle class="u-fill-danger" cx="259.5" cy="17" r="13"/>
<circle class="u-fill-primary" cx="290" cy="35.5" r="8.5"/>
<circle class="u-fill-success" cx="288" cy="5.5" r="5.5"/>
<circle class="u-fill-warning" cx="232.5" cy="34" r="2"/>
</svg>
</div>
</footer>
</div>
</div>
</aside>
CSS library:
<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>
<script src="assets/vendor/jquery-validation/dist/jquery.validate.min.js"></script>
<!-- JS Front -->
<script src="assets/js/helpers/hs.focus-state.js"></script>
<script src="assets/js/components/hs.malihu-scrollbar.js"></script>
<script src="assets/js/components/hs.unfold.js"></script>
<script src="assets/js/components/hs.validation.js"></script>
<script src="assets/js/components/hs.show-animation.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// initialization of unfold component
$.HSCore.components.HSUnfold.init($('[data-unfold-target]'), {
afterOpen: function () {
$(this).find('input[type="search"]').focus();
}
});
// initialization of malihu scrollbar
$.HSCore.components.HSMalihuScrollBar.init($('.js-scrollbar'));
// initialization of forms
$.HSCore.helpers.HSFocusState.init();
// initialization of form validation
$.HSCore.components.HSValidation.init('.js-validate', {
rules: {
confirmPassword: {
equalTo: '#password'
}
}
});
// initialization of show animations
$.HSCore.components.HSShowAnimation.init('.js-animation-link');
});
</script>
Account
HTML:
<a id="sidebarAccountInvoker" class="btn btn-xs u-btn-text-secondary u-sidebar--account__toggle-bg ml-1" href="javascript:;" role="button"
aria-controls="sidebarAccount"
aria-haspopup="true"
aria-expanded="false"
data-unfold-event="click"
data-unfold-hide-on-scroll="false"
data-unfold-target="#sidebarAccount"
data-unfold-type="css-animation"
data-unfold-animation-in="fadeInRight"
data-unfold-animation-out="fadeOutRight"
data-unfold-duration="500">
<span class="position-relative">
<span class="u-sidebar--account__toggle-text">Frank Harvey</span>
<img class="u-sidebar--account__toggle-img" src="../assets/img/100x100/img3.jpg" alt="Image Description">
<span class="u-badge u-badge-success u-badge-pos rounded-circle">3</span>
</span>
</a>
<aside id="sidebarAccount" class="u-sidebar u-unfold--css-animation u-unfold--hidden" aria-labelledby="sidebarAccountInvoker">
<div class="u-sidebar__scroller">
<div class="u-sidebar__container">
<div class="u-sidebar--account__footer-offset">
<div class="d-flex justify-content-between align-items-center pt-4 px-7">
<h3 class="h6 mb-0">My Account</h3>
<button type="button" class="close ml-auto"
aria-controls="sidebarAccount"
aria-haspopup="true"
aria-expanded="false"
data-unfold-event="click"
data-unfold-hide-on-scroll="false"
data-unfold-target="#sidebarAccount"
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>
<div class="js-scrollbar u-sidebar__body">
<header class="d-flex align-items-center u-sidebar--account__holder mt-3">
<div class="position-relative">
<img class="u-sidebar--account__holder-img" src="../assets/img/100x100/img3.jpg" alt="Image Description">
<span class="u-badge u-badge--xs u-badge-border-success u-badge-pos rounded-circle"></span>
</div>
<div class="ml-3">
<strong>Frank Harvey <span class="badge badge-success ml-1">Pro</span></strong>
<span class="u-sidebar--account__holder-text">Lead Support Adviser</span>
</div>
<div class="btn-group position-relative ml-auto mb-auto">
<a id="sidebar-account-settings-invoker" class="btn btn-xs u-btn--icon u-btn-text-secondary rounded" href="javascript:;" role="button"
aria-controls="sidebar-account-settings"
aria-haspopup="true"
aria-expanded="false"
data-toggle="dropdown"
data-unfold-event="click"
data-unfold-hide-on-scroll="false"
data-unfold-target="#sidebar-account-settings"
data-unfold-type="css-animation"
data-unfold-duration="300"
data-unfold-delay="300"
data-unfold-animation-in="slideInUp"
data-unfold-animation-out="fadeOut">
<span class="fa fa-ellipsis-v u-btn--icon__inner"></span>
</a>
<ul id="sidebar-account-settings" class="u-unfold right-0 mt-4" aria-labelledby="sidebar-account-settings-invoker">
<a class="u-list__link" href="#">Settings</a>
<a class="u-list__link" href="#">History</a>
<div class="dropdown-divider"></div>
<a class="u-list__link" href="#">Sign Out</a>
</ul>
</div>
</header>
<div class="u-sidebar__content--account">
<ul class="list-unstyled u-sidebar--account__list">
<li class="u-sidebar--account__list-item">
<a class="u-sidebar--account__list-link" href="../pages/profile.html">
<span class="fa fa-user-circle u-sidebar--account__list-icon mr-2"></span>
Profile
</a>
</li>
<li class="u-sidebar--account__list-item">
<a class="u-sidebar--account__list-link" href="../pages/user-contacts.html">
<span class="fa fa-address-book u-sidebar--account__list-icon mr-2"></span>
User Contacts
</a>
</li>
<li class="u-sidebar--account__list-item">
<a class="u-sidebar--account__list-link" href="../pages/projects.html">
<span class="fa fa-cubes u-sidebar--account__list-icon mr-2"></span>
Projects <span class="badge badge-danger float-right mt-1">3</span>
</a>
</li>
<li class="u-sidebar--account__list-item">
<a class="u-sidebar--account__list-link" href="../pages/reviews.html">
<span class="fa fa-comments u-sidebar--account__list-icon mr-2"></span>
Reviews
</a>
</li>
<li class="u-sidebar--account__list-item">
<a class="u-sidebar--account__list-link" href="../pages/settings.html">
<span class="fa fa-cogs u-sidebar--account__list-icon mr-2"></span>
Settings
</a>
</li>
</ul>
<div class="u-sidebar--account__list-divider"></div>
<ul class="list-unstyled u-sidebar--account__list">
<li class="u-sidebar--account__list-item">
<a class="u-sidebar--account__list-link" href="../pages/profile.html">
<span class="fa fa-tasks u-sidebar--account__list-icon mr-2"></span>
Tasks
</a>
</li>
<li class="u-sidebar--account__list-item">
<a class="u-sidebar--account__list-link" href="../pages/user-contacts.html">
<span class="fa fa-calendar u-sidebar--account__list-icon mr-2"></span>
Calendar
</a>
</li>
</ul>
</div>
</div>
</div>
<footer class="u-sidebar__footer u-sidebar__footer--account">
<ul class="list-inline mb-0">
<li class="list-inline-item pr-3">
<a class="u-sidebar__footer--account__text" href="#">Privacy</a>
</li>
<li class="list-inline-item pr-3">
<a class="u-sidebar__footer--account__text" href="../pages/terms.html">Terms</a>
</li>
<li class="list-inline-item">
<a class="u-sidebar__footer--account__text" href="../pages/help.html">
<i class="fa fa-info-circle"></i>
</a>
</li>
</ul>
<div class="position-absolute-bottom-0">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 300 126.5" style="margin-bottom: -5px; enable-background:new 0 0 300 126.5;" xml:space="preserve">
<path class="u-fill-primary" opacity=".6" d="M0,58.9c0-0.9,5.1-2,5.8-2.2c6-0.8,11.8,2.2,17.2,4.6c4.5,2.1,8.6,5.3,13.3,7.1C48.2,73.3,61,73.8,73,69
c43-16.9,40-7.9,84-2.2c44,5.7,83-31.5,143-10.1v69.8H0C0,126.5,0,59,0,58.9z"/>
<path class="u-fill-primary" d="M300,68.5v58H0v-58c0,0,43-16.7,82,5.6c12.4,7.1,26.5,9.6,40.2,5.9c7.5-2.1,14.5-6.1,20.9-11
c6.2-4.7,12-10.4,18.8-13.8c7.3-3.8,15.6-5.2,23.6-5.2c16.1,0.1,30.7,8.2,45,16.1c13.4,7.4,28.1,12.2,43.3,11.2
C282.5,76.7,292.7,74.4,300,68.5z"/>
<circle class="u-fill-danger" cx="259.5" cy="17" r="13"/>
<circle class="u-fill-primary" cx="290" cy="35.5" r="8.5"/>
<circle class="u-fill-success" cx="288" cy="5.5" r="5.5"/>
<circle class="u-fill-warning" cx="232.5" cy="34" r="2"/>
</svg>
</div>
</footer>
</div>
</div>
</aside>
With no name toggler.
<a id="sidebarAccountInvokerWithoutName" class="btn btn-xs u-btn-text-secondary u-sidebar--account__toggle-bg pl-1 ml-1" href="javascript:;" role="button"
aria-controls="sidebarAccount"
aria-haspopup="true"
aria-expanded="false"
data-unfold-event="click"
data-unfold-hide-on-scroll="false"
data-unfold-target="#sidebarAccount"
data-unfold-type="css-animation"
data-unfold-animation-in="fadeInRight"
data-unfold-animation-out="fadeOutRight"
data-unfold-duration="500">
<span class="position-relative">
<img class="u-sidebar--account__toggle-img" src="../assets/img/100x100/img3.jpg" alt="Image Description">
<span class="u-badge u-badge-success u-badge-pos rounded-circle">3</span>
</span>
</a>
CSS library:
<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 Front -->
<script src="assets/js/components/hs.malihu-scrollbar.js"></script>
<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]'), {
afterOpen: function () {
$(this).find('input[type="search"]').focus();
}
});
// initialization of malihu scrollbar
$.HSCore.components.HSMalihuScrollBar.init($('.js-scrollbar'));
});
</script>