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

于 2013-03-31T21:48:50.580 回答
0

你不能精确地做到这一点，因为 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;
}

祝你好运！

于 2013-03-31T22:00:50.777 回答
0

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

在您的 custom.css 文件中替换

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

和

#main li li.level-open:after {rules}
于 2013-03-31T22:01:07.403 回答
0

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

您已经错过了“联系人”菜单上的所有工作正常的期望。我添加了一个新元素只是为了表明“ bug”在菜单的设计中。

在此处输入图像描述

所以问题出在下拉菜单的设计上。要解决此问题，请查看您的 css 并查找

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

并删除行：

border-right: 1px dotted #7F7F7F;

现在，为了实现添加虚线菜单，您必须更改一点您的 php 代码。你不能在 CSS 中做到这一点。至少在我的小研究中我找不到。

创建一个新类 - 例如，在您的代码中，创建一个算法以将该 css 类添加到将在左侧有元素时.dotted-right-border打印在左侧的每个元素。lili

更新：

好吧。我通常不喜欢说某事是不可能的，但在这种情况下，我认为用纯 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 解决方案。但如果有人知道得更好，那就更好了。

于 2013-04-01T13:40:58.687 回答
0

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"] 以获得更好的控制。

希望能帮助到你 ：）

于 2013-04-04T06:40:37.020 回答