ZorNet.Ru — сайт для вебмастера » Меню для сайта » Многоуровневое меню с помощью CSS3

Многоуровневое меню с помощью CSS3

Многоуровневое меню с помощью CSS3
В данном материале представлено вертикальное многоуровневое меню, которое создано с помощью CSS3, что идет категориями и под разделами при клике. Такой стиль навигаций, как вертикальное меню становятся все более востребованным для навигаций по сайту. Так как CSS3 открывает для пользователей новые возможности, как при функциональности, так при самом оформление стандартного элемента. Здесь мы наблюдаем складное меню, где можно прописать категорию, и вот как раз под нее выставить самые актуальные запросы, которые вы посчитаете нужным, где в своей основе идут под ключевые значения.

Как можно видеть, что оно идет в темном оттенке цвета, где можно его поставить на аналогичный дизайн, что цветовую гамму сделать немного светлее. Где стразу при открытии страницы или сайта, эта навигация будет бросаться в глаза, что не придется искать по всему порталу. Но и не нужно забывать про содержание, если некоторые выстраивают специальные блоки под название для перехода. То по функциям, эта навигация изначально можно разместить как можно больше запросов, где еще все грамотно прописать для быстрого нахождение вашего тематического направления, что идет в количестве знаков.

Вертикальная навигация реализована при помощи чистого CSS3

Меню для сайта на HTML+CSS

Как происходит реализация вертикального многоуровневого меню на сайте.

HTML

Код
<div id="navigatsiya-menyu">
  <div id="navigation">
  <ul class="razdvizhnaya-navigatsiya animated">
  <li class="kouscvu-desung">
  <input type="checkbox" name="copais-1" id="copais-1" checked>
  <label for="copais-1">Главная страница</label>
  <ul>
  <li class="kouscvu-desung">
  <input type="checkbox" name="copais-damunes-1" id="copais-damunes-1">
  <label for="copais-damunes-1">Перый раздел</label>
  <ul>
  <li><a href="/">Под категории №1</a></li>
  <li><a href="/">Под категории №2</a></li>
  <li><a href="/">Под категории №3</a></li>
  </ul>
  </li>
  <li class="kouscvu-desung">
  <input type="checkbox" name="copais-damunes-2" id="copais-damunes-2">
  <label for="copais-damunes-2">Второй раздел</label>
  <ul>
  <li class="kouscvu-desung">
  <input type="checkbox" name="copais-damunes-gasub-3" id="copais-damunes-gasub-3">
  <label for="copais-damunes-gasub-3">Под категория</label>
  <ul>
  <li><a href="/">Под меню сайта №1</a></li>
  <li><a href="/">Под меню сайта №1</a></li>
  </ul>
  </li>
  <li><a href="/">Набор изображений</a></li>
  </ul>
  </li>
  <li><a href="/">Первые картинки</a></li>
  <li><a href="/">Коллекция смайлов</a></li>
  </ul>
  </li>
  <li class="kouscvu-desung">
  <input type="checkbox" name="copais-2" id="copais-2">
  <label for="copais-2">Шаблоны для сайта</label>
  <ul>
  <li><a href="/">Игровые</a></li>
  <li><a href="/">Тематические</a></li>
  </ul>
  </li>
  <li class="kouscvu-desung">
  <input type="checkbox" name="copais-3" id="copais-3">
  <label for="copais-3">Дизайн для сайта</label>
  <ul>
  <li><a href="/">Стилистика CSS</a></li>
  <li><a href="/">Оформление портала</a></li>
  </ul>
  </li>
  <li class="kouscvu-desung">
  <input type="checkbox" name="copais-4" id="copais-4">
  <label for="copais-4">Продвижение сайта</label>
  <ul>
  <li class="kouscvu-desung">
  <input type="checkbox" name="copais-damunes-3" id="copais-damunes-3">
  <label for="copais-damunes-3">Продвижение ссылками</label>
  <ul>
  <li><a href="/">Трастовые ссылки</a></li>
  <li><a href="/">Прогон по трастам</a></li>
  </ul>
  </li>
  <li><a href="/">Оптимизация сайта</a></li>
  <li><a href="/">Внешнее оптимизация</a></li>
  </ul>
  </li>
</ul>
  </div>
</div>

CSS

Код
html, body, #navigatsiya-menyu {
  width: 100%;
  height: 86%;
  font-size: 62.5%;
}

#navigation {
  width: 384px;
  height: 100%;
  float: left;
   
}

ul {
list-style:none;
margin-left:0;
padding-left:0;
}

a {
  color: #a0f6aa;
  text-decoration: none;
}

.razdvizhnaya-navigatsiya {
  width: 100%;
  height: 100%;
  background: #4d5158;
}

.razdvizhnaya-navigatsiya ul {
  display: none;
  height:0px;
  transition:all 0.5s ease-in-out
}

.razdvizhnaya-navigatsiya li {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.razdvizhnaya-navigatsiya input[type=checkbox] {
  position: absolute;
  opacity: 0;
}

.razdvizhnaya-navigatsiya label, .razdvizhnaya-navigatsiya a {
  position: relative;
  display: block;
  padding: 18px 18px 18px 64px;
  background: #353535;
  box-shadow: inset 0 -1px #4b4b4e;
  color: #f1f1f1;
  font-size: 1.8rem;
  text-shadow: 0 1px 0 #171616;
}

.razdvizhnaya-navigatsiya li a:hover {
  background: #212020;
}

.razdvizhnaya-navigatsiya label::before,
.razdvizhnaya-navigatsiya label::after,
.razdvizhnaya-navigatsiya a::after {
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
}

.razdvizhnaya-navigatsiya label {
  cursor: pointer;
}

.razdvizhnaya-navigatsiya label::before,
.razdvizhnaya-navigatsiya label::after {
  background-image: url(http://zornet.ru/Abavaga/desamibun/cd-icons.svg);
  background-repeat: no-repeat;
}

.razdvizhnaya-navigatsiya label::before {
  left: 18px;
  background-position: 0 0;
  -webkit-transform: translateY(-50%) rotate(-90deg);
  -moz-transform: translateY(-50%) rotate(-90deg);
  -ms-transform: translateY(-50%) rotate(-90deg);
  -o-transform: translateY(-50%) rotate(-90deg);
  transform: translateY(-50%) rotate(-90deg);
}

.razdvizhnaya-navigatsiya label::after {
  left: 41px;
  background-position: -16px 0;
}

.razdvizhnaya-navigatsiya a::after {
  left: 36px;
  background: url(http://zornet.ru/Abavaga/desamibun/cd-icons.svg) no-repeat -48px 0;
}

.razdvizhnaya-navigatsiya input[type=checkbox]:checked + label::before {
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
}

.razdvizhnaya-navigatsiya input[type=checkbox]:checked + label::after {
  background-position: -32px 0;
}

.razdvizhnaya-navigatsiya input[type=checkbox]:checked + label + ul,
.razdvizhnaya-navigatsiya input[type=checkbox]:checked + label:nth-of-type(n) + ul {
  display: block;
  transition: all 0.3s ease-in-out;
height:auto
}

.razdvizhnaya-navigatsiya ul label, .razdvizhnaya-navigatsiya ul a {
  background: #242629;
  box-shadow: inset 0 -1px #424346;
  padding-left: 82px;
  text-shadow: 0 1px 0 #101010;
}

.razdvizhnaya-navigatsiya label:hover, .razdvizhnaya-navigatsiya a:hover {
  background: #2b2a2a;
}

.razdvizhnaya-navigatsiya > li:last-of-type > label,
.razdvizhnaya-navigatsiya > li:last-of-type > a,
.razdvizhnaya-navigatsiya > li > ul > li:last-of-type label,
.razdvizhnaya-navigatsiya > li > ul > li:last-of-type a {
  box-shadow: none;
}

.razdvizhnaya-navigatsiya ul label::before {
  left: 36px;
}

.razdvizhnaya-navigatsiya ul label::after,
.razdvizhnaya-navigatsiya ul a::after {
  left: 59px;
}

.razdvizhnaya-navigatsiya ul ul label,
.razdvizhnaya-navigatsiya ul ul a {
  padding-left: 100px;
}

.razdvizhnaya-navigatsiya ul ul label::before {
  left: 54px;
}

.razdvizhnaya-navigatsiya ul ul label::after,
.razdvizhnaya-navigatsiya ul ul a::after {
  left: 77px;
}

.razdvizhnaya-navigatsiya ul ul ul label,
.razdvizhnaya-navigatsiya ul ul ul a {
  padding-left: 118px;
}

.razdvizhnaya-navigatsiya ul ul ul label::before {
  left: 72px;
}

.razdvizhnaya-navigatsiya ul ul ul label::after,
.razdvizhnaya-navigatsiya ul ul ul a::after {
  left: 95px;
}

@media only screen and (min-width: 600px) {
  .razdvizhnaya-navigatsiya label,
  .razdvizhnaya-navigatsiya a {
  padding: 24px 24px 24px 82px;
  font-size: 1.9rem;
  }
  .razdvizhnaya-navigatsiya label::before {
  left: 24px;
  }
  .razdvizhnaya-navigatsiya label::after {
  left: 53px;
  }
  .razdvizhnaya-navigatsiya ul label,
  .razdvizhnaya-navigatsiya ul a {
  padding-left: 106px;
  }
  .razdvizhnaya-navigatsiya ul label::before {
  left: 48px;
  }
  .razdvizhnaya-navigatsiya ul label::after,
  .razdvizhnaya-navigatsiya ul a::after {
  left: 77px;
  }
  .razdvizhnaya-navigatsiya ul ul label,
  .razdvizhnaya-navigatsiya ul ul a {
  padding-left: 130px;
  }
  .razdvizhnaya-navigatsiya ul ul label::before {
  left: 72px;
  }
  .razdvizhnaya-navigatsiya ul ul label::after,
  .razdvizhnaya-navigatsiya ul ul a::after {
  left: 101px;
  }
  .razdvizhnaya-navigatsiya ul ul ul label,
  .razdvizhnaya-navigatsiya ul ul ul a {
  padding-left: 154px;
  }
  .razdvizhnaya-navigatsiya ul ul ul label::before {
  left: 96px;
  }
  .razdvizhnaya-navigatsiya ul ul ul label::after,
  .razdvizhnaya-navigatsiya ul ul ul a::after {
  left: 125px;
  }
}

.razdvizhnaya-navigatsiya.animated label::before {
  -webkit-transition: -webkit-transform 0.3s;
  -moz-transition: -moz-transform 0.3s;
  transition: transform 0.3s;
}

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

Демонстрация

PS - здесь нужно добавить, что на демонстраций меню идет, как оно изначально было. Где пришлось убрать лишнее классы, а также добавить hover эффект на смену оттенка при наведении курсора на элемент.
19 Марта 2020 Загрузок: 3 Просмотров: 2116 Комментариев: (27)
Поделиться в социальных сетях

Материал разместил
Kosten
Похожие материалы

Оставь свой отзыв

Комментарии: 27
Hero8525
Hero8525 08 Августа 2022 14:191
0
привет, извиняюсь за беспокойства. Меня зовут Анар, я пишу вам из Баку.
Если есть времени, можете помочь мне.

http://zornet.ru/load....0-10140

в этом меню я не могу поменять скрипт для как надо мне



пожалуйста помогите мне справить этот скрипт
Сопрано
Сопрано 08 Августа 2022 17:182
+1
Скрипт здесь не предусмотрен, навигация идет на чистом.
Hero8525
Hero8525 08 Августа 2022 21:433
0
мне нужно делать HTML код
Kosten
Kosten 08 Августа 2022 21:474
+1
Он создан, где изначально идет HTML а ниже CSS, где HTML ставим по месту, где хотите видеть данную навигацию.
Hero8525
Hero8525 08 Августа 2022 21:515
0
извиняюсь, но я изменил пару строчку - но совсем испортился.

тама:

MENU #1
- MENYU #1 — CATEGORY #1
- MENYU #1 — CATEGORY #1 — SMALL CATEGORY #1 - MİXSMALL CATEGORY #1
есть и такой последовеченность. ((
Hero8525
Hero8525 08 Августа 2022 21:546
0
извиняюсь, я не могу писать по русскому. если что то не так писал, дайте мне знать пожалйуста.

просто мне нужно:

последовательность
Kosten
Kosten 08 Августа 2022 23:117
0
Проверил код, хотя мы могли с демонстрации взять, на счет этого кода и стилей, то вод демо-страница, где при установке и по умолчанию первая категория раскрыта.
Hero8525
Hero8525 08 Августа 2022 23:278
0
Главная страница -> Второй раздел -> Под категория -> Набор изображений

вот части, которые я не могу удалить.
Под категория -> Набор изображений
Kosten
Kosten 09 Августа 2022 00:159
+1
Вы так бы изначально ставили вопрос, что вам не нужны под категорий, ведь из картинок изображение, там только в стилях прописана стрелка. Сейчас я тоже не смогу удалить.
waak
waak 09 Августа 2022 20:4910
0
наверное не правильно удаляете! нужно стирать полностью строку которая отвечает за вывод данного пункта она выглядит так! <li><a href="/">Набор изображений</a></li>
Hero8525
Hero8525 09 Августа 2022 20:5711
0
к сожалению это не так. Я делаю удаление правильно. По какой-то причине происходит общее изменение
Hero8525
Hero8525 09 Августа 2022 21:0012
0
https://codepen.io/kocsten/pen/LYVBZwa?editors=1000

Можно ли вам попробовать? Если да, то вы мне очень поможете
waak
waak 09 Августа 2022 21:1113
0
что нужно удалить какие пункты? напите там слова удалить что бы я мог видеть их
waak
waak 09 Августа 2022 21:1814
0
не знаю правильно ли я понял но вот так наверное
Код
<div id="container">
  <div id="menu">
  <ul class="cd-accordion-menu animated">
  <li class="has-children">
  <input type="checkbox" name="group-1" id="group-1" checked>
  <label for="group-1">Group 1</label>
  <ul>
  <li class="has-children">
  <input type="checkbox" name="sub-group-1" id="sub-group-1">
  <label for="sub-group-1">Sub Group 1</label>
  <ul>
  <li><a href="#0">Image</a></li>
  <li><a href="#0">Image</a></li>
  <li><a href="#0">Image</a></li>
  </ul>
  </li>
  <li class="has-children">
  <input type="checkbox" name="sub-group-2" id="sub-group-2">
  <label for="sub-group-2">Sub Group 2</label>
  <ul>
  <li class="has-children">
  <input type="checkbox" name="sub-group-level-3" id="sub-group-level-3">
  <label for="sub-group-level-3">Sub Group Level 3</label>
  <ul>
  <li><a href="#0">Image</a></li>
  <li><a href="#0">Image</a></li>
  </ul>
  </li>
  </ul>
  </li>
  </ul>
  </li>
  <li class="has-children">
  <input type="checkbox" name="group-2" id="group-2">
  <label for="group-2">Group 2</label>
  <ul>
  <li><a href="#0">Image</a></li>
  <li><a href="#0">Image</a></li>
  </ul>
  </li>
  <li class="has-children">
  <input type="checkbox" name="group-3" id="group-3">
  <label for="group-3">Group 3</label>
  <ul>
  <li><a href="#0">Image</a></li>
  <li><a href="#0">Image</a></li>
  </ul>
  </li>
  <li class="has-children">
  <input type="checkbox" name="group-4" id="group-4">
  <label for="group-4">Group 4</label>
  <ul>
  <li class="has-children">
  <input type="checkbox" name="sub-group-3" id="sub-group-3">
  <label for="sub-group-3">Sub Group 3</label>
  <ul>
  <li><a href="#0">Image</a></li>
  <li><a href="#0">Image</a></li>
  </ul>
  </li>
  </ul>
  </li>
</ul>
  </div>
</div>
Hero8525
Hero8525 09 Августа 2022 21:2816
0
Мне нужен только

Group 1
-Sub Group1
--Image
--Image
--Image
Group 2
-Sub Group2
--Image
--Image
--Image
Group 3
-Sub Group3
--Image
--Image
--Image
Group 4
-Sub Group4
--Image
--Image
--Image
Hero8525
Hero8525 09 Августа 2022 21:2815
0
Мне нужен только

Group 1
-Sub Group1
--Image
--Image
--Image
Group 2
-Sub Group2
--Image
--Image
--Image
Group 3
-Sub Group3
--Image
--Image
--Image
Group 4
-Sub Group4
--Image
--Image
--Image
waak
waak 09 Августа 2022 21:3117
0
я вам такой скинул выше смотрите
Hero8525
Hero8525 09 Августа 2022 21:3318
0
Sub Group Level 3 - DELETE :((
waak
waak 09 Августа 2022 21:4119
0
Код
<div id="container">
  <div id="menu">
  <ul class="cd-accordion-menu animated">
  <li class="has-children">
  <input type="checkbox" name="group-1" id="group-1" checked>
  <label for="group-1">Group 1</label>
  <ul>
  <li class="has-children">
  <input type="checkbox" name="sub-group-1" id="sub-group-1">
  <label for="sub-group-1">Sub Group 1</label>
  <ul>
  <li><a href="#0">Image</a></li>
  <li><a href="#0">Image</a></li>
  <li><a href="#0">Image</a></li>
  </ul>
  </li>
  <li class="has-children">
  <input type="checkbox" name="sub-group-2" id="sub-group-2">
  <label for="sub-group-2">Sub Group 2</label>
  <ul>
  
  <li><a href="#0">Image</a></li>
  </ul>
  </li>
  <li><a href="#0">Image</a></li>
  <li><a href="#0">Image</a></li>
  </ul>
  </li>
  <li class="has-children">
  <input type="checkbox" name="group-2" id="group-2">
  <label for="group-2">Group 2</label>
  <ul>
  <li><a href="#0">Image</a></li>
  <li><a href="#0">Image</a></li>
  </ul>
  </li>
  <li class="has-children">
  <input type="checkbox" name="group-3" id="group-3">
  <label for="group-3">Group 3</label>
  <ul>
  <li><a href="#0">Image</a></li>
  <li><a href="#0">Image</a></li>
  </ul>
  </li>
  <li class="has-children">
  <input type="checkbox" name="group-4" id="group-4">
  <label for="group-4">Group 4</label>
  <ul>
  <li class="has-children">
  <input type="checkbox" name="sub-group-3" id="sub-group-3">
  <label for="sub-group-3">Sub Group 3</label>
  <ul>
  <li><a href="#0">Image</a></li>
  <li><a href="#0">Image</a></li>
  </ul>
  </li>
  <li><a href="#0">Image</a></li>
  <li><a href="#0">Image</a></li>
  </ul>
  </li>
</ul>
  </div>

</div>


так?
Hero8525
Hero8525 09 Августа 2022 21:4820
0
Я добавил это. но, к сожалению, это не сработало.

В общем, на странице ничего не было видно ((
waak
waak 09 Августа 2022 21:5122
0
вообщем за эту часть отвечает вот этот код
Код
<li class="has-children">
  <input type="checkbox" name="sub-group-level-3" id="sub-group-level-3">
  <label for="sub-group-level-3">Sub Group Level 3</label>
  <ul>
  <li><a href="#0">Image</a></li>
  <li><a href="#0">Image</a></li>
  </ul>
  </li>
Hero8525
Hero8525 09 Августа 2022 21:5021
0
Можете ли вы просто сделать это в этом порядке, пожалуйста.

waak
waak 09 Августа 2022 22:0923
+1
Код
<div id="container">
  <div id="menu">
  <ul class="cd-accordion-menu animated">
  <li class="has-children">
  <input type="checkbox" name="group-1" id="group-1" checked>
  <label for="group-1">Group 1</label>
  <ul>
  <li class="has-children">
  <input type="checkbox" name="sub-group-1" id="sub-group-1">
  <label for="sub-group-1">Sub Group 1</label>
  <ul>
  <li><a href="#0">Image</a></li>
  <li><a href="#0">Image</a></li>
  <li><a href="#0">Image</a></li>
  </ul>
  </li>
  </ul>
  </li>
  <li class="has-children">
  <input type="checkbox" name="group-2" id="group-2">
  <label for="group-2">Group 2</label>
  <ul>
  <li class="has-children">
  <input type="checkbox" name="sub-group-12" id="sub-group-2">
  <label for="sub-group-2">Sub Group 2</label>
  <ul>
  <li><a href="#0">Image</a></li>
  <li><a href="#0">Image</a></li>
  <li><a href="#0">Image</a></li>
  </ul>
  </li>
  </ul>
  </li>
  <li class="has-children">
  <input type="checkbox" name="group-3" id="group-3">
  <label for="group-3">Group 3</label>
  <ul>
  <li class="has-children">
  <input type="checkbox" name="sub-group-3" id="sub-group-3">
  <label for="sub-group-3">Sub Group 3</label>
  <ul>
  <li><a href="#0">Image</a></li>
  <li><a href="#0">Image</a></li>
  <li><a href="#0">Image</a></li>
  </ul>
  </li>
  </ul>
  </li>
  <li class="has-children">
  <input type="checkbox" name="group-4" id="group-4">
  <label for="group-4">Group 4</label>
  <ul>
  <li class="has-children">
  <input type="checkbox" name="sub-group-4" id="sub-group-4">
  <label for="sub-group-4">Sub Group 4</label>
  <ul>
  <li><a href="#0">Image</a></li>
  <li><a href="#0">Image</a></li>
  <li><a href="#0">Image</a></li>
  </ul>
  </li>
  </ul>
  </li>
</ul>
  </div>

</div>
вот так?
Hero8525
Hero8525 09 Августа 2022 22:2125
0
большое тебе спасибо
это сработало

Но как добавить?

waak
waak 09 Августа 2022 22:2626
+1
дублируя код и заменяя цифры вот так
Код
<div id="container">
  <div id="menu">
  <ul class="cd-accordion-menu animated">
  <li class="has-children">
  <input type="checkbox" name="group-1" id="group-1" checked>
  <label for="group-1">Group 1</label>
  <ul>
  <li class="has-children">
  <input type="checkbox" name="sub-group-1" id="sub-group-1">
  <label for="sub-group-1">Sub Group 1</label>
  <ul>
  <li><a href="#0">Image</a></li>
  <li><a href="#0">Image</a></li>
  <li><a href="#0">Image</a></li>
  </ul>
  </li>
  
  <li class="has-children">
  <input type="checkbox" name="sub-group-2" id="sub-group-2">
  <label for="sub-group-2">Sub Group 2</label>
  <ul>
  <li><a href="#0">Image</a></li>
  <li><a href="#0">Image</a></li>
  <li><a href="#0">Image</a></li>
  </ul>
  </li>  
  
  
  </ul>
  </li>
  <li class="has-children">
  <input type="checkbox" name="group-2" id="group-2">
  <label for="group-2">Group 2</label>
  <ul>
  <li class="has-children">
  <input type="checkbox" name="sub-group-12" id="sub-group-2">
  <label for="sub-group-2">Sub Group 2</label>
  <ul>
  <li><a href="#0">Image</a></li>
  <li><a href="#0">Image</a></li>
  <li><a href="#0">Image</a></li>
  </ul>
  </li>
  </ul>
  </li>
  <li class="has-children">
  <input type="checkbox" name="group-3" id="group-3">
  <label for="group-3">Group 3</label>
  <ul>
  <li class="has-children">
  <input type="checkbox" name="sub-group-3" id="sub-group-3">
  <label for="sub-group-3">Sub Group 3</label>
  <ul>
  <li><a href="#0">Image</a></li>
  <li><a href="#0">Image</a></li>
  <li><a href="#0">Image</a></li>
  </ul>
  </li>
  </ul>
  </li>
  <li class="has-children">
  <input type="checkbox" name="group-4" id="group-4">
  <label for="group-4">Group 4</label>
  <ul>
  <li class="has-children">
  <input type="checkbox" name="sub-group-4" id="sub-group-4">
  <label for="sub-group-4">Sub Group 4</label>
  <ul>
  <li><a href="#0">Image</a></li>
  <li><a href="#0">Image</a></li>
  <li><a href="#0">Image</a></li>
  </ul>
  </li>
  </ul>
  </li>
</ul>
  </div>

</div>
Hero8525
Hero8525 09 Августа 2022 22:4427
0
спасибо вам большое.
Все работает.


Код
<div id="navigatsiya-menyu">
  <div id="navigation">
  <ul class="razdvizhnaya-navigatsiya animated">
  <li class="kouscvu-desung">
  <input type="checkbox" name="copais-1" id="copais-1" checked>
  <label for="copais-1">Group 1</label>
  <ul>
  <li class="has-children">
  <input type="checkbox" name="copais-damunes-1" id="copais-damunes-1">
  <label for="copais-damunes-1">Sub Group 1</label>
  <ul>
  <li><a href="#0">Image</a></li>
  <li><a href="#0">Image</a></li>
  <li><a href="#0">Image</a></li>
  </ul>
  </li>
  <li class="has-children">
  <input type="checkbox" name="copais-damunes-2" id="copais-damunes-2">
  <label for="copais-damunes-2">Sub Group 2</label>
  <ul>
  <li><a href="#0">Image</a></li>
  <li><a href="#0">Image</a></li>
  <li><a href="#0">Image</a></li>
  </ul>
  </li>  
  </ul>
  </li>
  <li class="has-children">
  <input type="checkbox" name="copais-2" id="copais-2">
  <label for="copais-2">Group 2</label>
  <ul>
  <li class="has-children">
  <input type="checkbox" name="copais-damunes-2" id="copais-damunes-2">
  <label for="copais-damunes-2">Sub Group 2</label>
  <ul>
  <li><a href="#0">Image</a></li>
  <li><a href="#0">Image</a></li>
  <li><a href="#0">Image</a></li>
  </ul>
  </li>
  </ul>
  </li>
  <li class="has-children">
  <input type="checkbox" name="copais-3" id="copais-3">
  <label for="copais-3">Group 3</label>
  <ul>
  <li class="has-children">
  <input type="checkbox" name="copais-damunes-3" id="copais-damunes-3">
  <label for="copais-damunes-3">Sub Group 3</label>
  <ul>
  <li><a href="#0">Image</a></li>
  <li><a href="#0">Image</a></li>
  <li><a href="#0">Image</a></li>
  </ul>
  </li>
  </ul>
  </li>
  <li class="has-children">
  <input type="checkbox" name="copais-4" id="copais-4">
  <label for="copais-4">Group 4</label>
  <ul>
  <li class="has-children">
  <input type="checkbox" name="copais-damunes-4" id="copais-damunes-4">
  <label for="copais-damunes-4">Sub Group 4</label>
  <ul>
  <li><a href="#0">Image</a></li>
  <li><a href="#0">Image</a></li>
  <li><a href="#0">Image</a></li>
  </ul>
  </li>
  </ul>
  </li>
</ul>
  </div>
</div>
waak
waak 09 Августа 2022 22:1324
+1


вот такой вид в редакоторе
ссылка на картинку
Войдите:
avatar