レスポンシブのタブメニュー

先日公開したコーダーのための計算機で使用したタブメニューです。レスポンシブ対応。今回のメニューは5個なので、スマホサイズの時のタブサイズは、1〜3番目の横幅は33%、4番目と5番目の時は横幅50%です。

See the Pen 180327 by nekuta (@nekuta) on CodePen.

js

nav-list>liとcalc-sectionは同じ数あるので、nav-list>liがクリックされたindex番号を取得して、calc-sectionに効かせています。

参考サイト

.eq() | jQuery 1.9 日本語リファレンス | js STUDIO