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

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 是不可能的。您必须计算子 <ul> 中 <li>s 的数量。如果您重组了菜单，则可以将分隔符放在子 <ul> 中。然后您可以 a) 在子 <ul> 中的每个 <li> 的左侧显示分隔符，或者使用 :first-child 仅在第一个显示。

Answer 2

你的 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 3

你不能精确地做到这一点，因为 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 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 左侧打印的每个元素中左边。

更新：

好的，那么。我通常不喜欢说某事是不可能的，但在这种情况下，我认为用纯 CSS 进行更改是不可能的。甚至当前创建的菜单项也在将level-open 添加到 HTML 标记中，因此它需要围绕它做一些事情。 对于这种情况，可能还有另一种方法，例如：

• 修改类 #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 解决方案。但如果有人知道得更好，那就更好了。

Answer 5

CSS 选择器不能引用子元素，我知道的唯一类（伪）：empty。在您的父母级别的情况下，您需要有关孩子数量的信息。解决方案是在设计时提供此信息并对其进行编码（例如在类属性中）。

根据您的代码，对于项目节点，您需要添加如下信息：

<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] 女巫有点不可预测；）您可以将其更改为 pair: [class^="limit"], [class*="limit"] 以获得更好的控制。

希望对你有帮助:)