うぇぶもよう様カスタマイズのmeanmenuを1ページで使う場合、ページトップに戻った際の挙動について。

Question

うぇぶもよう

うぇぶもよう様カスタマイズのjQueryプラグインのmeanmenuを使いたいのですが、シングルページサイトでうまく動きませんでした。
ページ内アンカーで移動したいのですが、リンクをクリックしても移動しない、maskが消えないなどの問題があったので検索をして以下のコードを足しました。

$('.mean-nav ul li a').on('click', function() {
$('body').removeClass('fixed').css({'top': 0});
$('.mean-container').removeClass("open");
$('.mean-nav .mask').hide();

これで移動とmaskを消すことはできたのですが、移動後、ページトップまで戻って再度ハンバーガー開閉ボタンを押すとメニューは出ますがmaskが出ません。
もう一度ハンバーガー開閉ボタンを押すと正しく動いてくれます。

ページトップに戻るリンクで戻っても、スクロールで戻っても同様です。
開発ツールで確認すると、ページトップまで戻って一度目にボタンを押した時の様子は以下の通りです。

• body,mean-containerにはクラスが付与されない
• maskはインラインスタイルの"display: none;"のまま
• ハンバーガー開閉ボタンにはクラスが付与される
• ナビ本体のulはインラインスタイルの"display: none;"が削除されて<ul class="nav" style="">になる

一度で正しく動くようにするにはどうしたら良いかわからず、教えていただけますでしょうか。
meanmenu.jsはうぇぶもよう様にてカスタマイズされており、最新のバージョンではありません。

長くなってしまって申し訳有りませんが、参考までに元のコードと書き足したコードの全体を載せておきます。

元のコード

$(function($){
	//メニューの表示状態保管用
	var state = false;
	//.bodyのスクロール位置
	var scrollpos = 0;
	//meanmenuの状態による表示制御
	function mm_control() {
		if($('.mean-nav .nav').is(':visible')) {
			//表示中
			if(state == false) {
				scrollpos = $(window).scrollTop();
				$('body').addClass('fixed').css({'top': -scrollpos});
				$('.mean-container').addClass('open');
				$('.mean-nav .mask').show();
				state = true;
			}
		} else {
			//非表示中
			if(state == true) {
				$('body').removeClass('fixed').css({'top': 0});
				window.scrollTo( 0 , scrollpos );
				$('.mean-container').removeClass('open');
				$('.mean-nav .mask').hide();
				state = false;
			}
		}
	}

	$('#gNav').meanmenu({
	    meanMenuContainer: "#header .h_nav", // メニューを表示させる位置
	    meanScreenWidth: "768"
	});
	$(document)
	.on('opend.meanmenu closed.meanmenu', function() {
		mm_control();
	})
	.on('touchend click', '.mean-bar .mask', function(e) {
		$('.mean-bar .meanmenu-reveal').trigger('click');
		return false;
	});
	//ウィンドウサイズ変更によるメニュー非表示時の制御
	$(window).on('resize', function() {
		mm_control();
	});
});

書き足したコード

$(function($){
	//メニューの表示状態保管用
	var state = false;
	//.bodyのスクロール位置
	var scrollpos = 0;
	//meanmenuの状態による表示制御
	function mm_control() {
		if($('.mean-nav .nav').is(':visible')) {
			//表示中
			if(state == false) {
				scrollpos = $(window).scrollTop();
				$('body').addClass('fixed').css({'top': -scrollpos});
				$('.mean-container').addClass('open');
				$('.mean-nav .mask').show();
				state = true;
			}
		} else {
			//非表示中
			if(state == true) {
				$('body').removeClass('fixed').css({'top': 0});
				window.scrollTo( 0 , scrollpos );
				$('.mean-container').removeClass('open');
				$('.mean-nav .mask').hide();
				state = false;
			}
		}
	}

	$('#gNav').meanmenu({
	    meanMenuContainer: "#header .h_nav", // メニューを表示させる位置
	    meanScreenWidth: "640"
	});
	$(document)
	.on('opend.meanmenu closed.meanmenu', function() {
		mm_control();
	})
	.on('touchend click', '.mean-bar .mask', function(e) {
		$('.mean-bar .meanmenu-reveal').trigger('click');
		return false;
	});

//ページ内リンク時の処理
    $('.mean-nav ul li a').on('click', function() {
    $('body').removeClass('fixed').css({'top': 0});
    $('.mean-container').removeClass("open");
    $('.mean-nav .mask').hide();
});
//スムーススクロール処理
$('a[href^="#"]').click(function() {
    var speed = 400;
    var href= $(this).attr("href");
    var target = $(href == "#" || href == "" ? 'html' : href);
    var position = target.offset().top;
    $('body,html').animate({scrollTop:position}, speed, 'swing');
    return false;
  });
	//ウィンドウサイズ変更によるメニュー非表示時の制御
	$(window).on('resize', function() {
		mm_control();
	});
});

Answer 1

メニューが開いているかどうかは内部で管理しているので見た目だけ変えても駄目です。 .trigger() でメニュー開閉ボタンをクリックしたことにします。

    $('.mean-nav ul li a').on('click', function() {
        $('.meanmenu-reveal').trigger('click');
        // スクロール処理...

https://api.jquery.com/trigger/

カスタマイズの「(オーバーレイマスクを)タップでメニューを閉じたい。」で同様のことをしているので確認してください。

    .on('touchend click', '.mean-bar .mask', function(e) {
        $('.mean-bar .meanmenu-reveal').trigger('click');
        return false;
    });

Comments

[kohal]

x_x様
ご回答ありがとうございます。
返信が遅くなり申し訳ありません。

>>(オーバーレイマスクを)タップでメニューを閉じたい。」で同様のことをしているので

ご教示いただいた箇所にまとめた方が良いかと

.on('touchend click', '.mean-bar .mask .mean-nav ul li a', function(e) {

と入れてみましたらmaskをクリックしても何も起きなくなってしまったので
別に書いてみることにして、リンクにクラスをつけて
'.mean-bar .mask'の箇所をつけたクラスに書き換えて同じように追記しました。

追加クラスも最初は'.mean-bar .mask'のところにまとめたのですが、
全く動かなくなったので行を丸ごとコピペで増やしました。
結果、やはり期待した挙動にはなりませんでした。

色々と書き方を変えて試してみましたがなかなか難しそうです。

一点気になったのは、ulメニュークリック後に一回消えてまた出てくるという挙動で
本体のjquery.meanmenu.min.jsで以下のeventがあるようでした。
これが何をしているのかはわかりません。

function() {
jQuery(".mean-nav ul:first").slideUp(),
A = !1,
jQuery(M).toggleClass("meanclose").html(s)
}

とても面倒そうならこれを使うのは諦めて他を探してみようかと思いますが
もしも簡単な追記の方法がありそうならば具体的に教えていただけませんでしょうか。

よろしくお願いします。

[x_x]

わたしも参考サイトからダウンロードして検証しているので動かないということはないと思うのですが、提示されていないコード箇所(HTML)でおかしなことをしていないか見てみてください。
また、「2018/8/16追記」とあって修正されているので、それ以前に取得したものであれば変わっている可能性があります。

なお、気にしているコードは最新版の圧縮前で次のようになっているところです。
jQuery('.mean-nav ul > li > a:first-child').on( "click" , function () {
jQuery('.mean-nav ul:first').slideUp();
menuOn = false;
jQuery($navreveal).toggleClass("meanclose").html(meanMenuOpen);
});
https://github.com/meanthemes/meanMenu/blob/master/jquery.meanmenu.js
onePage オプションが true のときの処理で今回の要件に合っていて使えそうなのですが、参考サイトのカスタマイズとは合わないのでカスタムが必要なら避けたほうがよさそうです。

[kohal]

x_x様
ダウンロードまでして試してくださってありがとうございます。

私が作ったhtml他が悪さをしているかもとのことで、ダウンロードしたままのファイルでonePageオプションもいじらずに、以下を入れて試してみました。
メニューのリンクのみページ内リンクに変更しました。

//ページ内リンク時の処理
$(document)
.on('touchend click', '.mean-nav ul li a', function(e) {
$('.mean-bar .meanmenu-reveal').trigger('click');
return false;
});

無事に色々消えました。
先のコメント時には書き方が間違っていたかもしれません。お騒がせしました。

が、リンク先に飛びません。元はbodyがtop:0pxでfixされていたのが原因かと思ったのですが教えていただいたコードでfixedは取れています。（top:0pxは取れません）

>>参考サイトのカスタマイズとは合わないのでカスタムが必要なら避けたほうがよさそうです。

ページ内リンクで使う想定はされていないのでしょうか。
でしたら、せっかく色々教えていただきましたのに、残念ですが諦めるしかないかもしれませんね…。

[x_x]

return false;としてデフォルトの動きをキャンセルしているのであればリンク先に飛ばないので自前で処理する必要があります。コメントで// スクロール処理...と書いたところですね。

> ページ内リンクで使う想定はされていない
参考サイトはそうでしょうね。また、避けたほうがいいと言っているのは onePage オプションを使うことです。
当初の回答通りにしていれば使わずにページ内リンクで行けるかと思います。

[kohal]

x_x様
度々ありがとうございます。

>>当初の回答通りにしていれば使わずにページ内リンクで行けるかと思います。

$('.mean-nav ul li a').on('click', function() {
$('.meanmenu-reveal').trigger('click');
// スクロール処理...
.on('touchend click', '.mean-nav ul li a', function(e) {
$('.mean-bar .meanmenu-reveal').trigger('click');
return false;
});

「当初の回答通り」というとこういう書き方でしょうか。
「// スクロール処理...」のところはどう書けば良いですか？
すみませんが、具体的な記述を教えていただけませんか？

よろしくお願いします。

[x_x]

そんな書き方でエラーが出ていないのですか？
カスタムによってスクロールバーが消されているので出るのを待ってからスクロールするようにすればいいです。
var a = this;
setTimeout(function() {
var position = $(a.hash).offset().top;
$('body,html').animate({ scrollTop: position });
}, 750);

[kohal]

x_x様
なんどもありがとうございました。
お返事が遅くなり申し訳ありません。

どうしても私のスキルでは難しそうですので今回は残念ですが諦めることにいたします。

なんどもコメントいただきましたのにすみません。
本当にありがとうございました。