web-dev-qa-db-ja.com

ネストされたドロップダウンメニューを表示するが、ドロップダウンが画面から消えないようにする最良の方法は何ですか?

私は現在、元々ネストされたドロップダウンメニューを使用していたデザインに取り組んでいます: enter image description here

ただし、ユーザーが右端のカードの「その他」アイコンをクリックすると、ドロップダウンメニューが画面に収まりません。 enter image description here

これを処理するより良い方法はありますか? chromeによってブックマークメニューが作成された方法を考えます。以下に、何が起こるかを示す画像をいくつか示します。基本的に、元のメニューはサブメニューに置き換えられ、[戻る]ボタンを追加します。ネストされたメニューのこのパターン/タイプの名前はありますか?これをサポートする既存のライブラリを知っている人はいますか?

または、誰かがより良い代替案を知っていますか?使用できるライブラリがあればいいのに。

enter image description here

enter image description here

enter image description here

どんなアドバイスでも役に立ちます!ありがとうございました!!

7
mlveg

Windowsは、メニューが合わない場合、反対側にドロップダウンメニューを表示することでこれを処理します。

4
megapctr

私はあなたが提案しているルートに行くか、ナビゲーションを一種のアコーディオンスタイルのナビゲーションにすることができるかを提案します。

ここに私が話しているもののためのjQueryプラグインがあります。彼らのデモは必要以上に堅牢ですが、セカンダリナビゲーションが長くなりすぎない限り、スクリーンショットを見てページを下にスクロールしたようには見えません。ここでの利点は、ユーザーに常にオプションが表示されることです。

http://apps.komposta.net/jquery/navgoco/demo/

ここにあなたの提案に役立つプラグインがあります。これはサイドのメニュー用ですが、少し手を加えるだけで、ドロップダウンに同じ機能を追加するために自分の意志に曲げることができると思います。

http://mmenu.frebsite.nl/

正直なところ、これらのナビゲーションスタイルに特定の名前があるかどうかはわかりません。小さなエリア内を移動しようとしているので、モバイルナビゲーションオプションを探します。私はそれを行い、ここにリストした2つの解決策について Brad Frostのページ に出会いました。

1
Fletchling