web-dev-qa-db-ja.com

レスポンシブで長いタブリストメニューを管理する

私は実際には、長いタブリストメニュー(7つのタブがあります。英語ではそれほど長くありませんが、ドイツ語版では複雑になり始めました。

それはHDデスクトップで完全に動作しますが、13インチではこれは混乱です。

以下は、インターフェイス要素のスケッチです:ヘッダー、垂直左ナビゲーション、タブメニュー:

enter image description here

このタブを任意の言語で応答可能かつ効率的にするための良い方法のアイデア/アドバイスはありますか?

どうもありがとう

おめでとうございます-タブに関する主要な課題の1つを発見しました:-)

課題の一部は、タブの作成方法に基づいています(これはHTMLであると想定しています)。 CSSを使用してタブの幅を設定すると、問題が発生します(幅を設定せず、コンテナーにテキストコンテンツに基づいてその幅を採用させることをお勧めします)。

JQueryを使用している場合は、レスポンシブタブの例とブラウザ幅への応答方法をこちらで確認できます http://www.jqueryscript.net/demo/Responsive-Scalable-Bootstrap-Tabs- Enhancement-Plugin-with-jQuery /

他の種類のグループ化と整理のUIメタファーがあります。UIメタファーは拡張性が高いため、代替の設計を検討する必要がある場合があります。

ただし、タブを使用している場合は、タブをより適切に拡張する方法がありますが、最適なユーザーエクスペリエンスとは言えません。

2
SteveD

職場の同僚のおかげで、私は最終的に解決策を見つけました:

enter image description here

ソースリンク: https://material.angularjs.org/latest/demo/tabs

リー、最初と最後のタブのコントラストを低くする代わりに、矢印を非表示にすることができます。

私の2セントだけ https://au.pinterest.com/pin/180284791312274083/ 完全なタブを表示する代わりに、最初と最後の「ナビゲーションタブ」の半分を非表示にして、ユーザーが理解/好奇心を持つようにしますより多くのリンクがあります。これは大きな問題ではなく、オプションを共有するだけです。 (*申し訳ありませんが、古いブラウザnで画像をアップロードできません)

2
Sourabh Rangdal

一般的に行われていることは、タブを使用したい場合、特定のブレークポイントまで応答的に縮小し、タブをアコーディオンメニューにすることです。

たとえば、モバイルやタブレットの場合はアコーディオンメニューで、768pxを超えると分割されて拡大タブメニューになります。

1
Kory

これがあなたにとって最良の答えになると思います。

https://css-tricks.com/container-adapting-tabs-with-more-button/

0
Deepu