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

Question

[Tizi]

Имеется данное меню на сайте

Клик

<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: По надобности залью в песочницу

Answer 1

[nakree]

Можно сделать на чистом СSS или JS. На CSS делается через медиазапросы и псевдоклассы. Нужно на мобильном экране скрывать меню для десктопов и показывать другое меню для телефонов при каком то событии, например, при клике. Подробно рассказывается в этом видео:
https://www.youtube.com/watch?v=MwD_tZGc7gA

"Гамбургер" без js - label + скрытый checkbox 30:33

Answer 2

[Exploding]

А кроме меню, адаптировать больше ничего не требуется?))
Вручную адаптировать весь сайт - неблагодарный и адский труд, сопровождающийся громкой, ненормативной лексикой.
Те, кто пробовал это делать без фреймворков - отлично это знают:)) Поэтому лучше выберите и вы себе какой-либо подходящий по знаку зодиака, их то валом, только перебирай.
Сэкономите массу времени, нервов, да и сайт будет намного "ровнее" в итоге.
Вот несколько:
https://getbootstrap.com/
https://getuikit.com/
materializecss.com
и др.