Input Item
This page documents the input item in HyperNav.
These items provide the interactivity that is usually achieved
with JavaScript. Each input item has a separate state element and
the two are connected via an id.
The placement of both elements in the DOM is important. The appearance of the input elements
can easily be changed according to the state by classes provided by HyperNav.
Make note of the usage of input and label elements.
Structure
x
12
1
<!-- The input state element. Note the id. -->2
<input type="checkbox" class="hn-input-state" id="cb">3
4
<!-- The input element itself. Note the for, which matches the id above. -->5
<label class="hn-input" for="cb">6
<span class="hn-input-default">7
<!-- Content that is visible when the input state element is in its default state. -->8
</span>9
<span class="hn-input-active">10
<!-- Content that is visible when the input state element is in its activated state. -->11
</span>12
</label>Initial State
The initial state of the input item can be manipulated by specifying the checked attribute.
xxxxxxxxxx1
13
1
<!-- The input state element. Note the id. -->2
<!-- The initial state has been set with the `checked` attribute. -->3
<input type="checkbox" class="hn-input-state" id="cb" checked="checked">4
5
<!-- The input element itself. Note the for, which matches the id above. -->6
<label class="hn-input" for="cb">7
<span class="hn-input-default">8
<!-- Content that is visible when the input state element is in its default state. -->9
</span>10
<span class="hn-input-active">11
<!-- Content that is visible when the input state element is in its activated state. -->12
</span>13
</label>