2

純粋なマークアップで (つまり、javascript/jquery などを必要とせずに) ナビゲーション インターフェイスのようなツリーを構築したいと考えています。

順序付けられていないリスト<ul>が最適なソリューションのように思えます。simplebits.com のこのチュートリアルが、必要なソリューションに非常に近いことがわかりました。ただし、作成者は、ブランチの最終/最大深度が既知であるという前提でスタイルシートを定義しています。

#sitemap li ul li ul li {
    padding-left: 16px;
    background: url(bullet.gif) no-repeat 0 50%;
}

マークアップを「無限に」下降させ、スタイリングでこれをシームレスにサポートさせる方法があるかどうかを知りたいです。

これについてさらに説明が必要な場合は、お知らせください。

4

3 に答える 3

4

指定したマークアップは、直接指定しなくても、それ以降の要素に対して機能するはずです。

例えば：

#sitemap li {} -->level 1 and under
#sitemap li li {}--> level 2 and under (overrides previous rule)
#sitemap li li li {}--> level 3 and under (overrides previous rule)

したがって、最後のルールはレベル4、5、6以降に自動的に適用されます。

すべてのレベルに特定のスタイリングが必要な場合を除いて、問題はありません。

于 2009-03-13T11:16:21.430 に答える
4

これに関するチュートリアルがありますが、2つの問題があります。

  1. IE6はアンカー以外のタグで：hoverをサポートしていないため、そのブラウザーにはJavascriptソリューションが必要です。と
  2. 主要なブラウザ間で一貫して動作させるのは実際には非常に複雑です。

jQueryとsuperfish（suckefishに触発された）プラグインを使用する代替案を検討してください。

<ul class="menu">
  <li>...
</ul>
<script type="text/javascript">
$(function() {
  $("ul.menu").superfish();
});
</script>

終わり。

（半）純粋なCSSルートを使用する場合は、既存のフレームワークの1つ（suckerfishや派生物など）を使用することを強くお勧めします。そうしないと、髪の毛を抜いて、正しく機能させるために多くの時間を費やすことになります。

深さについてのあなたの質問に答えるために：あなたが言及したそのルールは本質的に無限の深さになります。CSSのスペースは、子セレクターではなく子孫セレクターであることを忘れないでください。グループが繰り返される理由は、ルールが（たとえば）3番目のレベルからのみ適用されるようにするためです。

これは、第1レベルと第2レベルに特別なスタイリングがあるためです。1つ目は、水平または垂直のバーになります。2番目はそこから飛び出しますが、3番目のレベルからは同じように一貫して飛び出します。

于 2009-03-11T21:20:09.773 に答える
0

順序付けされていないリスト要素にクラスを割り当てるのはどうですか？

#sitemap li.tree
{
   padding-left: 16px;
}

なぜこれが機能しないのかわかりませんが、間違っている場合は修正してください。

于 2009-03-11T21:21:29.740 に答える