父菜单和子菜单垂直分隔符（唯一，高级）

Question

我在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")
});

他们只是为垂直分隔符设置这些项目的样式。

Answer 1

纯CSS无法实现。你必须计算孩子<li>中<ul>的数量。如果重新构建菜单，则可以将分隔符放在子<ul>中。然后，您可以a）在子<li>的每个<ul>左侧显示分隔符，或使用:first-child仅在第一个显示它。

Answer 2

你不能精确地做到这一点，因为CSS不能（还）知道另一个DOM元素的子数。

CSS4可能会在不久的将来（升级到样式的父级）：http://www.w3.org/TR/selectors4/#subject。这看起来也很有趣，虽然不是纯CSS; http://demo.idered.pl/jQuery.cssParentSelector/。也许你可以在计算子菜单的子项后再次下降，但是用CSS具有的低逻辑选择方法来实现这一点会非常复杂。

你可能最好在SASS中执行此操作，但之后它不再是原生CSS，那么你可能只是回退到JavaScript。

以下是一个示例，说明父母的风格如何基于“至少”拥有多少个孩子的风格;

JSfiddle

<强> HTML

<ul>
    <li>
        <ul class="submenu">
            <li>Contact 1.1</li>
            <li>Contact 1.2</li>
            <li>Contact 1.3</li>
            <li>Contact 1.4</li>
        </ul>
    </li>
</ul>

<ul>
    <li>
        <ul class="submenu">
            <li>Contact 2.1</li>
            <li>Contact 2.1</li>
            <li>Contact 2.3</li>
        </ul>
    </li>
</ul>

<强> CSS

li {
    list-style: none;
    display: inline-block;
    border: 1px dotted red;
    padding: 15px;
}

.submenu li {
    display: block;
    padding: 15px;
    border: 0px;
    border-top: 1px dotted blue;
}

.submenu li:nth-child(1) {
    border: 0px;
}

/* This style only happens if the menu has 4 or more children li's */
.submenu li:first-child:nth-last-child(4),
.submenu li:first-child:nth-last-child(4) ~ li {
    border-left: 1px dotted blue;
}

祝你好运！

Answer 3

你的CSS缩小了，所以我不能给你行号。

在custom.css文件中替换

#main li li.level-open:after, #main li li.level-open~li:after {rules}

与

#main li li.level-open:after {rules}

Answer 4

解决方案位于您可能期望的其他地方。

你错过了期望在“联系人”菜单上运行良好。我添加了一个新元素，只是为了表明“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类添加到li左侧打印的每个元素时{左侧的{1}}元素。

<强>更新

好的，那么。我通常不喜欢说某些事情是不可能的，但在这种情况下，我认为这里不可能用纯CSS进行改变。即使是当前创建的菜单项也会将li添加到HTML标记中，因此需要一些可以解决的问题。 对于这种情况，可能还有一种方法，例如：

• 修改课程 level-open

并更改提到的行：

#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这就是我认为没有纯CSS解决方案的原因。但如果有人知道的更好，那就更好了。

Answer 5

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和selectors [class * = limit1]，[class * = limit11]，[class * = limit111]。

注意： 我使用子串选择器[class * = limit]女巫有点不可预测;）你可以将它改为配对：[class ^ =“limit”]，[class * =“limit”]以便更好地控制。

希望有所帮助：）