Задать вопрос
Tizi
@Tizi
гуру программист ( no )
javascript

Как адаптировать меню под мобильные устройства?

Имеется данное меню на сайте
Клик

5a32ccc0b219e434710669.png
<div class="nav_top">
				<div class="logo"><b>Drone</b>Zone</div>
				<nav>
					<ul>
						<a href="#"><li>Home</li></a>
						<a href="#"><li>About</li></a>
						<a href="#"><li>Pricing</li></a>
						<a href="#"><li>Out drones</li></a>
						<a href="#"><li>Our reaizations</li></a>
						<a href="#"><li>Contact</li></a>
					</ul>
				</nav>
			</div>


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

P.s: По надобности залью в песочницу
  • Вопрос задан
  • 4678 просмотров
Комментировать
Подписаться 1 Простой Комментировать
Решения вопроса 1
nakree
@nakree
Fullstack Developer
Можно сделать на чистом СSS или JS. На CSS делается через медиазапросы и псевдоклассы. Нужно на мобильном экране скрывать меню для десктопов и показывать другое меню для телефонов при каком то событии, например, при клике. Подробно рассказывается в этом видео:
https://www.youtube.com/watch?v=MwD_tZGc7gA

"Гамбургер" без js - label + скрытый checkbox 30:33
Ответ написан
Комментировать
Комментировать
Пригласить эксперта
Ответы на вопрос 1
Exploding
@Exploding
wtf?
А кроме меню, адаптировать больше ничего не требуется?))
Вручную адаптировать весь сайт - неблагодарный и адский труд, сопровождающийся громкой, ненормативной лексикой.
Те, кто пробовал это делать без фреймворков - отлично это знают:)) Поэтому лучше выберите и вы себе какой-либо подходящий по знаку зодиака, их то валом, только перебирай.
Сэкономите массу времени, нервов, да и сайт будет намного "ровнее" в итоге.
Вот несколько:
https://getbootstrap.com/
https://getuikit.com/
materializecss.com
и др.
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript разработчик
summer • Ярославль
от 100 000 до 140 000 ₽
Junior JavaScript Developer
КРАФТТЕК • Санкт-Петербург
от 60 000 до 80 000 ₽
JavaScript разработчик
вАйТи
от 5 000 до 25 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Написать программу иммитирующую поведение человека для выбора услуг
20 апр. 2024, в 00:08
10000 руб./за проект
Разработать мобильное приложение android "справочник студента"
20 апр. 2024, в 00:01
4000 руб./за проект
[python,go] Залить ВИДЕО в тикток
19 апр. 2024, в 23:00
5000 руб./за проект
Ещё заказы