Перечеркнутый список, связывающий divs

Я не знаю точно, как назвать это или как его объяснить, поэтому я дам вам несколько примеров того, что у меня есть и что я хочу создать...

У меня есть список divs, все они имеют собственный стиль, так что они выглядят как Форумы и подфорумы... Здесь я покажу изображение того, что у меня есть:

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

Я подумывал о создании дизайна, чтобы категории, форумы и подфорумы были связаны с "списком" в пунктирном стиле... Я не знаю, как это описать, поэтому я сделал план

What I want

Можно ли это приобрести? Как я могу это сделать?

Спасибо!

Ответы

Ответ 1

Решение только для динамических CSS

Во-первых, это включает модификации разметки по двум причинам:

1. HTML-семантика

Ваш контент организован в herachy, category > forum > sub forum (например, в меню), поэтому, чтобы следовать HTML-семантикам, вам нужно использовать вложенные списки ul > li > ul > li ...

2. Styling

Изменение разметки для вложенных элементов позволит вам перенести последние и первые элементы каждого уровня с помощью псевдоселекторов :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;
}

Ответ 2

Если текущий список стилей является динамическим, вам придется задействовать JavaScript по той простой причине, что css не является языком программирования, он является разметкой стиля и не подходит/предназначен для обработки динамических элементов html.

В любом случае запрошенный стиль может быть достигнут с использованием псевдо-элементов css3 : после и : до

что делают эти селекторы, довольно просто. они добавляют еще один динамический <span> до/после выбранного элемента. например:

.myElement:after{

}

добавит динамический элемент сразу после содержимого .myElement

стиль: перед /: после элементов тот же, что и любой другой элемент, за исключением атрибута content, который решает, что помещать внутри вновь созданного элемента, в большинстве случаев вам не нужно ничего ставить ('') aka blank content;

в вашем списке примеров, его можно создать, вставив :before span со стилизованной левой границей, за элементами списка:

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

Пример в реальном времени: Демо

обратите внимание, что положение новых элементов должно быть абсолютным, или они будут толкать все вниз.

в случае динамического списка вам придется использовать JavaScript для создания динамических элементов с использованием вышеуказанного стиля для каждого элемента списка.

Ответ 3

Это javascript решение для динамического списка.

Что я изменил в исходном списке:

  • удалена альфа из элементов списка ( "категории", "форумы" и "под-форумы" )

  • изменил цвет текста "форумов" и "подфорумов" на белый для удобства чтения

Примечания

  • форумы ожидаются для размещения в категориях

  • под-форумы ожидаются для размещения на форумах

Ничего не получается, если вы нарушаете правила выше

  • категории и форумы can не содержат дочерних элементов, это не проблема (как вы можете видеть в моем списке примеров)

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

Если кто-то захочет проверить его, его есть и полноэкранная версия.

Если что-то плохое с шириной, измените ширину рамки

var borderWidth="4px";

или цвет

var borderColor="black";

Ответ 4

Вот решение, которое использует чистый CSS и не полагается на фиксированные высоты или что-то в этом роде. Я также хочу сказать, что если бы вы могли изменить свою разметку для представления вложенной структуры, это было бы намного проще... просто sayin ':

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