1

http://www.roydukkey.comで次のナビゲーションを行いました。ナビゲーションは、親メニューとその子メニューの間に垂直の区切りがあるように設計されています。「連絡先」メニュー項目の下を見ると、設計どおりに見えますが、「プロジェクト」の下を見てください。メニューに対して子項目がない場合、垂直セパレーターは存在しないはずです。

CSS だけで適切なデザインを実現するにはどうすればよいでしょうか。

これは現在、CSS では実現できません。

私が選んだ解決策は次のとおりです。

// Naivagation Vertical Separator Counter
$("#main > ul > li > ul .level-has-sub").each(function(){
    $(this).find("> ul > li")
        .slice(0, $(this).find("~ li").length + 1)
        .addClass("vertical-separator")
});

これらの項目は、垂直セパレータ用にスタイルを設定するだけです。

4

5 に答える 5

1

純粋なCSSでは不可能です。<li>child の の数を数える必要があります<ul>。メニューを再構築する場合は、<ul>代わりにセパレーターを子に配置できます。<li>次に、 a) childの every の左側にセパレーターを表示するか、最初にのみ表示するために<ul>使用します。:first-child

于 2013-03-31T21:48:50.580 に答える
0

CSSセレクターは、私が知っている唯一のクラス（疑似）である子要素を参照できません：空です。親レベルの場合、子供の数に関する情報が必要です。解決策は、設計時にこの情報を提供し、それを (クラス属性などで) エンコードすることです。

コードに基づいて、プロジェクト ノードの場合、次のように情報を追加する必要があります。

<li class="level-has-sub limit">...</li>
<li class="level-has-sub limit2">...</li>
<li class="level-has-sub limit">...</li>
<li class="level-has-sub">...</li>

対応する CSS:

#main li li.level-open~li:after {
content: "";
position: absolute;
top: 10px;
bottom: 10px;
right: -17px;
border-right: none;
z-index: 1;
}
// above is not necessary if you remove this selector from your css

/* main job */
#main li li.level-open:not([class*=limit])~li:after {
content: "";
position: absolute;
top: 10px;
bottom: 10px;
right: -17px;
border-right: 1px dotted #7f7f7f;
z-index: 1;
}

#main li li.level-open.limit2+li:after, 
#main li li.level-open.limit3+li:after, 
#main li li.level-open.limit4+li:after
{
content: "";
position: absolute;
top: 10px;
bottom: 10px;
right: -17px;
border-right: 1px dotted #7f7f7f;
z-index: 1;
}

#main li li.level-open.limit3+li+li:after,
#main li li.level-open.limit4+li+li:after {
content: "";
position: absolute;
top: 10px;
bottom: 10px;
right: -17px;
border-right: 1px dotted #7f7f7f;
z-index: 1;
}

#main li li.level-open.limit4+li+li+li:after {
content: "";
position: absolute;
top: 10px;
bottom: 10px;
right: -17px;
border-right: 1px dotted #7f7f7f;
z-index: 1;
}

ご覧のとおり、次のような複数のセレクターには問題があります。

#main li li.level-open.limit2+li:after, 
#main li li.level-open.limit3+li:after, 
#main li li.level-open.limit4+li:after

limit1、limit11、limit111、およびセレクター [class*=limit1]、[class*=limit11]、[class*=limit111] などの属性サブストリングによるコーディングを使用することで、これを回避できます。

注: 私は部分文字列セレクター [class*=limit] を使用していますが、これは少し予測不可能です ;) ペアに変更することができます: [class^="limit"], [class*=" limit"] より適切に制御できます。

それが役に立てば幸い ：）

于 2013-04-04T06:40:37.020 に答える
0

解決策は、あなたが期待するよりも別の場所にあります。

「連絡先」メニューがすべて正常に機能することを期待していませんでした。bug「 」がメニューのデザインであることを示すためだけに、新しい要素を追加しました。

ここに画像の説明を入力

したがって、問題はドロップダウン メニューのデザインにあります。これを解決するには、css を見て、

#main li li.level-open:after, #main li li.level-open ~ li:after

そして行を削除します：

border-right: 1px dotted #7F7F7F;

ここで、ドット メニューを追加するには、php コードを少し変更する必要があります。CSSではそれができません。少なくとも私のちょっとした調査では、見つけることができませんでした。

新しいクラスを作成します。たとえば、コードで、左側に要素がある場合に.dotted-right-border左側に印刷されるすべての要素にその css クラスを追加するアルゴリズムを作成します。lili

アップデート：

わかりました。私は通常、何かが不可能であるとは言いたくないのですが、この場合、私の意見では、純粋な CSS で変更を行うことは不可能です。現在のメニュー項目の作成でもlevel-openHTML タグに追加されているため、そのあたりの処理が必要になります。この状況には、もう 1 つのアプローチが考えられます。たとえば、次のようになります。

  • クラスを変更するには #main li li.level-open:after, #main li li.level-open ~ li:after

言及された行を変更します：

border-right: 1px dotted #7F7F7F;

行に：

border-right: 1px dotted transparent;

次に、サブメニューの下のすべての新しい項目を設定border-color: #7F7F7Fしますが、サブメニューの左側に一致するかどうかを明確に判断できなかったため、点線の境界線を表示する/表示しない. これは単なるアプローチの例です。アプローチをうまく説明すれば。

それはすべて状況に行き着きます-How can you tell apart if the sub menu has a parent item on the left side in order to show dotted border?それが純粋なCSSソリューションがないと私が思う理由です。しかし、誰かがもっとよく知っていれば、さらに良いでしょう。

于 2013-04-01T13:40:58.687 に答える