※この記事は最終更新日から9年以上経過しています。内容が古い可能性があります。
いつもはほぼ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(); });
以上、今日の覚書。