Using Hamburgler.js to Create a Custom HTML 5 Course Menu

When you are building custom eLearning courses you will at some point need to create a menu. Sure you could custom code it but why not use the many different JavaScript libraries out there that go a lot of the work for you.

Not too long ago I was building a custom player using jQuery Mobile and needed to create a menu to jump to different pages in the course. I did some Google searching and found this cool JavaScript library that does create a cool pop up menu. Here is what the course looked like before the menu.

player

To use Hamburgler.js you first need to download the source files here. Once you have downloaded those two files attach both of the files in your <head> tag like so.

<!-- Hamburger JS & CSS-->
<script src="js/other/hamburgler.js"></script>
<link rel="stylesheet" href="css/other/hamburgler.css">

Now that you have the code attached let’s create the menu content. You do that with the following code.

<!-- Menu -->
<div class="mobilenav">
<ul>
	<li><a href="#page1">Page 1</a></li>
	<li><a href="#page2">Page 2</a></li>
	<li><a href="#page3">Page 3</a></li>
</ul>
</div>

You will notice inside the href tag we are linking to specific jQuery Mobile pages with the hashtag and then the ID of the page.

After you are done with creating the pages you simply add the menu icon to your page. You can do that with the following code.

<a href="javascript:void(0)" class="icon">
   <div class="hamburger">
      <div class="menui top-menu"></div>
      <div class="menui mid-menu"></div>
      <div class="menui bottom-menu"></div>
   </div>
</a>

That creates the menu. You can customize the CSS to reposition the menu. By default the code gets place on the top left hand side but let’s tweak that and move it to the right hand side.

/* Hamburgler */
.menui{
   background: #747474;
   margin-top: 33px;
}

.icon{
   position: absolute;
   padding: 13px;
   right: 0;
}

This CSS will move the menu to the right hand side of the screen, change the color to a darker color and make it so it does not move with the pages. And that is it now you have a course menu.

menu

Comments 1

  1. Pingback: Building a Simple jQuery Mobile Custom eLearning Course Player | Learning Dojo

Leave a Reply

Your email address will not be published. Required fields are marked *