Need help with square_menu?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

123 Stars 59 Forks MIT License 9 Commits 0 Opened issues


Create a Square-like Menu Animation for Website using jQuery and CSS3

Services available


Need anything else?

Contributors list

# 8,164
9 commits

Square Menu by Pete R.

Create a Square-like Menu Animation for Website using jQuery and CSS3 Created by Pete R., Founder of BucketListly


View demo


Modern browsers such as Chrome, Firefox, and Safari on both desktop and smartphones have been tested. I have not tested this on IE.

Basic Usage

Square menu, as you can see from the name, is a plugin that let you add a similar animated menu that you see on the new Square website. I've also added additional animations, add various browsers support and provide options for you to play around with.

To add this to your website, make sure you've included the latest jQuery library together with

into your document's
, and make sure your HTML markup are as follows:



Note: Having 2
tags is very important for the plugin to function. Both these
tags will be used to create a similar animation that you see on Square website. The content inside on the other hand, can be changed as you see fit.

Once that is done, simply call the function like this:

    flyDirection: "bottom", // The direction where the menu will fly from. Available options are "top", "bottom", "left", "right", "top-left", "top-right", "bottom-left" and "bottom-right". The default value is "bottom".
    button: "Menu", // You can define text inside the auto-generated button here. If you want to prevent the plugin from generating a menu button, change this to false. The default value is "Menu".
    animationStyle: "vertical", // The type of animation style you will see after it flew in. Available options are "vertical" which expands vertically and "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: "X" // You can define the content of the close button appears after animates are completed here. Change this to false to hide the close button. The default value is X.

Public Method


With this method, you can open your menu programmatically by calling the

function like this:


Same goes for this method. You can close your menu programmatically by calling the

function like this:

Now you will have a beautifully crafted menu animation like you see on website with little to no effort. If you like this kind of plugin, stay tuned for more from me. :)

If you want to see more of my plugins, visit The Pete Design, or follow me on Twitter and Github.

Other Resources

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.