Гамбургер. Мобильное меню при клике
Всем привет, ребят за умным советом. делаю гамбургер меню для мобильной версии, нужно сделать чтобы при клике на бургер иконку развернулось меню, но при этом то что было до этого, должно в body скрыться. Как это сделать скрытие body с содержимым до мобильной версии и появилось развернутое меню просто на белом фоне? Очистить все body не могу там содержится div с блоком этого меню , какой то выход должен же несложный быть? скрыть все кроме меню?
|
Создать доп. обертку поместить в нее все кроме меню, ее и скрывать
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div class="wrap"> // тут весь код </div> <div class="menu"></div> </body> </html> |
Фрагмент разметки
<div class="navbar mobile_tab">
<ul class="top_menu" id="mobile">
<li class="first_menu"><p><a href="#id1" title="me" class="about_me_link">About</a></p></li>
<li class="two_menu"><p><a href="#id2" title="hobby">Company</a></p></li>
<li class="contact"><p><a href="#id3" title="movies">Contact</a></p></li>
</ul>
</div>
<div id="burg">
<a href="#">
<span class="bar" id="top"></span>
<span class="bar" id="middle"></span>
<span class="bar" id="bottom"></span>
</a>
</div>
<div class="cross">
<p><img src="images/cross-icon.jpg" alt="Природа"/></p>
<span="menu_text">МЕНЮ</span>
</div>
<div class="mobile_tab">
<nav id="mobile">
<ul>
<li><a href="#">About</a></li>
<li><a href="#">Company</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</div>
|
| Часовой пояс GMT +3, время: 18:18. |