【jQuery】レスポンシブに適したモバイルメニュープラグインSlickNav

【jQuery】レスポンシブには欠かせないドロワーメニュー系jQueryプラグイン10選でご紹介したSlickNavの使い方です。レスポンシブやスマホサイトを作成する時のメニューとしてオプションも多く、使い易いプラグインではないかと思います。

特にドロップダウンはありがたいです。

CSS & JS

jQuery本体は1.7以上が必要です。オプションのイージングを使用する為にjQuery UIを読み込みます。

<link rel="stylesheet" href="SlickNav/slicknav.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="SlickNav/jquery.slicknav.min.js"></script>

HTMLマークアップ

<ul id="menu">
<li><a href="#">item 1</a></li>
<li><a href="#">item 2</a></li>
<li><a href="#">item 3</a></li>
<li><a href="#">item 4</a></li>
</ul>

CSSの調整

.slicknav_menu {
display:none;
}
@media screen and (max-width: 40em) {
/* #menu is the original menu */
.js #menu {
display:none;
}
.js .slicknav_menu {
display:block;
}
}

オプション

<script>
$(function(){
$('#menu').slicknav({
'label' : 'MENU', // メニューボタンのラベル。空の文字列を使用してください。
'duplicate': true, // If true, the mobile menu is a copy of the original.
'duration': 200, // アニメーションスピード
'easingOpen': 'swing', // イージングオープン
'easingClose': 'swing' // イージングクローズ
'closedSymbol': '&#9658;', // 終了記号
'openedSymbol': '&#9660;', // 開始記号
'prependTo': 'body', // 要素にメニュー表示
'appendTo': '', // 親要素としてクリック可能なリンク
'parentTag': 'a', // 親メニュー項目の要素タイプ。
'closeOnClick': false, // リンクをクリックすると閉じるメニュー。単一ページ内を移動するときに便利
'allowParentLinks': false // クリック可能なリンクを許可
});
});
</script>

コールバック

'init': function(){}, // Called after SlickNav creation
'beforeOpen': function(trigger){}, // Called before menu or sub-menu opened. 
'beforeClose': function(trigger){} // Called before menu or sub-menu closed.
'afterOpen': function(trigger){} // Called after menu or sub-menu opened.
'afterClose': function(trigger){} // Called after menu or sub-menu closed.

メソッド

$('.menu').slicknav('toggle'); // Method to toggle the menu
$('.menu').slicknav('open'); // Method to open the menu
$('.menu').slicknav('close'); // Method to close the menu

対応ブラウザ

Chrome
Firefox
Safari
Opera
IE7+
Android Browser
iOS Safari

ライセンスはMITです。

 

【jQuery】レスポンシブに適したモバイルメニュープラグインSlickNav

  • LATEST
  • RELATED
  • POPULAR