Форум

ekad · #1 (**permalink**) 29.06.2016, 08:07

Пытаюсь сделать адаптивное меню.

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>

рони · #2 (**permalink**) 29.06.2016, 10:28

ekad,
добавить в css

.terms.show { display: block }

функцию заменить на

function view(n) {
document.getElementById(n).classList.toggle("show");

}

Rasy · #3 (**permalink**) 29.06.2016, 10:41

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

ekad · #4 (**permalink**) 29.06.2016, 11:32

ВСЕМ ОГРОМНОЕ СПАСИБО!

Форум

Справочник

Discord чат

Курсы javascript