採用サイト制作に最適なWordPressテーマ「ISSUE」の機能概要

ワードプレステーマ別

TCDテーマQUADRA:固定ページのカスタムメニューで開閉をもつh2見出しでもリンクさせる方法

Q.固定ページでサイドバーにカスタムメニューを用いて目次を表示させています。副項目をもった見出しをクリックしてもその位置にリンクしないのですが、対応出来ますか?

恐れ入りますが、これはテーマの仕様です。当記事のカスタマイズ後は見出し部分のクリックで見出し箇所にスクロールされるようになりますが、一方でメニューの開閉を行うには右端の「+」アイコンをクリックする必要があります。

▼変更箇所イメージ   QUADRAデモサイトで実際の動作をご確認頂けます。
変更箇所イメージ

A.下記の方法でご対応ください。

以下を固定ページ編集画面のカスタムスクリプトにコピーペーストしてください。
(テーマオプション基本設定内のカスタムスクリプトには入力しないようにしてください。意図しない不具合が発生することがあります。)

<style id="side_nav_add_style">
#side_navigation > .list > .item { position:relative; }
#side_navigation .parent_icon { display:block;cursor:pointer;width:50px;height:100%;position:absolute;top:0;right:0;z-index:1; }
</style>
<script id="side_nav_add_js">
jQuery(function($) {

  // 要素の追加
  $( '#side_navigation .link.parent' ).each(function() {
    $(this).before('<span class="parent_icon" style="height:' + $( '#side_navigation .link.parent' ). innerHeight() + 'px;"></span>');
  });
  $(window).resize(function() {
    $( '#side_navigation .parent_icon' ).each(function() {
      $(this).css( 'height', $(this).next().innerHeight() );
    });
  });

  // イベント処理の解除
  $('#side_navigation .parent').off('click');
  $('#side_navigation a[href^="#"]').off('click');

  // 新規クリックイベント処理の追加
  $(document).on('click', '#side_navigation .parent_icon', function() {
		let parentMenu = $(this).next();
		let childMenu = $(this).nextAll('.child_wrap');
		let childMenuHeight = childMenu.find('.sub-menu').innerHeight();
		if($(parentMenu).hasClass('active')){
			$(childMenu).css('height', '').removeClass('active');
			$(parentMenu).removeClass('active');
		}else{
			$(childMenu).css('height', childMenuHeight).addClass('active');
			$(parentMenu).addClass('active');
		}
	});


	// アニメーション
	$('#side_navigation a[href^="#"]').on('click',function() {
    var headerHeight = ( $('#header').length ) ? 90 : 30;
    var tocHref = $(this).attr("href");
    if(tocHref.length > 1){
      var target = $(tocHref).offset().top - headerHeight;
      $("html,body").animate({scrollTop : target}, 1000, 'easeOutExpo');
      return false;
    }
	});

});
</script>

※コピーペーストをしやすいよう、JSとCSSをまとめて記載しています。

この記事は役に立ちましたか?

もし参考になりましたら、下のボタンで教えてください。
今後の記事作成の参考とさせて頂きます!

同じテーマのカスタマイズ記事