今回はjQueryを使って滑らかにコンテンツを切り替える動的なタブメニューを作成してみます。
下記のデモが今回作成するものになります。
まずはHTMLです。
<div class="tab">
<ul id="tab_menu">
<li class="show">menu1</li>
<li>menu2</li>
<li>menu3</li>
</ul>
<div id="border">
<div></div>
</div>
<ul id="tab_content">
<li class="show">
<h2>content1</h2>
<p>content1の内容が入ります</p>
</li>
<li>
<h2>content2</h2>
<p>content2の内容が入ります</p>
</li>
<li>
<h2>content3</h2>
<p>content3の内容が入ります</p>
</li>
</ul>
</div>
次にCSS
/* メニュー */
.tab{
margin:0 auto;
padding: 10px;
}
#tab_menu{
display: flex;
justify-content: space-between;
list-style: none;
margin: 0;
padding: 0;
cursor: pointer;
border: 1px solid #ccc;
overflow: hidden;
}
#tab_menu li{
width: 100%;
height: 50px;
line-height: 50px;
text-align: center;
background-color: #fff;
border-right: 1px solid #ccc;
}
#tab_menu li:last-child{
border-right: 0;
}
#tab_menu li.show{
background-color:#f1f1f1;
}
/* メニューの下線 */
#border div{
left: 0%;
width: 33.3333%;
bottom: 0;
display: block;
background-color: #888;
height: 2px;
position: relative;
transition: left 1s cubic-bezier(0.23,1,0.32,1);
}
/* コンテンツ */
#tab_content{
list-style-type:none;
position: relative;
height: auto;
padding: 0;
}
#tab_content li {
text-align: center;
position: absolute;
width: 100%;
border: 1px solid #ccc;
top: 100px;
opacity: 0;
z-index: 0;
transition-duration: 0.8s;
}
#tab_content li.show{
top: 0;
opacity: 1;
z-index: 10;
transition-duration: 0.8s;
}
ここでのポイントは、z-indexで内容となるコンテンツの要素を重ねて同じ位置に設定し、showクラスを持たないコンテンツはcssのopacity:0で透明にします。
また、ページを訪問した際にデフォルトでmenu1とcontent1を表示するように設定しています。
そしてjQueryです。
$(function(){
var menulist = $("#tab_menu li");
var contentlist = $("#tab_content li");
var border = $("#border div");
menulist.on("click",function(){
var selected = menulist.index($(this));
menulist.removeClass("show").eq(selected).addClass("show");
contentlist.removeClass("show").eq(selected).addClass("show");
if(selected === 0){
border.css("left","0%");
}else if(selected === 1){
border.css("left","33.3%");
}else if(selected === 2){
border.css("left","66.6%");
}else{
console.log(error);
}
});
});
クリックした要素のインデックス番号を取得し、それを条件にaddClassとremoveClassでshowクラスの追加と削除を切り替えています。
menuの下線の動作はindex番号を条件にleftプロパティの値を選択したメニューに沿うようにアニメーションさせています。
ここではメニューの項目を3つに限定してleftの値を切り替えています。
メニューの項目を増やしたい場合等はleftの値を変更して、増えた分のインデックス番号の条件を追加するだけです。
まとめ
タブメニューはブラウザの幅が制限されるため多くのメニューを設置すると逆に見づらい印象を与えますが、視覚的にメニューの項目がわかりやすく、UIに優れています。
タブメニューはメニューの項目が少ないサイトやページには非常に向いていますので、是非活用してみてください。
他にもこんな記事があります。