Bugless Panel is a JavaScript plugin used to create side menu panels on mobile web sites, which can be opened by a swipe on the screen, or by click on a hamburger menu button for example. It is written on pure JavaScript and doesn't require any third party libraries like jQuery, all what you need to do is to connect the JavaScript and CSS file to your project, and to initialize the panel. As result you will get cool side menu panels, which are cross browser and cross platform. Bugless Panel was tested, and it runs perfect on such devices, OS and browsers like:
- iPhone 5s / iPhone 6 / iPad devices with iOS and Safari or Chrome browsers;
- Samsung Galaxy S5;
- Samsung S6 Edge;
- LG Nexus 4;
- And other android devices with Chrome browser.
You can see a DEMO of this plugin on official Bugless Panle page
| Side menu panel | Top menu panel |
|---|---|
 |
 |
To use Bugless Panel you need to:
- Connect JavaScrip and CSS file on your page
<link rel="stylesheet" href="css/bugless-panel.min.css">
<script src="js/bugless-panel.min.js"></script>- Create the base HTML structure of the side panel which includes few required elements
<div class="bugless-panel" id="left-panel">
<div class="inner">Panel content</div>
</div>- And the last thing that you need to do is to initialize the panel in your JavaScript file
var leftPanel = new Panel('#left-panel', {
position: Panel.POSITION_LEFT
});
BuglessPanels.init({
content: '.container',
leftPanel: leftPanel
});By doing these steps you should get a left side panel which can be opened by a right swipe.
To make Bugless Panel work properly you should separate your page content from panels, in other words you should have a structure like this:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/bugless-panel.min.css">
</head>
<body>
<div class="container">
Page content
</div>
<div class="bugless-panel" id="left-panel">
<div class="inner">Panel content</div>
</div>
<script src="js/bugless-panel.min.js"></script>
</body>
</html>When we initialize BuglessPanels in the example:
BuglessPanels.init({
content: '.container',
leftPanel: leftPanel
});
we mean that by swipe on .container - the leftPanel should be opened.
But you can also open the leftPanel by clicking on a button, for this you need to call open method of the panel.
document.querySelector('.btn').addEventListener('click', function(e) {
leftPanel.open();
});moveThresholdDefault value: 20 - defines the touch move distance in pixels which should be done to consider this as a swipe and to start dragging the panel.
panelThresholdDefault value: 40 - defined the distance in % (percents) which the panel should be dragged to consider it opened or closed.
exceptionsDefault value: [] - array containing selectors (id or classes) to elements which are exceptions and should not be listened for swipe.
activePanelDefault value: null - contains current opened panel.
panelsDefault value: [] - contains the list off all initialized panels objects.
closeAllUse BuglessPanels.closeAll() to close all opened panels.
positionRequired property which sets the panel position: left, top, right or bottom. Can have one of following values:
Panel.POSITION_LEFT, Panel.POSITION_RIGHT, Panel.POSITION_TOP, Panel.POSITION_BOTTOM.
widthDefault value: 100 - allows to set the panel width in % (percents).
heightDefault value: 100 - allows to set the panel height in % (percents).
maxWidthDefault value: null - allows to set the panel max width in pixels, that the panel can be opened, even if the panel width is bigger.
exceptionsDefault value: [] - contains an array of selectors of elements on the panel which will be ignored when dragging on them.
closeBySwipeDefault value: true - allows to disable possibility to close the panel by a swipe.
isOpenedAllows check if the panel is opened or not.
openUse open method to open the panel programmatically.
closeUse close method to close the panel programmatically.
There are 4 events of panel object:
- open - is fired when the panel stars to open;
- opened - is fired when the panel is opened;
- close - is fired when the panel starts to close;
- closed - is fired when the panel is closed.
Example of use
var leftPanel = new Panel('#left-panel', {
position: Panel.POSITION_LEFT
});
leftPanel.on('opened', function(p) {
// 'p' is the object of this panel
alert('panel is opened');
});