Title: Bamboo.js – responsive sliding menu

Date: Thursday, July 28, 2016

I have built this lightweight framework to help speed up the development time on the web apps I build.

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

Responsive sliding menu

This follows the Firefox HTML5 Application Patterns for navigation. Read more at their developer hub.

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.

Demo

Try the demo here: Responsive sliding menu demo or at bit.ly/18I7cFf

How to use it

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>

<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,
	breakpoint: 768,
	menuWidth: 265,
	headerHeight: 50,
	resize: function(){
		// function to call on page resize/orientation change
	}
});

Get the files

The files are all available here on Github

Category: Experiments

Tags: ,,