Tizi
@Tizi
гуру программист ( no )

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

Имеется данное меню на сайте
Клик
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: По надобности залью в песочницу
  • Вопрос задан
  • 2561 просмотр
Решения вопроса 1
nakree
@nakree
Frontend 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
и др.
Ответ написан
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы