次の図のようなレイアウトを作成したいと思います。現在、Twitter Bootstrap のレイアウトとコントロールを使用して Web アプリケーションを作成しています。
互いに下に外側のコンテナーがあり、それぞれの外側のコンテナーの中にコンテナーがあります。すべてのコンテナーを折りたたみ可能にしたい、つまり、外側のコンテナーを含めて、それぞれを最小化したいと考えています。すべてのコンテナーは、読み込み時に画面に表示する必要があります。
すべての内側のコンテナが最小化/折りたたまれると、親の外側のコンテナも折りたたまれます。また、最小化された親コンテナーの場所 (左、上、または下) に関する提案も受け付けています。
このレイアウトを作成する方法がわかりません (アコーディオン コントロール、パネル、または他の提案を使用して) 誰かが適切な提案を持っているかどうか知りたいですか?
いくつかの提案と考え。少しでも参考になれば幸いです！
組み込みの js を使用してこれを管理できるかもしれませんが、それについてはよくわかりません。ただし、折りたたみ機能は js で実行されると思いますが、 や などの css コードを規制していると思いdisplayますvisibility。また、これらの折りたたみ可能なスクリプトは、ドキュメントの最後にある js によってトリガーされ、画面の解像度に応じてのみトリガーされると考えています。したがって、このタイプの折りたたみ可能性のアクティブな選択に実際にどれだけのスクリプトを使用できるかはわかりません。私があなただったら、自分でコーディングすることを検討します。
div にはどのようなコンテンツが必要ですか? (タイトル A.1 - タイトル C.3)。ユーザーエクスペリエンスを向上させるために、私が含めた写真のようなレイアウトをお勧めします. 特に、ユーザーがモバイルデバイスから表示したい場合は特にそうですが、排他的ではありません。垂直方向のテキストは、基本的に首の痛みです。ただし、そのアプローチを主張する場合は、Icons をお勧めします。
使いやすさとユーザーエクスペリエンスに関するレイアウトの提案。
