2020.5.29 フィルタ機能

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

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


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

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


結果は、、、、。

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


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

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


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

来週頑張ろうっと。


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

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


さようならー✋




この記事が気に入ったらサポートをしてみませんか?