HTML5 Facebook Style Sliding Menu Using Twitter Bootstrap Collapse

February 26, 2013 Dwayne Forde

Ever since Facebook, and other “super” apps started to implement a side menu that slides out for their main navigation, this pattern has pretty much turned into the standard for any application that has a lot of content and a complex navigation stack. Organizing information with a sliding menu is becoming increasingly common, as numerous success stories of companies taking a “mobile first” approach has encouraged many to publish as much content on our mobile devices as possible.

As UX paradigms shift there arose a demand to replicate native features in browsers, especially in the case of mobile HMTL5 where hardware acceleration continues to improve.

There are many ways to accomplish this in HTML5. Most solutions use javascript to calculate screen dimensions and apply styles to elements when the document is ready and when orientation events occur. Not a lot of JavaScript is necessary to develop a Facebook-like sliding sidebar. The approach taken in this article accomplishes the following:

  • High performance: Minimize the number of DOM elements. Rely purely on CSS3 animations for the sliding animation so that it is as smooth as possible.
  • Low Overhead: Easy to implement and maintain JavaScript. The only dependencies are jQuery and Twitter Bootstrap Collapse.
  • Compatibility: Implementation is simple enough that it works in all Webkit browsers.

Here’s an approach that requires only 3 divs, jQuery and Twitter Bootstrap Collapse:

1. The Body

HTML

<html>
  <title>Sliding Sidebar</title>
  <head></head>
  <body></body>
</html>

CSS

  .body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
  }

The width, height, margin, and padding properties make sure that the body takes up the entire screen.

2. The Frame

HTML

<html>
  <title>Sliding Sidebar</title>
  <head></head>
  <body>
    <div class="viewport">
      <div class="frame"></div>
    </div>
  </body>
</html>

CSS

  .viewport {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
  }

  .viewport .frame {
    position: absolute;
    width: 200%;
    top: 0;
    bottom: 0;
    left: 0;
  }

The viewport element will allow our content to slide off the screen without the windows scrolling horizontally via overflow: hidden;.

The frame holds both the sidebar and page content. width is set to 200% so that you have enough physical space to move your content as far as you want off the right of the screen.

If you want to stay with the Facebook navigation theme for your page content you should set the position, top, bottom, and left properties so that it’s locked into place and will take up the entire screen no matter what the content size is. This way, when our page content exceeds the length of the screen we can have internal div scrolling while keeping a navigation bar at the top. If full page scrolling is your goal, you can remove those properties.

3. The Menu

HTML

<html>
  <title>Sliding Sidebar</title>
  <head></head>
  <body>
    <div class="viewport">
      <div class="frame">
        <div class="menu nav-collapse collapse width"></div>
      </div>
    </div>
  </body>
</html>

CSS

.menu {
  height:100%;
}

.menu.collapse {
  float:left;
  height: 100% !important;
  width: auto;
}

menu.collapse.height {
  position: relative;
  height: 0;
  overflow: hidden;
  -webkit-transition: height 0.35s ease;
  -moz-transition: height 0.35s ease;
  -o-transition: height 0.35s ease;
  transition: height 0.35s ease;
}

menu.collapse.width {
  position: relative;
  width: 0;
  overflow: hidden;
  -webkit-transition: width 0.35s ease;
  -moz-transition: width 0.35s ease;
  -o-transition: width 0.35s ease;
  transition: width 0.35s ease;
}

menu.collapse.in.width {
  width: auto;
}

menu.collapse.in.height {
  height: auto;
}

menu.collapse-inner {
  position: relative;
  width: 250px;
  height: 100%;
}

Bootstrap Collapse natively slides vertically, most of the styles for the menu are used to make it slide horizontally. The important properties are the transition and collapse-inner. The transition property dictates the characteristics of the sliding animation while collapse-inner contains the properties for the element that will hold the menu content.

4. The View

HTML

<html>
  <title>Sliding Sidebar</title>
  <head></head>
  <body>
    <div class="viewport">
      <div class="frame">
        <div class="menu nav-collapse collapse width"></div>
        <div class="view"></div>
      </div>
    </div>
  </body>
</html>

CSS

.view {
  width: 50%;
  height: 100%;
  overflow: hidden;
}

Since the frame width was set to 200%, we can set the view to 50%. height for both the frame and view are set to 100%. With these values in place we can be sure that the view will always fit 100% of the screen even after an orientation change. Again, if you want full page scrolling you’ll have to set both height properties to 'auto'.

That’s it!

That’s all there is to making a simple sliding menu in HTML5. You can check out a working example, with stub content, here. Hopefully, hardware acceleration will continue to improve in mobile browsers, across all platforms, to the point where performance differences using this UI pattern are negligible.

Update

As promised, here’s a working example in the form of a Github repository. Includes the stylesheet in both CSS and SCSS.

Update #2: Scrolling

This solution prevents you from scrolling vertically. Scrolling for mobile can warrant an article in itself, depending on the device coverage you’re aiming for. Generally, a solution like iScroll is compatible with most devices and is easy to implement, but I plan to write a follow up article that will study the issue in greater depth.

About the Author

Biography

Previous
HAWQ: The New Benchmark for SQL on Hadoop
HAWQ: The New Benchmark for SQL on Hadoop

Business data analytics has changed tremendously in recent years. The high cost of storage and processing f...

Next
What was the most frustrating thing I spent time on this week? Oh yeah…
What was the most frustrating thing I spent time on this week? Oh yeah…

There was a feature to generate some documents and email a zip file on a weekly basis. After a lively discu...

×

Subscribe to our Newsletter

!
Thank you!
Error - something went wrong!