Пытаюсь сделать адаптивное меню.
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>