andygreig / bamboo.js

Responsive website menu and structure

Bamboo.js

This is a basic structural framework for responsive Web Apps that require a sliding menu and a fixed header with scrollable content area.

The burger menu button toggles the menu open and close. You can also swipe left or right to interact with the menu. When the browser is greater than a specified breakpoint (desktop) the menu is permanently visible on the left.

This is an example

How to use

Include the Bamboo.js Script, CSS file and use the index.html as the base.

<nav id="main-nav" class="navigation overflow">
    <ul>
    <li><a href="#">Menu item</a></li>
    <li><a href="#">Menu item 2</a></li>
</ul>;
</nav>;
<div id="container">;
    <header class="primary">;
        <span class="open icon">&#9776;</span>
        <hgroup><h1>Title</h1></hgroup>
    </header>
    <section id="scroller" class="overflow">
        <div id="content">
            <!-- Content goes in here -->

            <!-- Content ends -->
        </div>
    </section>

</div&gt;

<script src="http://code.jquery.com/jquery-2.0.0.min.js"></script>
<script src="js/bamboo.0.1.js"></script>

<script>
    var site = new Bamboo();
</script>

You can define the following properties:

menu: true/false
breakpoint: default (768),
menuWidth: default (265),
headerHeight: default (50),
snapThreshold: null or 0-1,
resize: null // function to allow a callback

Example

var site = new Bamboo({
    menu: true,
    swipeToOpen: false,
    breakpoint: 768,
    menuWidth: 265,
    headerHeight: 50,
    resize: function(){
        // function to call on page resize/orientation change
    }
});

bamboo.js's Issues

swipeToOpen - should work only in one direction

If I swipe from right to left, the menu should not open.
Look at the screenshot..

cheers

google chrome scrolling issue

This is classic off canvas menu but there seems to be a big issue on chrome android, the scroll is super slow, it works on the stock browser and other browsers however there seems to be a problem with the chrome scrolling. any fixes on that?

Events not firing on Windows 8 Surface

The combination of touch and click on the same device is confusing the click handler. This needs to account for both, not one or the other.

automatically close menu after pressing an item

I think it would be very easy and comfortable for users only choose what they want without manually closing menu. Thank you in advance, you are doing a great work!

Main content does not reset when re-sizing with open menu

How to replicate:

1. Change browser window size to smallest width to trigger menu icon.
2. Open the menu (so menu pushes main content).
3. Now expand the browser size to max width.

Although this wouldn't affect specific browser widths (mobile/tablet users wouldnt be able to replicate this), it can mess up the layout for desktop browsers.

Right Menu example

Is there any way to implement Right Menu with Bamboo.js?