1

スクロール可能な div 内のアイテムのリストを利用するインターフェイスに取り組んでいます。そのうちのいくつかは、div の外に拡張するホバー時にロールオーバー メニューを利用します。無効なスクリプトの互換性はサイトの優先事項であるため、他の妥協を始める前に、インターフェイスが CSS だけで実行できるかどうかを確認しようとしています.

以下にいくつかの例を示します。問題のメニューは右側にあり、「プロジェクトの選択」という見出しが付いています。各ページの上から 3 番目のリスト項目には、ロールオーバー メニューが含まれています。

スクロール位置が変更されたときにロールオーバーを親に対して相対的に配置するために、親の li を相対的に配置し、子の ul を絶対的に配置しました。
例 1

もちろん、overflow:autoがオンになってスクロールが配置されると、ロールオーバーは表示されなくなります。 例 2

親liの相対的な位置を削除し、ロールオーバーの絶対位置を保持してdivから解放しようとしましたが、スクロール位置が変更されたときに適切に配置されません。リンクは 2 つしか投稿できませんが、イラストが必要な場合は、ここにあります: eypaedesign.com/markets-rollover-issue-no-relative.htm

UI の変更を除いて、このインターフェイスを CSS で機能させるために使用できる、ここに表示されていないプロパティの組み合わせはありますか? div 全体を絶対として配置し、ロールオーバーが表示されるように大量の左パディングを追加することもできますが、それはかなり洗練されていないように思えます。

ありがとう皆さん -

4

2 に答える 2

2

overflow: autoCSS のみでは、オーバーフローするホバー メニューのいずれかのみに制限されます。and に別visibleの andautoプロパティを使用しても機能overflow-xしoverflow-yないため、検討していたパディング ソリューションを使用することをお勧めします。

絶対配置を適切に使用し、z-index(パディングの下にある要素のパディングされたメニュー コンテナのヒット ブロックが懸念される場合)、レイアウトの残りの部分を破壊することなく実行できるはずです。もちろん、スクロール可能なコンテナ内のすべての子要素のサイズを制御して、パディングされた親の全幅に拡張しないようにする必要があります。

これらのプロパティを追加すると、他に変更を加えなくてもサイトで機能するように見えるため、おそらく簡単に回避できます。

#project_menu {
  padding-left: 300px;
  margin-left: -300px;
}

.center {
  position: relative;
  z-index; 10;
}
于 2012-09-14T19:04:59.343 に答える
0

クラス ナビに 293px の高さを設定すれば問題ありません。または、project_menu ID では、ID の高さが 218px で、UL が 293px であることがわかります。

これらの2つのうちの1つを変更することで、問題ありません。どのように設定するかによって、他の要素に影響を与えます。

しかし、project_menu ID を使用するだけで十分です。

于 2012-09-14T18:55:49.290 に答える