Адаптивное меню
Пытаюсь сделать адаптивное меню.
http://cssdeck.com/labs/xplfpiry сейчас при уменьшении разрешения экрана появляется кнопка "Меню", и соответственно самое меню исчезает при нажатии меню появляется и исчезает после того как экран уменьшился, я нажимаю "меню", появилось меню, дальше нажимаю "меню", меню исчезает: после этого если вернуться на обычный размер экрана, то меню там тоже не будет так как в стили прописался display:none Что можно сделать чтобы при уменьшенном экране когда в стили прописывается display:none, потом при расширении экрана меню показывалось?
function view(n) {
style = document.getElementById(n).style;
style.display = (style.display == 'block') ? 'none' : 'block';
}
@media (max-width: 750px) {
.terms {
display:none;
margin:5px 0px;
padding:10px;
width:98%;
border:1px solid #ffbc80;
background:#ffffdf;
}
}
@media (min-width: 750px) {
.rbutton {display:none}
.rhead p{display: inline;}
.rhead {margin-top:20px;}
}
<p class="rbutton"onClick="view('t1')">Меню</p>
<div id="t1" class="rhead terms">
<p>Пункт 1 </p>
<p>Пункт 2 </p>
<p>Пункт 3 </p>
<p>Пункт 4 </p>
</div>
|
ekad,
добавить в css
.terms.show { display: block }
функцию заменить на
function view(n) {
document.getElementById(n).classList.toggle("show");
}
|
<!DOCTYPE html>
<html>
<head>
<style>
@media (max-width: 750px) {
.terms {
display:none;
margin:5px 0px;
padding:10px;
width:98%;
border:1px solid #ffbc80;
background:#ffffdf;
}
}
@media (min-width: 750px) {
.rbutton {display:none}
.rhead p{display: inline;}
.rhead {margin-top:20px;}
}
</style>
</head>
<body>
<p class="rbutton"onClick="view('t1')">Меню</p>
<div id="t1" class="rhead terms">
<p>Пункт 1 </p>
<p>Пункт 2 </p>
<p>Пункт 3 </p>
<p>Пункт 4 </p>
</div>
<script>
// Code goes here
function view(n) {
style = document.getElementById(n).style;
style.display = (style.display == 'block') ? 'none' : 'block';
}
var
btn = document.querySelector('.rbutton'),
comp = window.getComputedStyle(btn, null),
menu = document.querySelector('.rhead');
window.onresize = function() {
if (comp.display === 'none') {
menu.style.display = 'block';
}
}
</script>
</body>
</html>
|
ВСЕМ ОГРОМНОЕ СПАСИБО!
|
| Часовой пояс GMT +3, время: 13:44. |