连接div的虚线样式列表

时间：2014-07-05 12:48:03

标签： javascript html css

我不确切知道如何命名或如何解释它，所以我会举例说明我拥有的和我想要创造的内容......

我有一个div列表，所有这些都有自己的风格，他们看起来像论坛和子论坛......在这里，我将展示我拥有的图片：

What I have

代码很简单：

<div id="Forums">
    <div class="category">Category</div>
    <div class="forum">Forum</div>
    <div class="sub-forum">Sub-forum</div>
    <div class="sub-forum">Sub-forum</div>
    <div class="sub-forum">Sub-forum</div>
    <div class="forum">Forum</div>
</div>

css也很容易：

.category {
    width: 95%;
    height: 3em;
    background-color: rgba(46, 183, 255, 0.67);
    margin: 2em;
    margin-bottom: 0;
}
.forum {
    width: auto;
    height: 3em;
    background-color: rgba(30, 101, 141, 0.67);
    border: dotted;
    margin-left: 4em;
}

.sub-forum {
    width: auto;
    height: 3em;
    background-color: rgba(12, 50, 69, 0.67);
    border: dotted;
    margin-left: 7em;
}

我正在考虑制作一个设计，所以类别，论坛和子论坛都与一个破旧的＆＃34;列表相关联... ... ...我不知道如何描述它，所以我做了一个蓝图：

What I want

有可能获得这个吗？我该怎么办？

谢谢！

4 个答案:

答案 0 :(得分：11)

仅限动态CSS的解决方案

首先，这涉及标记修改，原因有两个：

<强> 1。 HTML语义

您的内容以herachy，category > forum > sub forum（如菜单）进行整理，因此要遵循HTML语义，您需要使用嵌套列表ul > li > ul > li ...

<强> 2。造型

将标记更改为嵌套元素将使您使用:last-child和:first-child伪选择器定位每个级别的最后和第一个元素，并相应地对其进行样式化。

DEMO

HTML： 

<ul id="Forums">
    <li class="category"><div>Category</div>
        <ul>
            <li class="forum"><div>Forum</div>
                <ul>
                    <li class="sub-forum">Sub-forum</li>
                    <li class="sub-forum">Sub-forum</li>
                    <li class="sub-forum">Sub-forum</li>
                </ul>
            </li>
            <li class="forum"><div>Forum</div></li>
        </ul>
    </li>
    <li class="category"><div>Category</div>
    </li>
    <li class="category"><div>Category</div>
        <ul>
            <li class="forum"><div>Forum</div>
                <ul>
                    <li class="sub-forum">Sub-forum</li>
                    <li class="sub-forum">Sub-forum</li>
                </ul>
            </li>
            <li class="forum"><div>Forum</div>
                <ul>
                    <li class="sub-forum">Sub-forum</li>
                    <li class="sub-forum">Sub-forum</li>
                </ul>
            </li>
             <li class="forum"><div>Forum</div>
                <ul>
                    <li class="sub-forum">Sub-forum</li>
                    <li class="sub-forum">Sub-forum</li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

CSS： 

ul, li{
    list-style-type:none;
    margin:0; padding:0;
    position:relative;
}
.category > div{
    width: 95%; height: 3em;
    background-color: rgba(46, 183, 255, 0.67);
}
.forum {
    margin-left: 2em;
}
.forum > div, .sub-forum{
    height: 3em;
    border: dotted;
}
.forum > div{    
    background-color: rgba(30, 101, 141, 0.67);
}
.sub-forum {
    margin-left: 3em;
    background-color: rgba(12, 50, 69, 0.67);
}
.category li:before, .forum:after{
    content:'';
    position:absolute;
    right:100%;
    border-bottom: 0.2em dotted;
}
.category .forum:before{
    top:-1.5em; 
    height:100%; width:1em;
    border-left: 0.2em dotted;
    border-bottom-color: transparent;
}
.forum:last-child:before{
    height:3em;    
}
.forum:first-child:before{
    top:0;
    bottom:1.5em;    
}
.forum:after{
    top:1.5em;
    width:1.2em;
}
.sub-forum:before{
    bottom:50%;
    width:3.5em; height: 100%;
    border-left: 0.2em dotted;
}

答案 1 :(得分：2)

如果要成为样式列表是动态的，则必须涉及JavaScript，原因很简单，因为css不是编程语言，它是样式标记，不适合/设计用于处理动态html元素。

在任何情况下，都可以使用css3伪元素 :after 和 :before

来实现所请求的样式

这些选择器的作用非常简单。他们在所选元素之前/之后添加另一个动态<span>。例如：

.myElement:after{

}

将在 .myElement的内容 后立即添加动态元素

：之前/：之后元素的样式与任何其他元素相同，排除了content属性决定放入新创建元素的内容，在大多数情况下，您希望什么都没有（＆＃39;＆＃39;）又称空白内容;

在您的示例列表中，可以通过在列表项后面插入带有样式化左边框的:before范围进行样式设置：

.category {
    width: 95%;
    height: 3em;
    background-color: rgba(46, 183, 255, 0.67);
    margin: 2em;
    margin-bottom: 0;
}
.forum {
    width: auto;
    height: 3em;
    background-color: rgba(30, 101, 141, 0.67);
    border: dotted;
    margin-left: 4em;
}

.sub-forum {
    width: auto;
    height: 3em;
    background-color: rgba(12, 50, 69, 0.67);
    border: dotted;
    margin-left: 7em;
}
.sub-forum:before{
    position:absolute;
    content:'';
    display:block;
    width:3.6em;
    border:4px dotted black; 
    height:3em;
    margin-left:-4em;
    margin-top:-1.5em;
    border-top:none;
    border-right:none;
    z-index:-2;
}

.forum:before{
    position:absolute;
    content:'';
    display:block;
    width:1em;
    border:4px dotted black; 
    height:15em;
    margin-left:-1.6em;
    margin-top:-13.5em;
    border-top:none;
    border-right:none;
    z-index:-2;
}
.forum:nth-of-type(2):before{
    height:1.5em;
    margin-top:0em;
}

直播示例： Demo

请注意，新元素的位置必须是绝对的，否则它们会将所有元素都压低。

如果是动态列表，则必须使用JavaScript创建动态元素，使用上面的每个列表项样式。

答案 2 :(得分：2)

这是动态列表的JavaScript解决方案。

我在原始列表中更改了内容：

  • 从列表项中删除了alpha（“类别”，“论坛”和“子论坛”）

  • 将“论坛”和“子论坛”的文字颜色更改为白色以便于阅读

备注

  • 论坛 预计将被放置在类别中

  • 子论坛 预计将被放置在论坛

如果您违反上述规则，则不会被提取

  • 类别和论坛可以不包含子项，这不是问题（正如您在我的示例列表中看到的那样）

<小时/>

HTML（尝试在小提琴或其他地方编辑它以添加或删除新项目！）

<div id="Forums">
    <div class="category">Category</div>
    <div class="forum">Forum</div>
    <div class="sub-forum">Sub-forum</div>
    <div class="sub-forum">Sub-forum</div>
    <div class="sub-forum">Sub-forum</div>
    <div class="forum">Forum</div>
    <div class="forum">Forum</div>
    <div class="forum">Forum</div>
    <div class="sub-forum">Sub-forum</div>
    <div class="sub-forum">Sub-forum</div>
    <div class="sub-forum">Sub-forum</div>
    <div class="sub-forum">Sub-forum</div>
    <div class="sub-forum">Sub-forum</div>
    <div class="sub-forum">Sub-forum</div>
    <div class="sub-forum">Sub-forum</div>
    <div class="sub-forum">Sub-forum</div>
    <div class="forum">Forum</div>
    <div class="category">Category</div>
    <div class="forum">Forum</div>
    <div class="sub-forum">Sub-forum</div>
    <div class="sub-forum">Sub-forum</div>
    <div class="sub-forum">Sub-forum</div>
    <div class="forum">Forum</div>
    <div class="category">Category</div>
    <div class="forum">Forum</div>
</div>

CSS（顺便说一下，不要更改默认项边距）：

.category {
    width: 95%;
    height: 3em;
    background-color: rgba(46, 183, 255, 1);
    margin: 2em;
    margin-bottom: 0;
}
.forum {
    width: auto;
    height: 3em;
    background-color: rgba(30, 101, 141, 1);
    color:white;
    border: dotted;
    margin-left: 4em;
}

.sub-forum {
    width: auto;
    height: 3em;
    color:#ffffff;
    background-color: rgba(12, 50, 69, 1);
    border: dotted;
    margin-left: 7em;
}

的Javascript 

var borderWidth = "4px";
var borderColor = "black";

for (var forum = 0; forum < document.getElementsByClassName("forum").length; forum++) {
    var rect = document.createElement("div");
    rect.style.margin = "2.5em";
    rect.style.border = "dotted";
    rect.style.borderWidth = borderWidth;
    rect.style.borderColor = borderColor;
    rect.style.position = "absolute";

    if (document.getElementsByClassName("forum")[forum].previousElementSibling.className == "category") {
        rect.style.top = document.getElementsByClassName("forum")[forum].previousElementSibling.offsetTop - 10 + "px";
        rect.style.height = document.getElementsByClassName("forum")[forum].offsetTop - document.getElementsByClassName("forum")[forum].previousElementSibling.offsetTop - 2 + "px";
    } else {
        rect.style.top = document.getElementsByClassName("forum")[forum - 1].offsetTop - 10 + "px";
        rect.style.height = document.getElementsByClassName("forum")[forum].offsetTop - document.getElementsByClassName("forum")[forum - 1].offsetTop - 2 + "px";
    }

    rect.style.width = "100px";
    rect.style.zIndex = "-1";
    document.body.appendChild(rect);
}

for (var subforum = 0; subforum < document.getElementsByClassName("sub-forum").length; subforum++) {

    var rect = document.createElement("div");
    rect.style.margin = "2.5em";
    rect.style.marginLeft = "5em"
    rect.style.border = "dotted";
    rect.style.borderWidth = borderWidth;
    rect.style.borderColor = borderColor;
    rect.style.position = "absolute";

    rect.style.top = document.getElementsByClassName("sub-forum")[subforum].previousElementSibling.offsetTop - 10 + "px";
    rect.style.height = document.getElementsByClassName("sub-forum")[subforum].offsetTop - document.getElementsByClassName("sub-forum")[subforum].previousElementSibling.offsetTop - 2 + "px";

    rect.style.width = "100px";
    rect.style.zIndex = "-1";
    document.body.appendChild(rect);
    document.getElementsByClassName("sub-forum")[subforum].nextElementSibling.className;
}

的jsfiddle

如果有人想测试它，there is it和fullscreen version。

如果宽度有问题，请更改边框宽度

var borderWidth="4px";

或颜色

var borderColor="black";

答案 3 :(得分：1)

这是一个使用纯CSS的解决方案，不依赖于固定的高度或类似的东西。我还想说，如果你可以改变你的标记来代表一个嵌套的结构，这将更容易......只是说：'

http://jsfiddle.net/ryanwheale/EaN3G/4/ 

.forum,
.sub-forum {
    position: relative;
}

.forum:before,
.forum:after,
.sub-forum:before,
.sub-forum:after {
    content: " ";
    position: absolute;
    left: -1.5em;
    top: -55%;
    bottom: 50%;
    z-index: -1;
}

.forum:before,
.sub-forum:before {
    border-left: 3px dotted #000;
}
.sub-forum:before {
    left: -4.5em;
    width: 3em;
    border-right: 3px dotted #000;
    box-sizing: border-box;
}

.forum:after,
.sub-forum:after {
    width: 1.5em;
    border-bottom: 3px dotted #f00;
}
相关问题
最新问题