2020.5.29 フィルタ機能

今日は、ギャラリーサイトによく使われている、フィルタ機能をHTML、CSS、jQueryで作成してみました。

「完成予想図」
クリックすると、メニューが出てきて、メニューをクリックするとメニューに関連した文字などが表示される。

タブメニューや、アコーディオンメニューなどの作り方などを調べてみて、実際にコーディングしてみました。

さらに、メニューをクリックしてフィルタ機能もコーディング。
(簡易的なページなので、ほぼHTMLに記述しました笑)

結果は、、、、。

●タブメニューで作ると、デザイン案と同じようにできました。
●アコーディオンメニューは、クリックしたら出てくるけど、メニューの部分が横長になると表示がおかしくなるので却下。
●フィルタ機能は、なんとか成功しました。コーディング頑張ったので、自分の思い通りに動くと、嬉しいです😆

来週は、今日作成したタブメニューとフィルタ機能をブラッシュアップしていこうと思います。

最初はタブの中身非表示で、クリックするとメニュー部分が開く、、、とか。
フィルタ機能で、どこまでできるのか、、、とか。

まだまだ、できることはたくさんありそうだなぁ😅

来週頑張ろうっと。

そういえば、そろそろ有給取らなきゃなぁと思い始めました。

初めての有給。
何しようかなw

さようならー✋