How to adapt the menu for mobile devices?

There is this menu on the website
Click
5a32ccc0b219e434710669.png
<div class="nav_top">
 <div class="logo"><b>Drone</b>Zone</div>
<nav>
the <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>


Tell me how to adapt the cellphones. Need that for the first time, the phone in place was the menu button ( Burger) and if you press it on top of the site menu, and respectively pressing was hiding.
Who knows approach to my question please throw off the documentation.

P. s: as needed will fill in the sandbox
June 10th 19 at 15:06
2 answers
June 10th 19 at 15:08
Solution
Can be done in pure CSS or JS. The CSS is using media queries and pseudo-classes. Need right on the mobile screen to hide the desktop menu and show another menu for phones with a certain event, such as clicking. In detail in this video:
https://www.youtube.com/watch?v=MwD_tZGc7gA

"Hamburger" without js - label + hidden checkbox 30:33
June 10th 19 at 15:10
Besides the menu, adapt, nothing more is required?))
To manually adapt the entire site - a thankless and hellish work, accompanied by loud expletives.
Those who have tried to do it without frameworks - know it:)) So better select you any any sign of that shaft, go through.
Will save a lot of time, nerves, and the site will be much "smoother" in the end.
Here are a few:
https://getbootstrap.com/
https://getuikit.com/
materializecss.com
etc.

Find more questions by tags jQueryCSSJavaScriptWeb Development