Layered section allows to shift fragment of the website in a elegant way. It is especially useful when there is a special information after sending a form or just making local overlayer for showing details of something.
Layered section
Layered section
Well, it is amazing!
This mechanism might be very helpful and useful.
This is another layer.
And you can juggle them as you want.
Every layer is binded with corresponding button through the nameAttribute (data-name by default, look below). Base layer is the special one, which is visible as first and sets the section's size.
-
<section id="exemplary-layered-section" class="hawk-layered-section">
<div class="hawk-layered-section__base-layer">
<div class="hawk-layered-section__base-layer-inner">
<header class="simple-header">
<h3 class="subsection-title">
Layered section
</h3>
</header>
<div class="text">
<p>
<em class="em">Layered section</em> allows to shift
fragment of the website in a elegant way. It is especially
useful when there is a special information after sending
a form or just making local overlayer for showing details
of something.
</p>
</div>
<div class="button-container">
<button class="button hawk-layered-section__button" data-name="above">
<div class="button__wrapper">
<div class="button__inner">
Check it out!
</div>
</div>
</button>
</div>
</div>
</div>
<div class="hawk-layered-section__above-layer" data-name="above">
<div class="hawk-layered-section__above-layer-inner">
<!-- some layer -->
</div>
</div>
<div class="hawk-layered-section__above-layer" data-name="another">
<div class="hawk-layered-section__above-layer-inner">
<!-- some layer -->
<div class="button-container">
<button class="button hawk-layered-section__button" data-name="base">
<div class="button__wrapper">
<div class="button__inner">
Back to base layer
</div>
</div>
</button>
</div>
</div>
</div>
</section> -
var layeredSection = new Hawk.LayeredSection($('#exemplary-layered-section'), {
// options and callbacks
});
layeredSection.run();
Properties (options)
| Name | Default value | Description |
|---|---|---|
|
containerClass
string
|
hawk-layered-section
|
- |
|
baseLayerClass
string
|
hawk-layered-section__base-layer
|
- |
|
baseLayerInnerClass
string
|
hawk-layered-section__base-layer-inner
|
- |
|
aboveLayerClass
string
|
hawk-layered-section__above-layer
|
- |
|
aboveLayerInnerClass
string
|
hawk-layered-section__above-layer-inner
|
- |
|
buttonClass
string
|
hawk-layered-section__button
|
- |
|
nameAttribute
string
|
data-name
|
Layer-pointing attribute's name. |
|
baseLayerName
string
|
base
|
Name of the base layer. |
Callbacks
| Name | Arguments | Description |
|---|---|---|
|
onAboveLayerShow
|
|
Is being executed immediately after the layer is shown. |
Public methods
| Name | Arguments | Description |
|---|---|---|
|
showBaseLayer
Hawk.LayeredSection
|
|
Shows the base layer. |
|
hideBaseLayer
Hawk.LayeredSection
|
|
Hides the base layer. |
|
hideLayers
Hawk.LayeredSection
|
|
Hides all the layers. |
|
showLayer
boolean
|
|
Shows the indicated layer. Returns true when the layer exists and may be shown or false otherwise.
|
|
run
Hawk.LayeredSection
|
|
Launches the Layered Section and binds the DOM elements with necessary events. |