Вход

Просмотр полной версии : Гамбургер. Мобильное меню при клике

NastyaNewer
11.05.2018, 12:12
Всем привет, ребят за умным советом. делаю гамбургер меню для мобильной версии, нужно сделать чтобы при клике на бургер иконку развернулось меню, но при этом то что было до этого, должно в body скрыться. Как это сделать скрытие body с содержимым до мобильной версии и появилось развернутое меню просто на белом фоне? Очистить все body не могу там содержится div с блоком этого меню , какой то выход должен же несложный быть? скрыть все кроме меню?
j0hnik
11.05.2018, 12:18
Создать доп. обертку поместить в нее все кроме меню, ее и скрывать

<!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>
NastyaNewer
11.05.2018, 12:20
Фрагмент разметки

<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>