【jQuery】jQueryとCSS3を使用したメニュープラグイン。Square Menu

【jQuery】プラグインを使って実装。フルスクリーン系ナビゲーション10選でご紹介したSquare Menu。Square MenuはjQueryとCSS3を使用して、Webサイトにアニメーションも付いたフルスクリーンメニューを実装できるプラグイン。デスクトップとスマートフォンの両方のChrome、Firefox、およびSafariなど現代のブラウザではテストされているようですが、IEはテストされていないようです。

Basic Usage

headjquery.square_menu.jssquare_menu.cssを追加します。

<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>
$(".sidemenu").square_menu({
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

$.fn.openMenu()

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

$.fn.closeMenu()

$(".sidemenu").closeMenu();

MITライセンス

 
JQUERY SQUARE MENU

【jQuery】jQueryとCSS3を使用したメニュープラグイン。Square Menu

  • LATEST
  • RELATED
  • POPULAR