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()