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

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>

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

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

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

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

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

JavaScript

+2 ещё

Простой
Мулти селект Dropdown. Как можно создать многослойный мулти селект?
- 1 подписчик
- 6 часов назад
- 50 просмотров
0

ответов
JavaScript

+2 ещё

Простой
Почему window.scrollTo(0, document.body.scrollHeight); не работает?
- 1 подписчик
- 14 часов назад
- 55 просмотров
0

ответов
CSS

Средний
Возможен ли отступ только второй строки CSS clamp?
- 1 подписчик
- 16 часов назад
- 55 просмотров
1

ответ
JavaScript

+2 ещё

Простой
Как подключить 3D персонажа в three.js?
- 1 подписчик
- вчера
- 65 просмотров
0

ответов
HTML

+1 ещё

Простой
Как сделать блок такой же формы?
- 1 подписчик
- вчера
- 114 просмотров
1

ответ
HTML

+1 ещё

Простой
Как лучше сверстать элемент?
- 1 подписчик
- вчера
- 109 просмотров
1

ответ
JavaScript

+2 ещё

Простой
Как сделать плавное появление скрытых под display: none; карточек по клику на кнопку, при подключеной AOS?
- 1 подписчик
- 22 дек.
- 117 просмотров
1

ответ
CSS

Простой
Как с помощью CSS при наведении курсора менять цвет рамки сразу у нескольких карточек?
- 1 подписчик
- 22 дек.
- 85 просмотров
0

ответов
CSS

Простой
Как заменить плавно логотипы?
- 1 подписчик
- 21 дек.
- 73 просмотра
1

ответ
HTML

Простой
Какая альтернатива AVIFS поддерживается в iOS?
- 1 подписчик
- 20 дек.
- 33 просмотра
1

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

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

MST

от 450 $

Баннермейкер (html-5)/дизайнер-верстальщик/motion-дизайнер

BYTIME

от 120 000 ₽

Fullstack Developer под Wordpress

Future Search

от 90 000 до 150 000 ₽

Разработать дизайн для маркетплейса

24 дек. 2024, в 16:09

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

Помочь с регистрацией на linkedin

24 дек. 2024, в 15:54

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

Верстка респонзивной заглушки

24 дек. 2024, в 15:42

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

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 это делается, дальше думайте сами.
Подобные меню может и встречал, но сейчас не вспомню где, а плагины под это дело писать нет смысла.

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

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

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

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