Dashed-styled list linking divs

css, html, javascript

Solution

Dynamic CSS only solution

First, this involves markup modifications for two reasons :

1. HTML Semantics

Your content is organized in herachy, `category > forum > sub forum` (like a menu) so to follow HTML semanitcs you need to use nested lists `ul > li > ul > li ...`

2. Styling

Changing the markup to nested elements will alow you to target last and first elements of each level with the `:last-child` and `:first-child` pseudo selectors and style them accordingly.

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;
}

Problem

I don't know exactly how to name this or how to explain it, so I'll give you some examples of what I have and what I want to create... I have a list of divs, all of them with an own style, in a way that they look as Forums and sub-forums... Here I'll show a picture of what I have: The code is simple: ``` <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> ``` And the css is also very easy: ``` .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; } ``` I was thinking of making a design so the categories, the forums and sub-forums are linked with a dashed-styled "list"... I don't know how to describe it, so I've made a blueprint: Is it possible to acquire this? How can I do it? Thanks!

Original source