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