clientside-view-responsive-header
v1.7.9
Published
a responsive, reusable header element. build a responsive, multilayer header with only a json file.
Downloads
8
Maintainers
Readme
clientside-view-responsive-header
This module utilizes the [clientside-require] and [clientside-view-loader] modules (found on NPM) to make it easy to create a stylish and responsive header.
The header expects a structured JSON object to be passed to it, from which it will build the header. The dom that the module produces automatically listens for the window to resize and updates how many elements can be displayed or must be put in the "menu" dropdown based on the window size.
visual demo
short example
the following JSON:
{
"left" : [
{
"description" : "go to home page",
"html" : "<img height='40px' src = '/path/to/logo.png'>",
"src" : "/path/to/home.html"
}
],
"right" : [
{
"title" : "Blog",
"src" : "/path/to/blog.html"
},
{
"html" : "<b>Login</b>",
"src" : "/path/to/loginpage.html"
}
]
}
creates this result:
more examples
please see the demo
directory for more examples and usage documentation
Additional Functionality
Each element is provided with a hide()
and remove()
method. By retreiving the DOM node of a .header_element
, you can hide the element from the header dynamically with the hide()
method. The hide()
method will ensure that the dropdowns reflect whether they have children left or not and that the responsive wrapping functionality is not broken.
For example:
document.querySelector(".header_element#identifier_for_target_element").hide();
or
document.getElementById("identifier_for_target_element").hide()