0

次のページがあります（キャンバスレスポンシブメニューのデビッドブッシェルに基づいています）：

http://kwedsd.byethost7.com/test.html

ブラウザの幅を縮小すると、3 本の水平線のアイコンが表示されます。それをクリックすると、メニューがスライドインしますが、すべてのリンクが表示されないため、ここで問題が発生します。

まず、メイン コンテンツの高さに制限されずに、メニュー項目をページのずっと下にリストしたいと考えています。次に、メイン コンテンツをフリーズし、メニューをスクロールできるようにしたいと思います ( http://disney.com/?intoverride=trueを参照する場合、これはメニューがメインをクリックされたときに達成したいことの例です)コンテンツはフリーズしますが、メニューはスクロール可能です)。

うまくいかなかったメインコンテンツに固定された位置を設定しようとしました。これについての助けをいただければ幸いです。

前もって感謝します。

4

2 に答える 2

0

CSS に多くの変更を加える必要があります。ここに効果的にリストするには多すぎて、自分でこれを完全にテストするのはそれほど簡単ではありません。

ここでの主な目標は、リストに実際の高さを持たせ、要素の絶対位置をレイアウトで無視することです。

and要素translate3dにあるプロパティを削除し、代わりにフロートを左にします。次に、要素のオーバーフロー、幅、およびおそらく他の多くのプロパティをいじって、希望どおりに表示する必要があります。#nav#main#nav#main

これらの中には#nav { width: 0; } html.js-nav #nav { width: 70%; }、メニューが表示されるはずのときに遷移できるようにするなど、新しいルールが必要になるものがあります。

これは出発点です。これにより、現在よりも良い位置に立つことができます。さらに先に進めなくなった場合は、さらに助けを求めて戻ってきてください。

于 2013-04-11T05:33:35.067 に答える
0

#nav の「overflow」値を「scroll」に変更する必要があります。したがって、CSS は次のようになります。

#nav { 
  position: absolute;
  top: 0;
  padding-top: 5.25em;
  overflow: scroll;
  etc......
}

overflow:scroll を使用することで、少なくともユーザーがメニュー リストをスクロールできるようになります。

于 2013-04-11T04:34:08.027 に答える