6

誰かが私が達成したいと思っていることで私を正しい方向に向けることができることを望んでいます。私はレスポンシブサイトを構築しており、上部にいくつかのアイテムが含まれる従来のナビゲーションメニューがあります。

ページが狭くなるとこのメニューを縮小する必要がありますが、ナビゲーションメニューが壊れるのではなく、収まらないアイテムを[その他...]ドロップダウンタブの下に配置したいと思います。これは意味がありますか？これがグラフィック表現です...

1024幅

ここに画像の説明を入力してください

したがって、上の画像は1024幅の場合のようになり、下の画像は768幅になります。

メニューの内容が不明であるため、幅が異なるため、結合されたリンクの幅を計算する必要があります。それ以上のものは、[その他]ドロップダウンの下に配置されます。

現時点でどこから始めればよいかわからない場合でも、ヒントをいただければ幸いです。

ありがとう

4

3 に答える 3

6

Implementing this is quite simple, if the menu can be static and doesn't have to adjust when the window is resized; @skip405's example is a really good solution in this case (+1).

If the implementation has to adjust the menu dynamically on window resize, it get's tricky though... The window.onresize event is fired quite often while the user scales the browser window, so a naive implementation (e.g. @skip405's approach executed on every event) would be too slow/expensive.

I'd solve the problem as follows:

  1. Calculate and add up the outer width of all links at the beginning.
  2. Append all available links to the "more" tab (cloning) so they can be shown/hidden dynamically. This is much faster than creating new (resp. destroying) DOM elements all the time.
  3. Bind a handler to the onresize event. In the handler, get the current menu width and compare it to the width of the links. Hide all links that don't fit in the menu and show their counterparts in the "more" tab. The same goes the other way round for showing links if the menu is wide enough.

Here's my implementation: http://jsfiddle.net/vNqTF/

Just resize the window and see what happens. ;) Note that the solution can still be optimized of course - it's just an example.

于 2012-08-12T21:58:18.537 に答える
4

問題を解決できる素敵な jQuery プラグインを次に示します: https://github.com/352Media/flexMenu

また、前述の flexMenu プラグインを使用して、この種の柔軟なナビゲーションを整理する方法について段階的な手順を提供する素晴らしい記事を必ずチェックしてください: http://webdesign.tutsplus.com/tutorials/site-elements/a-レスポンシブ ナビゲーションへの柔軟なアプローチ/

于 2013-10-30T22:00:32.217 に答える
2

私のバリアントがあなたの出発点になるかもしれないと思います。私はjQueryの初心者で、自分自身で多くのことを学んでいます-だから、誰でも自由に私の方法やロジックを修正(および改善)してください:)

私の出発点はここにあります：http://jsfiddle.net/skip405/yN595/1/

実際の動作を確認するには、結果ウィンドウのサイズを変更して (7 ではなく) 3 つまたは 4 つの項目が連続するようにし、もう一度 [実行] をクリックします。[その他] にカーソルを合わせると、残りが表示されます。

このフィドルでは、ループ内のリスト項目の幅を計算し、それをメニュー全体の幅と比較します。アイテムの計算された幅がメニューの幅よりも大きくなると、liその時点で表示されている の数を取得できます。

注意:このコードは document.ready で機能しますが、ウィンドウのサイズ変更にはまだ機能しません。したがって、今のところウィンドウのサイズを変更するときは、[実行] を押してください。

于 2012-08-12T21:39:02.647 に答える