タブメニュー - Kazuma-work

動きを実現する仕組み

jQuery を使い、タブをクリックしたらタブとエリアにクラス名の付与・除去を行う。また、任意のタブに直接リンク（例：http://example.com/#lunch）が出来るようにハッシュタグを定義する。CSS を使い、クラスがついたら形状を変化させて「ふわっ」と表示させるアニメーションをかける。

STEP1　HTMLコード

①　head終了タグ直前に自作のCSSを読み込みます。＊wordpressでfunctionにて設定の場合は省略

<head>

<link rel="stylesheet" type="text/css" href="css/5-1-14.css">

</head>

②　body内にリンク元のHTMLとリンク先のHTMLを記載します。タブのリンク先のhrefには飛び先のエリアidを記載します。表示エリアのid にはタブのリンク先と同じidを記載します。

<ul class="tab">
  <li><a href="#lunch">ランチ</a></li>
  <li><a href="#drink">ドリンク</a></li>
  <li><a href="#dinner">ディナー</a></li>
</ul>

<div id="lunch" class="area">
  <h2>ランチ</h2>
    <ul>
      <li>ガパオライス</li>
      <li>ミートソーススパゲティ―</li>
      <li>ハンバーグ定食</li>
    </ul>
<!--/area--></div>

<div id="drink" class="area">
  <h2>ドリンク</h2>
    <ul>
      <li>ウーロン茶</li>
      <li>オレンジジュース</li>
      <li>ジンジャーエール</li>
    </ul>
<!--/area--></div>

<div id="dinner" class="area">
  <h2>ディナー</h2>
    <ul>
      <li>カレーライス</li>
      <li>ドリア</li>
      <li>グラタン</li>
    </ul>
<!--/area--></div>

③　body 終了タグ直前に jQuery、動きを制御する自作のJS の2 つを読み込みます。＊wordpressでfunctionにて設定の場合は省略

　　<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
　　<!--自作のJS-->
　　<script src="js/5-1-14.js"></script>
</body>

④　WordpressでのfunctionでのCDNとファイルの読み込みは下記より。

//CDN形式のCSSとJSの読み込み
function add_my_files() {
  wp_enqueue_style(
  'fontawesome4.7',  //$handle
  '//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'  //$src
  );
  wp_enqueue_style(
    'fontawesome5.15.4',  //$handle
    '//use.fontawesome.com/releases/v5.15.4/css/all.css'  //$src
    );
  wp_enqueue_style(
    'fontawesome6.5.1',  //$handle
    '//cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css'  //$src
    );
  wp_enqueue_script(
    'jquery3.1.1',  //$handle
    '//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js',  //$src
    array(),  //$deps
    null,  //$ver
    true  //$in_footer
    );
}
add_action( 'wp_enqueue_scripts', 'add_my_files' );

//CSSとJSの読み込み
function my_enqueue_scripts()
{
  $version = wp_get_theme()->get( 'Version' );
  wp_enqueue_style('index-style', get_template_directory_uri() . '/css/index.css', array(), $version);
  wp_enqueue_style('singular-style', get_template_directory_uri() . '/css/singular.css', array(), $version);
  wp_enqueue_style('content-style', get_template_directory_uri() . '/css/content.css', array(), $version);
  wp_enqueue_style('archive-style', get_template_directory_uri() . '/css/archive.css', array(), $version);
  wp_enqueue_style('comments-style', get_template_directory_uri() . '/css/comments.css', array(), $version);
  wp_enqueue_style('404-style', get_template_directory_uri() . '/css/404.css', array(), $version);
  wp_enqueue_style('search-form-style', get_template_directory_uri() . '/css/searchform.css', array(), $version);
  wp_enqueue_style('search-style', get_template_directory_uri() . '/css/search.css', array(), $version);
  wp_enqueue_style('sidebar-style', get_template_directory_uri() . '/css/sidebar.css', array(), $version);
  wp_enqueue_style('header-style', get_template_directory_uri() . '/css/header.css', array(), $version);
  wp_enqueue_style('footer-style', get_template_directory_uri() . '/css/footer.css', array(), $version);
  wp_enqueue_style('navi-style', get_template_directory_uri() . '/css/navi.css', array(), $version);
  wp_enqueue_style('navi-accordion-style', get_template_directory_uri() . '/css/navi-accordion.css', array(), $version);
  wp_enqueue_style('catego-navi-style', get_template_directory_uri() . '/css/catego-navi.css', array(), $version);
  wp_enqueue_style('button-style', get_template_directory_uri() . '/css/button.css', array(), $version);
  wp_enqueue_script('navi-script', get_template_directory_uri() . '/js/navi.js', array('jquery'), $version, true);
  wp_enqueue_script('catego-navi-script', get_template_directory_uri() . '/js/catego-navi.js', array('jquery'), $version, true);
  wp_enqueue_script('page-top-script', get_template_directory_uri() . '/js/page-top.js', array('jquery'), $version, true);
}
add_action('wp_enqueue_scripts', 'my_enqueue_scripts');

⑤　header.phpの>head>内で下記を使って読み込み。

<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>"><!--スタイルシートの呼び出し-->
<?php wp_head(); ?><!--システム・プラグイン用-->

CSSでコーディング

STEP2　cssコード

/*tabの形状*/
.tab{
	display: flex;
	flex-wrap: wrap;
    list-style: none;
}
.tab li a{
	display: block;
	background:#ddd;
	margin:0 2px;
	padding:10px 20px;
}
/*liにactiveクラスがついた時の形状*/
.tab li.active a{
	background:#fff;
}


/*エリアの表示非表示と形状*/
.area {
	display: none;/*はじめは非表示*/
	opacity: 0;/*透過0*/
	background: #fff;
	padding:50px 20px;
}

/*areaにis-activeというクラスがついた時の形状*/
.area.is-active {
    display: block;/*表示*/
    animation-name: displayAnime;/*ふわっと表示させるためのアニメーション*/
    animation-duration: 2s;
    animation-fill-mode: forwards;
}

@keyframes displayAnime{
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

Jqueryを使ってJSコード作成

STEP3　JSコード

//任意のタブにURLからリンクするための設定
function GethashID (hashIDName){
	if(hashIDName){
		//タブ設定
		$('.tab li').find('a').each(function() { //タブ内のaタグ全てを取得
			var idName = $(this).attr('href'); //タブ内のaタグのリンク名（例）#lunchの値を取得	
			if(idName == hashIDName){ //リンク元の指定されたURLのハッシュタグ（例）http://example.com/#lunch←この#の値とタブ内のリンク名（例）#lunchが同じかをチェック
				var parentElm = $(this).parent(); //タブ内のaタグの親要素（li）を取得
				$('.tab li').removeClass("active"); //タブ内のliについているactiveクラスを取り除き
				$(parentElm).addClass("active"); //リンク元の指定されたURLのハッシュタグとタブ内のリンク名が同じであれば、liにactiveクラスを追加
				//表示させるエリア設定
				$(".area").removeClass("is-active"); //もともとついているis-activeクラスを取り除き
				$(hashIDName).addClass("is-active"); //表示させたいエリアのタブリンク名をクリックしたら、表示エリアにis-activeクラスを追加	
			}
		});
	}
}

//タブをクリックしたら
$('.tab a').on('click', function() {
	var idName = $(this).attr('href'); //タブ内のリンク名を取得	
	GethashID (idName);//設定したタブの読み込みと
	return false;//aタグを無効にする
});


// 上記の動きをページが読み込まれたらすぐに動かす
$(window).on('load', function () {
    $('.tab li:first-of-type').addClass("active"); //最初のliにactiveクラスを追加
    $('.area:first-of-type').addClass("is-active"); //最初の.areaにis-activeクラスを追加
	var hashName = location.hash; //リンク元の指定されたURLのハッシュタグを取得
	GethashID (hashName);//設定したタブの読み込み
});

動作確認は下記から

See the Pen Untitled by K O (@K-O-the-builder) on CodePen.