タブメニュー

See the Pen 5-4-1 タブメニュー by 動くWebデザインアイディア帳 (@ugokuweb) on CodePen.

「Result」下のRerunを押して動きを確かめてね！↑

動きを実現する仕組み

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

［使用するライブラリ］
＊ jQuery

HTMLの書き方

head終了タグ直前に自作のCSSを読み込みます。

<link rel="stylesheet" type="text/css" href="css/5-4-1.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 つを読み込みます。

<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="js/5-4-1.js"></script>
</body>

自作のCSS内の書き方

/*tabの形状*/
.tab{
	display: flex;
	flex-wrap: wrap;
}
.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;
	}
}

自作の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);//設定したタブの読み込み
});