モバイルデバイスに5つ以上の水平タブを表示する方法

Question

これは、水平タブが必要なモバイルWebサイト専用です。

問題は、5〜7個のタブが潜在的に5〜7個存在する可能性があることです。各タブのテキストは長いため、タブが見えにくくなる可能性があります。

これをモバイルユーザーにとって良いエクスペリエンスにするためのさまざまな方法やアプローチを考えるのに苦労しています。

これらの制限を念頭に置いてこのデザインを達成するための提案はありますか？

Answer 1

これは、サイトの水平メインナビゲーションにも当てはまるようです。ブラッドフロストには レスポンシブナビゲーションシステムのいくつかのオプション がありますが、次の2つは、彼のオプションから達成しようとしていることに最も適しているようです。これらの2つと3つ目のアプローチは次のとおりです。

ドロップダウンタブ

これを解決する一般的な方法は タブからドロップダウンに切り替える です。 

積み上げタブ

別のアプローチは タブをスタックする です。 

スクロール可能なタブ

モバイルインターフェイスに表示されているもう1つのオプションは、スクロール可能なタブです。 

Answer 2

もう1つ例を追加します;）

この相互作用は Rookie で使用されます。私は ハンバーガーメニューに関するこの素晴らしい記事 からGIFを取り出しました。

Answer 3

@Matthewがスクロール可能なタブとして提案したiOSの例を1つ示します。

Answer 4

また、2行で中央に配置して折り返すこともできます（たとえば、上の行に3つのアイテム、下に2つのアイテム）。ボタンのように見せたり、簡単にクリックできるようにするなど、デザインを少し変更する必要があるかもしれません。