※この記事は最終更新日から10年以上経過しています。内容が古い可能性があります。
いつもはほぼBootstrapをつかってベースを作っているのですが、
今回色々あってslicknavを使って、レスポンシブ用のグローバルナビゲーションを設置してみました。
モバイル時はデフォルトで上からするっと出てきてくれるslicknavのナビゲーション。
ページ遷移があるときであれば、遷移に伴って勝手に閉じてくれるのですが、シングルページの時遷移の時には、開きっぱなしになってしまい、
ユーザーがもういちどあの三本線を押して、自分で閉じなければならないという手間が生じてしまいます。
調べたところ、これを解決するには「closeOnClick: true」をslicknavのjQueryコードに入れるだけで事足りることが分かったので覚書。
※以下サンプルコード
1 2 3 4 5 6 7 8 | jQuery(function(){$('#menu').slicknav({label: '',duration: 750, //アニメーションのスピードprependTo: "body", //指定した要素内にメニュー表示closeOnClick: true, //リンクをクリックするとメニューを閉じる});}); |
ちなみに、Bootstrapのときは下記一行のjQueryコードだけ。
1 | $('.nav a').on('click', function(){ $(".navbar-toggle").click(); }); |
以上、今日の覚書。
