jQuery Popup Menu Plugin With CSS3 Animations - Square Menu

File Size: 8.6KB
Views Total: 4223
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
jQuery Popup Menu Plugin With CSS3 Animations - Square Menu

Square Menu is a lightweight (~3kb) jQuery menu plugin that popups a menu panel with subtle CSS3 animations (transitions and transforms) in the center of the page. Inspired by squareup.com.

How to use it:

1. Include the latest version of jQuery library on the page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

2. Include jQuery square menu plugin's files on the page.

<link href="square_menu.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="jquery.square_menu.js"></script>

3. Markup html structure.

<div class="sidemenu">
<nav class="left">
<a href="https://www.jqueryscript.net/jquery-plugins/">Latest jQuery Plugins</a>
<a href="https://www.jqueryscript.net/popular/">Most Popular Plugins</a>
<a href="https://www.jqueryscript.net/recommended/">Recommended Plugins</a> 
<nav class="right"> 
<a href="https://www.jqueryscript.net/slider/">jQuery Slider Plugins</a> 
<a href="https://www.jqueryscript.net/table/">jQuery Table Plugins</a> 
<a href="https://www.jqueryscript.net/slideshow/">jQuery Slideshow Plugins</a> 
<a href="https://www.jqueryscript.net/menu/">jQuery Menu Plugins</a> 
<a href="https://www.jqueryscript.net/table/">jQuery Table Plugins</a> 
<a href="https://www.jqueryscript.net/gallery/">jQuery Gallery Plugins</a> </nav>

4. Call the plugin with default options.

$(document).ready( function() {

5. Configurations.

$(document).ready( function() {
flyDirection: "bottom", // "top", "bottom", "left", "right", "top-left", "top-right", "bottom-left" and "bottom-right"
button: "Click me", // custom the text of the toggle button
animationStyle: "vertical", // "horizontal" or "vertical"
closeButton: "X" // Change this to false to hide the close button

This awesome jQuery plugin is developed by peachananr. For more Advanced Usages, please check the demo page or visit the official website.