2

ポップアップ スタイルのメガ メニューを生成するために使用される次のマークアップがあります (.column div は、各ポップアップ内に複数の列を許可するためにありますが、以下の例には 1 つの列しかありません)...

<ul id="mainmenu">
    <li class="mega">
        <h2><a href="/">Menu 1</a></h2>
        <div class="submenu col1 leftmenu">
            <div class="column">
                <ul>
                    <li><h3>Sub Menu Heading</h3></li>
                    <li><a class="hilight" href="#">Do Something</a></li>    
                    <li><a class="hilight" href="#">More great stuff</a></li>
                    <li><a href="#">Another Item</a></li>
                </ul>
            </div>
        </div>
    </li>
    <li class="mega">
        <h2><a href="#">Second Menu</a></h2>
        <div class="submenu col3 leftmenu">
               blar blar blar
        </div>
    </li>
    // more menus here    
</ul>

これは非常に多くの同様のタグ ( ) で非常に深くネスト<li> <a>されているため、css でスタイルを設定するには、かなり恐ろしいセレクターのリストが必要になります。

#mainmenu li h2 a {}
#mainmenu li.mega .column li h3 a {}

CSS と jQuery でターゲットを設定しやすくするために、マークアップの改善点を提案できる人はいますか?

4

5 に答える 5

2

それが私だったら、問題の最終エンティティに適切にターゲット可能なクラスを配置し、変更します

#mainmenu li h2 a {}

に

#mainmenu .section {}

と

#mainmenu li.mega .column li h3 a {}

に

#mainmenu .subsection {}

などなど。

于 2009-05-29T15:44:27.783 に答える
2

個人的には、あなたのhtmlは見栄えがよく、無限のIDに悩まされておらず、どのクラスも冗長または役に立たないように見えません。

h3 を li の内部、列の内部、親の li の内部以外で使用しない場合は、次のようにすることができます#mainmenu h3 a。セレクターであまり明示的ではないことができると本当に思います。

一意の html タグを実際に利用して、最上位の要素の id と、必要に応じてその下のいくつかのクラスだけが必要になるようにしています。

于 2009-05-29T15:51:08.740 に答える
2

より具体的なセレクター名をいつでも使用できます。それ以外の：

#mainmenu li.mega .column li h3 a {}
and
<ul id="mainmenu"><li class="mega"><div class="column"><li><h3><a>

使用する

h3.mega_column a {}
and
<ul id="mainmenu"><li class="mega"><div class="column"><li><h3 class="mega_column"><a>
于 2009-05-29T15:51:21.093 に答える
1

デザイン上の理由だけでなく、構造がコンテンツのセマンティクスに本当に適合していることを確認する以外に、私が提案できることがいくつかあります。

  1. divに他に何もない場合は、<ul>を<div>でラップする必要はありません。これらは両方ともブロックレベルの要素であり、<ul class = "column">と記述して、不要なマークアップを節約することができます。そのまま冗長です。

  2. クラス名を使用して場所によって意味が異なる場合は、CSSを大幅に簡略化できる可能性があります。たとえば、＃mainmenu .megaの下にある「column」クラスのみを使用する場合、毎回指定する必要はありません。言う.column h3 aだけで同じようにそこに着きます。

  3. jqueryをシンプルにしたい場合は、：not（）などのCSS3セレクターを利用して整理することもできます。たとえば、$("#mainmenu li.mega .column li")あなたの代わりに代わりに行うことができます$("#mainmenu li:not(.mega)")

それが私の考えです。

于 2009-05-30T05:17:45.683 に答える
1

CSSの残りの部分を実際に見ないわけではありませんが、あなたの動機は間違っていると思います. 必要なコンテンツを正確に反映するマークアップを目指してください。このものをそのものとは別に定義する必要がある場合は、別の要素として存在する必要があります。そうでない場合は、そうではありません。懸念事項を分離し、マークアップが必要なとおりになるまで、CSS について考えることさえしないでください。

div.column と ul の子を ul.column だけに折りたたむことができ、h2 のアンカーを div.submenu 内に移動して、たとえば「ヘッダー」クラスを与えることができるように見えると言います。

于 2009-05-29T15:45:27.193 に答える