読者です 読者をやめる 読者になる 読者になる

KaoLog

ぽんこつwebデザイナーのスキルのメモ

JSを使ったタブメニューと、cssのみで実装したタブメニューの実装方法

f:id:s2lybb:20170416133653j:plain

今回はタブメニューについてまとめました。

タブメニューはページを変えることなく、別画面に移動できるため、ユーザーにとっても使いやすく、そして、見やすい画面構成となります。
ただ、タブの数が多くなってしまうと、押しにくく、見辛い画面となってしまうため、注意が必要です。少なくとも、タブ数は最低3つくらいが良いでしょう。

 

タブメニューを作る方法は2通りあります。

【1:cssのみでの実装】

【2:jsも使用した実装】

 

まずはコードを比べてみましょう。

続きを読む

JSを使ったアコーディオンメニューと、cssのみで実装したアコーディオンメニューの実装方法

f:id:s2lybb:20170416133632j:plain

 

今回はアコーディオンメニューについてまとめます。

スマホサイトが増えてからよく見られる様になりましたアコーディオンメニューですが、実装は主にの2通りあります。

【1:cssのみでの実装】

  

【2:jsも使用した実装】

 

まずはコードを比べてみましょう。

続きを読む