Slicknav スマホでさらに快適化メモ

デザイナーなので、phpとかjQueryとか中々苦手。
でも、プラグインとか、ダウンロード版とか、
もっと快適にするために、ちょっと触るくらいは、
できると便利。

そんで、もう歴史も長いプラグイン、
Slicknavをちょっと真面目に快適化した。
※2020年2月現在、Slicknavのダウンロードサイトはなくなっている模様。
※使いやすいんだけど、まだ使われるのかな？？

やったことは下記の通り。
スマホ、タブレットメニューにて、
１）画面をはみ出すハンバーガーメニューをスクロールして見れるようにする。
２）メニュー以外をクリックしてもメニューを閉じる。
３）閉じた時にメニューアイコンも元に戻す。

ググってもズバリなものはなく、ひたすらヒントを探して旅をする。。。
解決コードを書いておきます。

１）画面をはみ出すハンバーガーメニューをスクロールして見れるようにする。
【解決策（CSS3行だけ）】
モバイルメニューの該当クラスに下記を追記

/* メニューを上部に固定するよ！ */
position: fixed; 

/* ハンバーガーが開く最大領域は縦100%まで */
max-height: 100%;

/* メニューのスクロールは自動調整 */
overflow: auto;

【ハマリmemo】
height: 100%;とか書いてある記事を見てそのようにしたけど、画面全体を覆ってしまい、裏（下レイヤー）のクリックができないToT。
max-heighrがベター。

そして、それに気づかせてくれたのが
「border: #000000 solid 5px;」。

これ、私の定番作。floatレイアウトで混乱したり、positionでパニクった時は
* {border: #000000 solid 1px;}
とにかくボーダーをつけて可視化する。下手くそなところを見つけやすい。

２）メニュー以外をクリックしてもメニューを閉じる。
【解決策（javasctipt）】
//メニュー以外のリンククリックで閉じる
$(function(){
$('.mobile_logo').click(function(){
$('.menu1').slicknav('close');
$('.slicknav_btn').removeClass("active");
});
});

//ドキュメントクリックでも閉じる（ひろい物www）
$(document).click(function() {
if (!$(event.target).closest('.slicknav_menu').length) {
$('.menu1').slicknav('close');
$('.slicknav_btn').removeClass("active");
}
});


//mobile_logoってクラスをクリックしたら
$('.mobile_logo').click(function(){

//メニューを閉じてねw
$('.menu1').slicknav('close');

//ドキュメントをクリックしたら
$(document).click(function() {

//メニューを閉じてねw
$('.menu1').slicknav('close');

３）閉じた時にメニューアイコンも元に戻す。
【解決策（javasctipt）】

//ついでににメニューアイコンも初期に戻してね
$('.slicknav_btn').removeClass("active");

以上。3月たったら忘れるな。。。
だからメモメモ。。。

お問い合わせはこちらより。
https://dal-bianco.co.jp/