Как сделать подобное меню?

Question

Алексей @AlexFreem

addicted

HTML
CSS

Как сделать подобное меню?

В чем собственно проблема. А именно она в этих "точках" и "линиях" от одной до другой точки.
При клике на нижний родительский пункт меню - оно тоже должно раскрываться. Пусть без анимации. И в нем могут быть такие же дочерние пункты соединенные линиями.

Возможно есть какие то плагины JavaScript'овые? Но хотелось бы на css выехать. Можно и на css 3.

Ну или хотя бы ссылочкой на что либо подобное поделитесь - а я там разберу что и как сделано.

Вопрос задан более трёх лет назад
2311 просмотров

Комментировать

Подписаться 1 Оценить Комментировать

Пригласить эксперта

Ответы на вопрос 4

2 комментария

Алексей @AlexFreem Автор вопроса

Спасибо. Бесполезно.

Написано более трёх лет назад

Андрей Мохов @mokhovcom

Алексей: вы допустили опечатку в слове "не разобрался, лень"

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Меню</title>
<style>
ul {
	list-style: none;
	padding: 0;
	margin: 0;
}
.item {
	list-style: none;
	margin: 0;
	padding: 0 0 0 10px;
	border-left: dotted 1px #ccc;
}
.item:last-child {
	border-left: none;
}
</style>
</head>
<body>
<ul>
<li class="item">list 1</li>
<li class="item">list 2</li>
<li class="item">list 3</li>
<li class="item">list 4</li>
</form>
</ul>
</body>
</html>

Написано более трёх лет назад

Комментировать

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы

CSS

+2 ещё

Простой
Как корректно настроить Gulp + Sass?
- 1 подписчик
- 15 часов назад
- 42 просмотра
1

ответ
HTML

Простой
Почему некорректно отражается текстареа в Osclass evolution?
- 1 подписчик
- 18 часов назад
- 29 просмотров
0

ответов
HTML

Простой
Как на html реализовать блоки «Внимание / Важно»?
- 1 подписчик
- 18 часов назад
- 106 просмотров
1

ответ
HTML

+1 ещё

Простой
Как разместить элементы с разных блоков, чтобы они перекрывали друг друга?
- 1 подписчик
- 21 час назад
- 47 просмотров
1

ответ
CSS

Простой
Как сделать border со смещением?
- 1 подписчик
- вчера
- 95 просмотров
1

ответ
JavaScript

+1 ещё

Простой
Как перевести перевести top в translateY?
- 1 подписчик
- вчера
- 78 просмотров
1

ответ
HTML

+1 ещё

Простой
Flex и position: sticky, почему не работает?
- 1 подписчик
- 19 нояб.
- 70 просмотров
1

ответ
JavaScript

+2 ещё

Средний
Как построить код, чтобы гугл таблица на сайте выдавала только значение из конкретной ячейки?
- 1 подписчик
- 19 нояб.
- 40 просмотров
0

ответов
JavaScript

+2 ещё

Средний
Как выделить мышкой область на странице и присвоить класс элементам попавшим в эту область?
- 1 подписчик
- 19 нояб.
- 102 просмотра
1

ответ
JavaScript

+3 ещё

Средний
Как сделать слайдер на swiper, в котором активный слайд всегда крайний слева?
- 1 подписчик
- 19 нояб.
- 112 просмотров
1

ответ
Показать ещё Загружается…

Fullstack Developer под Wordpress

Future Search

от 90 000 до 150 000 ₽

WordPress-разработчик

div. • Ставрополь

от 50 000 до 120 000 ₽

JavaScript FullStack разработчик

Rocket • Смоленск

от 80 000 до 130 000 ₽

Нарисовать проект Площадки для дизайнеров интерьеров

22 нояб. 2024, в 10:19

10000 руб./за проект

Сделать верстку двух страниц из фигмы

22 нояб. 2024, в 09:58

5000 руб./за проект

Доделать проект

22 нояб. 2024, в 09:57

3000 руб./за проект

Answer 1 · 2015-03-11 11:18:23

Андрей Мохов @mokhovcom

.item:last-child {
/* тут без линии */
}

Ответ написан более трёх лет назад

2 комментария

Answer 2 · 2015-03-11 15:55:38

Василь Бойко @ferdasfarmazone

Верстальщик!

Чего вы сразу все накинулись на парня? Там можно не только через :before or :after, можно ещё background

Ответ написан более трёх лет назад

Комментировать

Answer 3 · 2015-03-11 11:13:07

Беграундом можно сделать, полоска будет беграундом у li, точка у a. last-child примените, чтобы у последнего не до конца была полоска. Можно :after, :before использовать

Answer 4 · 2015-03-11 11:56:05

В чем сложности самому попробовать?
Вам уже два раза подсказали, с помощью :before и :after это делается, дальше думайте сами.
Подобные меню может и встречал, но сейчас не вспомню где, а плагины под это дело писать нет смысла.

Как сделать подобное меню?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт