Блог Хасанова Ильи о сайтостроении
  • База знаний
    • Создай свой сайт сам
      • 1 шаг (подготовка)
      • 2 шаг (оформление)
      • 3 шаг (юзабилити)
      • 4 шаг (хостинг/домен)
    • Миграция Joomla
      • C версии 2.5 на 3x
    • Расширения Joomla
      • Компоненты
      • Плагины
      • Модули
    • CSS, HTML, JavaScript
      • Магия CSS стилей
      • Готовые CSS3 кнопки
      • Скрипты
    • Графика и текст
      • Бесшовные фоны
      • Шрифты для сайта
    • Прочее
      • Нужно знать!
      • FAQ Joomla
      • Это интересно!
  • Онлайн-сервисы
    • CSS генераторы
      • Создать градиент
      • Создать кнопку
      • Создать тень у текста
      • Создать тень у блоков
  • Заказать сайт
    • Потенциальному заказчику
      • Вопросы и ответы
      • Заказ-онлайн
  • Отзывы
  • Контакты
Блог Хасанова Ильи о сайтостроении
Партнерская компания AIR для каналов видеохостинга youtube
  • База знаний
  • CSS, HTML, JavaScript
  • Магия CSS стилей
  • Древовидные списки разных вариаций
25 апр2016

Древовидные списки разных вариаций

25 апреля 2016. Категория: Магия CSS стилей

Древовидные списки разных вариаций

Древовидный вид HTML списков является лучшим вариантом визуального обзора и изучения их иерархической структуры. Рассмотрим несколько преобразований обычного HTML списка в более наглядное древовидное состояние при помощи магии CSS стилей.

1. Пример обычного HTML списка

  • Главное меню
    • База знаний
      • Компоненты
      • Плагины
      • Модули
    • Отзывы
    • Контакты

HTML разметка списка

<ul>
   <li>Главное меню
     <ul>
      <li>База знаний
     <ul>
       <li>Компоненты</li>
       <li>Плагины</li>
       <li>Модули</li>
     </ul>
   </li>
   <li>Отзывы</li>
   <li>Контакты</li>
     </ul>
   </li>
</ul>

2. Пример HTML списка с соединительными линиями

Присвоим тегу <ul> класс treeline для создания соединительных линий каждого раздела списка.

  • Главное меню
    • База знаний
      • Компоненты
      • Плагины
      • Модули
    • Отзывы
    • Контакты

HTML разметка списка с соединительными линиями

<ul class="treeline"> /* Присваиваем класс treeline */
   <li>Главное меню
     <ul>
      <li>База знаний
     <ul>
       <li>Компоненты</li>
       <li>Плагины</li>
       <li>Модули</li>
     </ul>
   </li>
   <li>Отзывы</li>
   <li>Контакты</li>
     </ul>
   </li>
</ul>

CSS стили списка с соединительными линиями

.treeline, .treeline ul, .treeline li {
   margin: 0; padding: 0; line-height: 1.2; list-style: none;
}
.treeline ul {margin: 0 0 0 15px; /* отступ вертикальной линии */}
.treeline > li:not(:only-child), .treeline li li {
   position: relative; 
   padding: 3px 0 0 20px; /* отступ текста */
}
/* Стиль вертикальной линии */
.treeline li:not(:last-child) { border-left: 1px solid #ccc;}
/* Стили горизонтальной линии*/   
.treeline li li:before, .treeline > li:not(:only-child):before {
   content: ""; position: absolute; top: 0; left: 0;
   width: 1.1em; height: .7em; border-bottom:1px solid #ccc;
}
/* Вертикальная линия последнего пункта в списка */   
.treeline li:last-child:before {
   width: calc(1.1em - 1px); border-left: 1px solid #ccc;
}

3. Пример раскрывающегося HTML списка

  • Главное меню
    • +
      База знаний
      • Компоненты
      • Плагины
      • Модули
    • Отзывы
    • Контакты

HTML разметка раскрывающегося списка

К предыдущей разметке добавляем <div class="drop">+</div> для реализации функции раскрытия элементов древовидного списка.

<ul class="treeline">
   <li>Главное меню
     <ul>
      <li>
	   <div class="drop">+</div>База знаний /* Блок раскрытия списка */
     <ul>
       <li>Компоненты</li>
       <li>Плагины</li>
       <li>Модули</li>
     </ul>
   </li>
   <li>Отзывы</li>
   <li>Контакты</li>
     </ul>
   </li>
</ul>

CSS стили раскрывающегося списка

К CSS из предыдущего примера необходимо дописать следующие стили:

.treeline .drop {
   position: absolute; left: -6px; top: 5px; width: 11px;
   height: 11px; line-height: 1em; text-align: center;
   background: #9F9F9F; color: #fff; /* Фон и цвет кнопки, раскрывающей список */ 
   font-size: 78%; /* Размер +/- */
   cursor: pointer; -webkit-user-select: none; -moz-user-select: none;
}
.treeline li:last-child > .drop {margin-left: 1px;}
.treeline .drop + ul {display: none;}
.treeline .dropM + ul {display: block;}

Скрипт, реализующий функцию раскрывающегося списка

Помимо HTML и CSS, данный способ оформления древовидных списков требует использование JS:

<script type="text/javascript">
$(function() {
var ul = document.querySelectorAll('.treeline > li:not(:only-child) ul, .treeline ul ul');
for (var i = 0; i < ul.length; i++) {
     var div = document.createElement('div');
     div.className = 'drop';
     div.innerHTML = '+';
     ul[i].parentNode.insertBefore(div, ul[i].previousSibling);
     div.onclick = function() {
       this.innerHTML = (this.innerHTML == '+' ? '−' : '+');
       this.className = (this.className == 'drop' ? 'drop dropM' : 'drop');
     }
    }
})();
</script>

Данный JS код можно вставить в конец материала, пройдя в режим просмотра исходного кода. Учтите, что код скрипта может обрезаться редактором и, соответственно, не работать. В этом случае пройдите в настройки редактора и разрешите использование тега <script>.

4. Пример вертикального древовидного списка

  • Главное меню
    • База знаний
      • Компоненты
      • Плагины
      • Модули
    • Отзывы
    • Контакты

HTML разметка вертикального древовидного списка

<ul class="treevertical"> /* Присваиваем класс treevertical */
   <li>Главное меню
     <ul>
      <li>База знаний
     <ul>
       <li>Компоненты</li>
       <li>Плагины</li>
       <li>Модули</li>
     </ul>
   </li>
   <li>Отзывы</li>
   <li>Контакты</li>
     </ul>
   </li>
</ul>

CSS стили вертикального древовидного списка

.treevertical,
.treevertical ul {
   position: relative;  display: table; margin: 5px 0 0 0 !important;
   padding: 6px 0 0 0 !important; line-height: normal; text-align: center;
   word-wrap: break-word; word-break: break-all;}
.treevertical li { position: relative; display: table-cell;}
/* Отступ между пунктами */
.treevertical li:not(:only-child) {padding: 0 .5em;}
.treevertical li:last-child {padding-right: 0;}
.treevertical li:first-child {padding-left: 0;}
/* Стили линий */
.treevertical ul:before,
.treevertical ul li:before,
.treevertical ul li:after {
   content: ""; position: absolute; top: -5px; left: 0;
   width: 50%; height: 5px; border-right: 1px solid #999;}
.treevertical ul:before {top: -4px;}
.treevertical ul li:not(:only-child):before {border-top: 1px solid #999;}
.treevertical ul li:not(:only-child):first-child:before {
   right: 0; left: auto; border-left: 1px solid #999; border-right: none;}
.treevertical ul li:not(:only-child):first-child:before,
.treevertical ul li:not(:only-child):last-child:before { 
   width: calc(50% + .5em/2);
}
.treevertical ul li:after {border: none;}
.treevertical ul li:not(:last-child):not(:first-child):after {
   width: 100%; border-top: 1px solid #999;
}

5. Пример горизонтального древовидного списка

  • Главное меню
    • База знаний
      • Компоненты
      • Плагины
      • Модули
    • Отзывы
    • Контакты

HTML разметка горизонтального древовидного списка

<ul class="treegorizont"> /* Присваиваем класс treegorizont */
   <li>
      <div>Главное меню</div>
        <ul>
          <li>
          <div>База знаний</div>
        <ul>
          <li>
          <div>Компоненты</div>
          </li>
           <li>
          <div>Плагины</div>
          </li>
           <li>
        <div>Модули</div>
           </li>
        </ul>
           </li>
   <li>
      <div>Отзывы</div>
          </li>
   <li>
      <div>Контакты</div>
   </li>
        </ul>
   </li>
</ul>

CSS стили горизонтального древовидного списка

.treegorizont {
   margin: 0 !important; padding: 0 !important; line-height: normal;
   word-wrap: break-word; word-break: break-all;
}
.treegorizont ul {
   position: relative; display: table-cell; margin: 0 !important;
   padding: 0 0 0 10px !important; vertical-align: middle;
}
.treegorizont li {
   display: table; position: relative; margin: 0 !important;
   padding: 0 !important;
}
.treegorizont div {display: table-cell; vertical-align: middle;}
/* Стили линий */
.treegorizont ul:before,
.treegorizont ul li:after,
.treegorizont ul li:not(:last-child):not(:first-child):before {
   content: ""; position: absolute; left: -6px; top: 0;
   width: 3px; height: 50%; border-bottom: 1px solid #ccc;
}
.treegorizont ul:before {left: 0;}
.treegorizont ul li:not(:only-child):after {border-left: 1px solid #ccc;}
.treegorizont ul li:not(:only-child):first-child:after {
   top: 50%; border-top: 1px solid #ccc; border-bottom-color: transparent;
}
.treegorizont ul li:not(:last-child):not(:first-child):before {
   height: 100%; border-left: 1px solid #ccc; border-bottom-color: transparent;
}

Комментарии

  • Нет комментариев. Ваш будет первым!

Закрепленные

Понравившиеся

Чтобы оставить комментарий, необходимо авторизоваться!
Надежный хостинг, который стоит своих денег!

Авторизация

           

Последние комментарии

Илья Хасанов
Добрый день, на сайте https://yootheme.com/joomla-templates есть бесплатный шаблон https://prnt.sc/vqe77q, https://prnt.sc/vqe7rh
1 шаг к созданию собственного ...
26.11.2020
Дмитрий Филев
Добрый день!! Посоветуйте где взять хороший бесплатный шаблон, для сайта-визитка, блог? В вашем обучении на сайте yootheme.com нет бесплатных шаблонов...
1 шаг к созданию собственного ...
26.11.2020
Хасанов Илья
Здравствуйте, Олег! http://prntscr.com/hbnd1l
2 шаг к созданию собственного ...
17.11.2017
Олег Насиканов
Привет Илья, откуда на 3 минуте из папки дополнительные материалы берётся файл стилей. Где их взять? Заранее благодарен.
С уважением, Олег.
2 шаг к созданию собственного ...
17.11.2017
Роберт Сидоров
Существует ли модуль, отображения новостей как у Вас на сайте реализовано? Нужно, чтобы было разграничение новостей и дата отображалась как у Вас. Воз...
Mj Simple News - модуль вывода...
23.09.2017
Сергей Лаврик
Есть какой видосик по созданию безшовного фона?
Бесшовные фоны для сайта
17.07.2017

Полезные ссылки

  • Скачать
    • Актуальная версия CMS Joomla
    • Актуальная версия Denwer
    • Текстовый редактор Notepad++
    • FTP-менеджер Filezilla
  • Оптимизация кода сайта
    • Анализ сайта PageSpeed Insights
    • Анализ файла robots.txt
    • Проверка скорости загрузки сайта
    • Сжатие JS кода
    • Сжатие CSS кода
  • Ускорение индексации сайта
    • Ускорение индексации в Yandex
    • Ускорение индексации в Google
    • Ускорение индексации в Bing
    • Ускорение индексации в Mail.ru
  • Работа с текстом
    • Подбор ключевых слов Wordstat
    • Проверка текста на уникальность
  • Работа с графикой
    • Сжатие PNG без потерь качества
    • Сжатие JPG без потерь качества
    • Преобразовать PNG в SVG
    • Создать свой бесшовный фон
  • Прочее
    • Онлайн-конструктор карт
    • Генератор надежных паролей
    • Генератор QR-кода

Подписывайся на канал Youtube

Подписывайся на группу в ВК

 

Финансовая поддержка блога

Поддержка блога

Если Вы особо цените труд автора блога и желаете не просто отблагодарить его словестно, но еще и материально - данный раздел сайта создан специально для Вас!

  • Создать сайт на CMS Joomla
  • 1 шаг (подготовка)
  • 2 шаг (оформление)
  • 3 шаг (юзабилити)
  • 4 шаг (хостинг/домен)
  • Миграция сайта на CMS Joomla
  • С версии 2.5 на 3x
  • Расширения CMS Joomla
  • Компоненты
  • Плагины
  • Модули
  • CSS, HTML, JavaScript
  • Магия CSS стилей
  • Готовые CSS3 кнопки
  • Бесшовные фоны на чистом CSS
  • Скрипты
  • Графика и текст
  • Бесшовные фоны/паттерны
  • Шрифты для сайта
  • Прочее
  • Это должен знать каждый сайтостроитель!
  • Вопросы и ответы Joomla
  • Онлайн CSS генераторы
  • Создать CSS градиент
  • Создать CSS кнопку
  • Создать тень у текста
  • Создать тень у блоков
  • Заказать создание сайта
  • Вопросы и ответы
  • Оставить заявку на разработку сайта
  • Об авторе блога
  • Отзывы
  • Контактная информация

При полном или частичном копировании материалов сайта - ссылка на данный ресурс обязательна!
Бесплатные авторские видеоуроки и статьи о CMS Joomla | Ilyakhasanov.ru © 2017

  • База знаний
    • Создай свой сайт сам
      • 1 шаг (подготовка)
      • 2 шаг (оформление)
      • 3 шаг (юзабилити)
      • 4 шаг (хостинг/домен)
    • Миграция Joomla
      • C версии 2.5 на 3x
    • Расширения Joomla
      • Компоненты
      • Плагины
      • Модули
    • CSS, HTML, JavaScript
      • Магия CSS стилей
      • Готовые CSS3 кнопки
      • Скрипты
    • Графика и текст
      • Бесшовные фоны
      • Шрифты для сайта
    • Прочее
      • Нужно знать!
      • FAQ Joomla
      • Это интересно!
  • Онлайн-сервисы
    • CSS генераторы
      • Создать градиент
      • Создать кнопку
      • Создать тень у текста
      • Создать тень у блоков
  • Заказать сайт
    • Потенциальному заказчику
      • Вопросы и ответы
      • Заказ-онлайн
  • Отзывы
  • Контакты