leaflet-sidenav
A responsive sidenav for Leaflet
Install
npm install leaflet-sidenav
Usage
Example code at examples/index.html
API
Leaflet-sidenav provides a simple API to dynamically modify the sidenav. All functions may be chained.
Create a new nav
var sidenav = Lcontrol;
Modify a nav
/* add a new panel */var panelContent = id: 'userinfo' // UID, used to access the panel tab: '<i class="fa fa-gear"></i>' // content can be passed as HTML string, pane: someDomNodeinnerHTML // DOM elements can be passed, too position: 'bottom' // vertical alignment, 'top' or 'bottom';sidenav; /* remove a panel */sidenav; /* en- / disable a panel */sidenav;sidenav;
open / close / show content
/* open a panel */sidenav; /* close the sidenav */sidenav;
markup
If you use the sidenav with static content only, you can predefine content in HTML:
<!-- Nav tabs --> <!-- top aligned tabs --> <!-- bottom aligned tabs --> <!-- Tab panes --> sidenav-v2 A responsive sidenav for mapping libraries Messages Profile
You still need to initialize the sidenav (see API.creation)
Events
The sidenav fires 3 types of events:
opening
, closing
, and content
.
The latter has a payload including the id of the activated content div.
You can listen for them like this:
sidenav
License
sidenav is free software, and may be redistributed under the MIT license.