ウェブサイト上のリスト/メニューをドロップダウンするための代替案または改善策を探しています
-
04-07-2019 - |
質問
ドロップダウンリスト、メニュー、およびコンボボックスはすべて非常に一般的なユーザーインターフェイス要素です。ユーザーはこれらの要素をネイティブアプリケーションやWebアプリで見ることに慣れていますが、いくつかの問題があります。
-
マウスを向ける必要があります。一部のメニューは、マウスアウトすると折りたたまれ、一部のメニューには展開するために狙わなければならないサブメニューがあります。
-
最初にマウスの照準を合わせないとオプションが表示されません。
これらは私を悩ます主なものであり、他の人も他の問題に気づくかもしれません。私はそれを助けることができる場合、通常はドロップダウンメニューをまったく使用しません。
問題は、限られたスペースでオプションの長いリストを表示したい場合があることです。問題2は、私が喜んで犠牲にするものですが、これらのドロップメニューを使いやすくするためのトリックがあるかどうかを知りたいと思っています。誰かが新しいスタイルのリストコントロールを発明したのかもしれません。
これらのタイプのコントロールが私を悩ませるのであれば、私のサイトのユーザーをもっと悩ませるでしょう。
解決
Mac OS / Xのタスクバーには、YouTubeの選択バーに似たものを試すことができます。一般的な用語は、小さな画像がマウスを動かすと大きく動くバブルバーですが、マウスがコントロール上にないときにすべてのアイテムが見えるようなサイズに縮小します。
他のヒント
うーん。ドロップダウンリストについて私を悩ませるもう1つのことは、テキストで拡大するときに幅を制御できないことです(または、私が知らない何かですか?)。
別の方法として、利用可能なオプションのリストをアルファベット順のインデックスで最初に表示し、ユーザーがアルファベットリンクをクリックすると、選択する関連オプションを表示する小さなポップアップについて考えます。これにより、選択するオプションが少なくなります。
同じ条件で、ajaxを使用して、ユーザーが入力するたびにオプションをオンザフライで構築できます。
@Nrj width = '20px'は、折りたたまれたドロップダウンを20pxの幅に保ちます。問題は、Inernet Explorerがこの幅で展開されたアイテムを表示する一方で、これまでに出会った他のすべてのブラウザーが完全なメニューを表示することです。