dynamicnav v1.0.5

DynamicNavbar

A simple very lightweight navigation system to hide and show pages based on button clicks without reloading your page.

Installation

You can install DynamicNav with npm.

Npm

npm install dynamicnav

Setup

You only need to give the ID from the content element. This package will automatically assume the button to show the content to have a class of {id-of-content}-btn for example:

The page with the ID of #content-page is activated with the .content-page-btn class.

This means you are able to have multiple buttons showing a single page.

Here is a simple example:

const DynamicNav = require('dynamicnav')

var navbar = new DynamicNav({
    default: '#content', // Required
    pages: [
        {
            id: '#content', // Required
        },
        {
            id: '#contact', // Required
        }
    ]
});

<div>
    <button class='content-btn'>Open content page</button>
    <button class='contact-btn'>Open contact page</button>

    <div id="content">
        Content page
    </div>

    <div id="contact">
        Contact page
    </div>
</div>