Unfold (Dropdown and others)
Toggle contextual overlays for displaying lists of links and more with the Front unfold plugin.
How to use?
Copy-paste the following <script> near the end of your pages under JS Implementing Plugins to enable it.
<script src="./assets/vendor/hs-unfold/dist/hs-unfold.min.js"></script>
Copy-paste the init function under JS Plugins Init., before the closing </body> tag, to enable it.
<script>
$(document).on('ready', function () {
// INITIALIZATION OF UNFOLD
// =======================================================
var unfold = new HSUnfold('.js-hs-unfold-invoker').init();
});
</script>
Basic examples
Basic example with on hover effect.
<!-- Unfold (Dropdown) -->
<div class="hs-unfold">
<a class="js-hs-unfold-invoker dropdown-nav-link dropdown-toggle" href="javascript:;"
data-hs-unfold-options='{
"target": "#basicDropdownHover",
"type": "css-animation",
"event": "hover"
}'>Basic example</a>
<div id="basicDropdownHover" class="hs-unfold-content dropdown-menu">
<a class="dropdown-item active" href="#">One</a>
<a class="dropdown-item" href="#">Two</a>
<a class="dropdown-item" href="#">Three</a>
</div>
</div>
<!-- End Unfold (Dropdown) -->
Another example with on click effect.
<!-- Unfold (Dropdown) -->
<div class="hs-unfold">
<a class="js-hs-unfold-invoker dropdown-nav-link dropdown-toggle" href="javascript:;"
data-hs-unfold-options='{
"target": "#basicDropdownClick"
}'>Click me</a>
<div id="basicDropdownClick" class="hs-unfold-content dropdown-menu">
<a class="dropdown-item active" href="#">One</a>
<a class="dropdown-item" href="#">Two</a>
<a class="dropdown-item" href="#">Three</a>
</div>
</div>
<!-- End Unfold (Dropdown) -->
Extend
Plugin methods are called using a wrapper:
<script>
$(document).on('ready', function () {
// INITIALIZATION OF UNFOLD
// =======================================================
$('.js-unfold-invoker').each(function () {
var unfold = new HSUnfold($(this)).init();
});
});
</script>
Attributes
By assigning a variable, you can call the standard methods of the plugin:
data-hs-unfold-options='{
...
}' - array
Methods
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-hs-unfold-options='{}'.
| Parameters | Description | Default value |
|---|---|---|
|
|
An event that opens / closes an element | 'click' |
|
|
Type of opening / closing of an element of an element. Possible values: simple, css-animation, jquery-slide |
'simple' |
|
|
Animation speed | 300 |
|
|
Slowdown function for transition | 'linear' |
|
|
CSS effect (class) of opening an element of an element | 'slideInUp' |
|
|
CSS effect (class) of closing an element of an element | 'fadeOut' |
|
|
If true, then automatically closes all open anfold elements when shelling |
false |
|
|
Informs the script about the presence of an overlay | false |
|
|
If true, then the automatic positioning of the element's front is disabled. It is possible to determine positioning directly from css |
false |
|
|
Determines if the block is full width or not. If true, then the smartposition is disabled. |
false |
|
|
Custom styles that are added when the overlay is generated. Example: { "backgroundColor": "#000", "fontSize": "14px" } | {} |
|
|
Class telling the script which element is the parent of the element | '.hs-unfold' |
|
|
A class telling the script which element inside the initialized object is the anfold element | '.hs-unfold-content' |
|
|
A class telling the script which element inside the initialized object is an invoker | '.js-hs-unfold-invoker' |
|
|
Class added to the current invoker | '.hs-active' |
|
|
Overlay class. This class is added to the overlay when the script creates it | '.hs-unfold-overlay' |
|
|
This class is added to the block, in the case of an invoker is located at the bottom of the viewport. This class allows you to show a block higher than the invoker | '.hs-unfold-reverse-y' |
|
|
Function performed before block opening | () => {} |
|
|
Function performed after block closure | () => {} |