Create a Fully Animated Full Page Menu with jQuery.Fullpage-Menu.js

May 22, 2014 in Tutorials by Pete R.

Recently, I’ve spotted a trend that I think more and more businesses are currently experimenting on. Sites like Square, Handsome.is and Benoit Challand all have one thing in common and that is they all have full page navigation menus. As usual, I decided to explore this myself and built an open source little jQuery plugin that will let you create a fully animated, full page menu with ease.

Introducing Full Page Menu, a plugin that will do just that. The plugin design is inspired by the amazing work done by the great people at Handsome.is.

Note: This plugin has been tested on Chrome, Firefox, Safari, on desktop and mobile. This has not been tested on IE.

Create a Fully Animated Full Page Menu with jQuery.Fullpage-Menu.js

[tut demo=”https://onextrapixel.com/examples/full-page-menu/” download=”https://onextrapixel.com/examples/full-page-menu/full-page-menu.zip”]

How To Use jQuery.Fullpage-Menu.js

How does this work?

The code base I used to build this plugin was from the Square Menu plugin I built a while back, so most of how it works is pretty much the same. Only the way I execute animations in sequence has made this plugin a little more interesting. As you can see from the demo, each animation needs to run in sequence with perfect timing. With the combination of CSS3 animation assigned to class names and a change in class names on elements in precise timing I was able to come up with a snippet that takes in an array of these class names, sums up the time of each animation assigned and adds the class names to each element one after the other through JavaScripts.

With this streamline approach, I was able to support the awesome Animate.css animation framework by Daniel Eden without much effort while adding another dimension of customization to the plugin and allowing users to add their own animation type through CSS without touching the core code.

Now you know how the animation works, let’s talk about how you can use it.

How-Tos

First of all, make sure you have included the latest jQuery library (preferably 2.0.0 or higher) available here, and then include jquery.fullpage-menu.js and fullpage-menu.css which can be found here, into your document’s <head>.

For the HTML markup, there’s a little rule you need to follow in order to get this working flawlessly:

HTML

<body>
  ..
  <div class="sidemenu">
    <ul class="fm-first-level">
      <li><a href="#menu1">..</a></li>
      ..
    </ul>
    <nav id="menu1" class="active">
      <a target="_blank" href="#">
        <span class="subtitle">...</span>
        Link Title
      </a>
      ..
    </nav>
  ..
</body>

In the example above, the container “sidemenu” is used to hold all the side menu elements where we will call them with our JavaScript function later on.

The “ul” list called “fm-first-level” is used to create a tab functionality allowing you to have multiple levels of navigation inside your menu. Elements under “fm-first-level” are buttons that are used to activate the tab. The href attribute of these elements should reflect the id attribute of the tab content container itself.

The nav tag with an id is the tab content container. From the above example, the <nav> tag has “menu1” as an ID. To trigger this tab, the first link inside “fm-first-level” must have “#menu1” as an href attribute.

For the content inside nav tag, all the link tags are used as the click target and the span elements with “subtitle” as a class name are used as little description of the link which will be shown together with the link title.

Now that your HTML markup is laid out correctly, you can call the script as shown below:

$(".sidemenu").fullpageMenu({
   openButton: "Menu",
   closeButton: "Close X",
   animationSpeed: 100,
   autoNumber: true,
   animation: "fadeInLeft" 
 });

With the options shown in the example, the end result will be similar to what you see on Handsome.is website. In order to personalize the plugin into your own taste, I have added several options for you guys to play around with:

openButton: With this option, you can set the content of the open menu button. The default value is “Menu”.
closeButton: With this option, you can set the content of the close menu button. The default value is “Close X”.
animationSpeed: You can control the speed of the animation of each navigation item here. The option accepts milliseconds. The default value is 100.
autoNumber: To disable the auto numbering on menu items, toggle this to false. The default value is true.
animation: This option lets you define what type of animation you want. Available options are “fadeInLeft”, “fadeInRight”, “fadeInUp” and “fadeInDown”.

Note: For animation option, this plugin also supports Animate.css animation framework by Daniel Eden. Simply put his animation class name as your animation option and the plugin should animate as normal.

Public Methods

With this plugin, you can activate/deactivate your menu programmatically by simply calling these public methods:

$.fn.openMenu()
To toggle the menu open/close, simply call this function and the plugin will detect weather to close or open the menu automatically.

JS:
```
$(".sidemenu").openMenu();
```
$.fn.closeMenu()
You can also force close the menu by simply calling the function below:

JS:
```
$(".sidemenu").openMenu();
```

[tut demo=”https://onextrapixel.com/examples/full-page-menu/” download=”https://onextrapixel.com/examples/full-page-menu/full-page-menu.zip”]

Conclusion

That’s all for the Full Page Menu. I hope you enjoy this plugin and if you decided to use it on your project, don’t forget to share your creation in the comments below. Also, if you have any recommendations or suggestions, don’t hesitate to ask me in the comments as well.