Create a Square-Like 3D Animated Menu Gallery with jQuery Square Menu

Square has recently launched its new design featuring a clean and beautiful layout as you can expect from the startup, and what caught my attention was their new awesome navigational menu. Although the current menu on the Square website doesn’t animate on Firefox, I decided to fix this for them and create a plugin that will let you add a similar looking menu to your website. That plugin is called Square Menu.

With Square Menu, you will be able to add a similar menu to your website with only a little markup and a JS call. You will also have the option to control how the animation works, and how you trigger the menu. Without further ado, let’s dive into the features of this plugin.

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

Create a Square-Like 3D Animated Menu Gallery with jQuery Square Menu


How to Use Square Menu.js

How does this work?

The concept is to create a layer of animations with CSS3 that will stack to create a beautiful intro and outro animation similar to what you see on the Square website. First I had to hide the menu, and apply all the necessary styles (scale, skew and rotate) beforehand. After the alignment was completed and the switch had been triggered, the scaled and skewed version of the container should fly in from the bottom (or any other direction) as a line, and followed by the scaling of 2 navs inside the container to its natural width creating a beautifully expanded animation. Once all that is done, the last animation should fire, that will animate the links into the container. The same goes for the close animation but in the reverse order.

The problem I encountered early on is the detection of the end of CSS3 animations through JavaScript. The native solution available is very inconsistent and sometimes the callbacks would fire multiple times on different browsers. This was very hard for me to stack each animation and fire each one in sequence. What I came up with is a very simple hack that utilizes a variable to check if the animation is currently running. If it is, then the function will not be fired. If it isn’t, then toggle the variable to “true” and fire the function. This solves the problem of callbacks being fired multiple times and inconsistently throughout all the browsers.

How-Tos

First and foremost, make sure you’ve included the latest jQuery library available here, jQuery.square_menu.js and square_menu.css which can be found here, in to your document’s <head>.

Now, let’s add some HTML markup as follows:

HTML

<body>
  ..
  <div class="sidemenu">
    <nav class="left">
      <a href="...">...</a>
      <a href="...">...</a>
      <a href="...">...</a>
    </nav>
    <nav class="right">
      <a href="...">...</a>
      <a href="...">...</a>
      <a href="...">...</a>
    </nav>
  </div>
  ..
</body>

As you can see, there are 2 nav tags in the markup. This is very important for the plugin to function since we will need these 2 navs to animate independently to create an expand animation, so make sure you have 2 nav tags inside a container. Although, the content inside these nav tags can be changed however you like. Once that is in place, call a function on the container like this:

JS

$(".sidemenu").square_menu({
    flyDirection: "bottom",
    button: "Menu",
    animationStyle: "vertical",
    closeButton: "X"
  });

With the current setup above, you will be able to get a similar menu to the Square’s one out of the box. Now, let’s dive into what’s possible:

  • flyDirection: You can choose where the menu will fly in from by specifying it here. Available options are "top", "bottom", "left", "right", "top-left", "top-right", "bottom-left" and "bottom-right". The default value is "bottom".
  • button: You can define the content of the trigger button here or you can hide it completely. This option accepts HTML tags or strings. To hide the trigger button, set this to “false”. The default value is the string “Menu”.
  • animationStyle: This option will let you control the type of expand animation for your menu after it flies in. Available options are "vertical" which expands vertically, or "horizontal" which expands horizontally. Vertical works best with "top" or "bottom" flyDirection whereas Horizontal works best with "left" or "right" flyDirection. The default value is "vertical".
  • closeButton: You can define the content of the close button that will appear inside the menu here. This option accepts HTML tags or strings. To hide the close button, set this to “false”. The default value is the string “X”.

Public Methods

You may sometimes find yourself wanting to create your own trigger button. With this plugin you can call these public methods available to trigger the menu programmatically by yourself.

$.fn.openMenu()
You can manually trigger the menu to open by calling the method like shown below. This method also acts as a toggle command as well. For example, if this function was called but the menu was already opened, the function will trigger the closeMenu method automatically:

JS

$(".sidemenu").openMenu();

$.fn.closeMenu()
You can manually trigger the menu to close by calling the method like this:

JS

$(".sidemenu").closeMenu();
  • Example Usage
     
    $(".your-button").click(function() {
       $(".sidemenu").openMenu();
    });
    

    Conclusion

    Now your website will have a personalized Square-like menu for the viewers to use. I hope you enjoyed this tutorial and my plugin. Once again, if you have create an awesome website using this plugin or you have any questions, please let us know in the comments below. Thank you for reading this, and stay tuned for more tutorials in the future.