slicknavをシングルページに設置してみた。

slicknavをシングルページに設置してみた。

いつもはほぼBootstrapをつかってベースを作っているのですが、
今回色々あってslicknavを使って、レスポンシブ用のグローバルナビゲーションを設置してみました。
モバイル時はデフォルトで上からするっと出てきてくれるslicknavのナビゲーション。
ページ遷移があるときであれば、遷移に伴って勝手に閉じてくれるのですが、シングルページの時遷移の時には、開きっぱなしになってしまい、
ユーザーがもういちどあの三本線を押して、自分で閉じなければならないという手間が生じてしまいます。
調べたところ、これを解決するには「closeOnClick: true」をslicknavのjQueryコードに入れるだけで事足りることが分かったので覚書。

※以下サンプルコード

jQuery(function(){
$('#menu').slicknav({
label: '',
duration: 750, //アニメーションのスピード
prependTo: "body", //指定した要素内にメニュー表示
closeOnClick: true, //リンクをクリックするとメニューを閉じる
});
});

ちなみに、Bootstrapのときは下記一行のjQueryコードだけ。

$('.nav a').on('click', function(){ $(".navbar-toggle").click(); });

以上、今日の覚書。