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

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

+1 ещё

Простой
Как лучше обратиться к кнопке через id или через class?
- 1 подписчик
- 4 часа назад
- 29 просмотров
2

ответа
CSS

Простой
Как сделать плавную анимацию изображения при наведении/убирании курсора мыши?
- 1 подписчик
- 10 часов назад
- 80 просмотров
2

ответа
CSS

Простой
Как сделать, чтобы блоки занимали половину доступной ширины, а последний нечётный — всю?
- 1 подписчик
- 13 часов назад
- 104 просмотра
4

ответа
JavaScript

+2 ещё

Простой
Галерея 3DWave. Перевел HTML в JS. Не работает.?
- 1 подписчик
- вчера
- 77 просмотров
0

ответов
HTML

+3 ещё

Простой
Flask вывод изображения из базы данных?
- 1 подписчик
- вчера
- 68 просмотров
1

ответ
CSS

Простой
Как задать универсальный @keyframes для нескольких разных блоков, без скриптов?
- 1 подписчик
- вчера
- 70 просмотров
1

ответ
JavaScript

+4 ещё

Простой
Почему при загрузке страницы происходит быстрый скролл вниз, а затем вверх?
- 1 подписчик
- вчера
- 85 просмотров
1

ответ
CSS

Простой
Как в CSS повернуть горизонтальный сайт на 90° чтобы на смартофне можно было горизонтально смотреть?
- 4 подписчика
- вчера
- 1035 просмотров
2

ответа
JavaScript

+3 ещё

Средний
Swiper js, как сделать чтобы при фокусе по табу на ссылке внутри слайда не исчезала пагинация?
- 1 подписчик
- 30 апр.
- 45 просмотров
0

ответов
CSS

Простой
Как применить свойство к псевдоэлементу?
- 3 подписчика
- 29 апр.
- 230 просмотров
2

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

Тестировщик-стажёр

ITooLabs • Тула

от 35 000 до 40 000 ₽

Fullstack PHP Developer

Smapse Education

от 40 000 до 65 000 ₽

Trainee - IT Support

move2usajobs.com LLC • Лос-Анджелес

от 2 000 до 4 000 $

HTML+Javascript траблшутинг

02 мая 2024, в 03:17

2000 руб./в час

Нужна презентация и опросник на новую фичу для ресторанов

02 мая 2024, в 01:05

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

Поменять пароль root пользователя mysql

01 мая 2024, в 23:44

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

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

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

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

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

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