cssでタブ型をつくってみる

先日、ノートの付箋?のようなタブの形をcssで作る機会があったので、作り方をまとめます📝
切り替え方法はjsガチガチで書いてますが、その時々に合わせて色々やり方があると思うので、もっとスマートに作るのがいいかと思います。

作ろうとしているタブは、👇のようなデザインで、タブを切り替えると内容が変わるようなものです。
 

MENU01

MENU02

  • 白飯
  • あさりの味噌汁
  • 鮭フレーク
  • きんぴらごぼう
  • 食パン
  • コーンスープ
  • イチゴジャム
  • 目玉焼き

 

HTML

 

css

 

js

 
以上です!