Проблема возникла в том, что если полностью удалить модуль галереи, то при изменении размера экрана так, чтобы меню полностью не влазило, все работает нормально(задний фон меню меняется на желтый), но если все оставлять так как есть, то этого по какой-то причине не происходит
p.s. Запихнул все в один код, для вашего удобства, а так он весь по разным файлам распихан
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
@import url('https://fonts.googleapis.com/css?family=Play');
body{
margin: 0; /* ”бираем отступы */
width: 100%;
height: 100%;
}
#menu{
width: 225px;
position: fixed;
z-index: 20;
background-color: #373737;
outline: 2px solid #373737;
}
#menu div{
height: 40px;
padding-left: 10px;
padding-top: 4px;
border-top: 1px solid white;
border-bottom: 1px solid white;
border-left: 2px solid white;
border-right: 2px solid white;
}
#menu div img{
width: 35px;
height: 35px;
float: left;
}
#menu a{
color: white;
font-weight: bold;
text-decoration: none;
font-size: 32px;
font-family: 'Play', sans-serif;
}
#gallery{
width: 100%;
margin-left: 0%;
overflow: hidden;
position: absolute;
}
#gBox{
width: 101.4%;
}
#gBox div{
width: 32%;
margin-right: 1.3%;
float: left;
background-color: yellow;
overflow: hidden;
opacity: 0.8;
}
#gBox div img{
position: relative;
}
#gView{
position: absolute;
z-index: 31;
background-color: rgba(0,0,0,0.5);
background-repeat: no-repeat;
background-size: 100% 100%;
display: none;
}
.gvBut{
width: 45px;
height: 45px;
right: 5px;
position: absolute;
opacity: 0.5;
z-index: 33;
}
#gvB{
background-image: url(../img/gallery/main/back.png);
left: 5px;
top: 43%;
}
#gvN{
background-image: url(../img/gallery/main/next.png);
top: 43%;
}
#gvC{
top: 5px;
background-image: url(../img/gallery/main/close.png);
}
.gvG{
width: 20%;
height: 100%;
background-size: 100% 100%;
position: absolute;
z-index: 32;
}
#gvGL{
background-image: url(../img/gallery/main/grad_back.png);
}
#gvGR{
background-image: url(../img/gallery/main/grad_next.png);
right: 0px;
}
#gvBack{
width: 100%;
height: 300%;
top: 0;
left: 0;
position: fixed;
z-index: 30;
background-color: rgba(0,0,0,0.5);
display: none;
}
</style>
<link href="https://fonts.googleapis.com/css?family=Play" rel="stylesheet">
</head>
<body>
<!-- menu module -->
<div id="menu">
<div onclick="mSwithc()"><img src='img/main/menu_close.png'/><a> Свернуть</a></div>
<div><a href="0.html">На главную</a></div>
<div><a href="1.html">Контакты</a></div>
<div><a href="2.html">Оплата</a></div>
<div><a href="3.html">Доставка</a></div>
<div><a href="4.html">Отзывы</a></div>
<div><a href="5.html">О нас</a></div>
</div>
<script>
var winW = document.documentElement.clientWidth; //ширина экрана
var winH = document.documentElement.clientHeight; //высота экрана
var menu = document.getElementById('menu') //блок меню
var menuH = menu.clientHeight
function mSwithc(){
alert(menuH)
};
function mResize(){
winW = document.documentElement.clientWidth; //ширина экрана
winH = document.documentElement.clientHeight; //высота экрана
if(winH<menuH){
menu.style.backgroundColor='yellow';
}else{
menu.style.backgroundColor='#373737';
};
};
window.onload=mResize;
window.addEventListener("resize", mResize);
</script>
<!--menu end -->
<!-- gallery module -->
<div id="gallery">
<div id="gBox">
<div onclick="gClick(this)"><img src='img/gallery/test/photo_1_1.png'/></div>
<div onclick="gClick(this)"><img src='img/gallery/test/photo_1_2.png'/></div>
<div onclick="gClick(this)"><img src='img/gallery/test/photo_1_3.png'/></div>
<div onclick="gClick(this)"><img src='img/gallery/test/photo_1_4.png'/></div>
<div onclick="gClick(this)"><img src='img/gallery/test/photo_2_2.png'/></div>
<div onclick="gClick(this)"><img src='img/gallery/test/photo_1_7.png'/></div>
<div onclick="gClick(this)"><img src='img/gallery/test/photo_2_1.png'/></div>
<div onclick="gClick(this)"><img src='img/gallery/test/photo_3_1.png'/></div>
<div onclick="gClick(this)"><img src='img/gallery/test/photo_3_2.png'/></div>
<div onclick="gClick(this)"><img src='img/gallery/test/photo_3_3.png'/></div>
</div>
</div>
<script>
document.body.innerHTML +='<div id="gvBack" onclick="gvClose()"></div><div id="gView"><span id="gvElem"><div id="gvB" class="gvBut" onclick="gviBack()"></div><div id="gvN" class="gvBut" onclick="gviNext()"></div><div id="gvC" class="gvBut" onclick="gvClose()"></div><div id="gvGL" class="gvG"></div><div id="gvGR" class="gvG"></div></span></div>';
var gBox = document.getElementById('gBox');
var gView = document.getElementById('gView');
var gbDiv = gBox.getElementsByTagName('div'); //div`ы в gBox
var winW = document.documentElement.clientWidth; //ширина экрана
var winH = document.documentElement.clientHeight; //высота экрана
var count; //количество div в gBox
var elem_num; //номер элемента
var gvDispaly = 0;
var gveDisplay = 1;
//скрытие просмотрщика
function gvClose(){
document.getElementById('gvBack').style.display="none";
gView.style.display="none";
gvDispaly=0;
};
//скрытие елементов просмотрщика
gView.onclick = function(e) {
if (e.target != this) { return true; }
if(gveDisplay==0){
document.getElementById('gvElem').style.display="block";
gveDisplay=1;
}else{
document.getElementById('gvElem').style.display="none";
gveDisplay=0;
};
};
//настройка изображения в просмотрщике
function gViewImg(){
var gbdImg = document.getElementById('gallery').getElementsByTagName('div')[elem_num+1].getElementsByTagName('img')[0];
gView.style.backgroundImage = 'url(' + gbdImg.src + ')';
gViewPar();
};
function gviNext(){
if(elem_num==count){
elem_num=0;
}else{
elem_num = elem_num + 1
};
gViewImg();
};
function gviBack(){
if(elem_num==0){
elem_num=count;
}else{
elem_num = elem_num - 1
};
gViewImg();
};
//настройка просмотрщика
function gViewPar(){
var gbdImg = document.getElementById('gallery').getElementsByTagName('div')[elem_num+1].getElementsByTagName('img')[0];
var gbdiW = gbdImg.naturalWidth;
var gbdiH = gbdImg.naturalHeight;
if((winW/winH)>(gbdiW/gbdiH)){
gView.style.width=winH*gbdiW/gbdiH*0.94 + 'px';
gView.style.height='94%';
gView.style.top=document.body.scrollTop + winH*0.02 + 'px';
gView.style.left=(winW-winH*gbdiW/gbdiH*0.94)/2 + 'px';
}else if((winW/winH)<(gbdiW/gbdiH)){
gView.style.width='94%';
gView.style.height=winW*gbdiH/gbdiW*0.94 + 'px';
gView.style.top=(winH - winW*gbdiH/gbdiW*0.94)/2 + document.body.scrollTop + 'px';
gView.style.left='2%';
}else{
gView.style.width='94%';
gView.style.height='94%';
gView.style.top='2%';
gView.style.left='2%';
};
};
//действие при нажатии на div в gBox
function gClick(elem){
gvDispaly = 1;
for(var i = 0;i<1/0;i++){
if(document.getElementById('gallery').getElementsByTagName('div')[i]==elem){
elem_num = i -1;
gView.style.display="block";
document.getElementById('gvBack').style.display="block";
gViewImg();
break;
};
};
};
//настрорйка div в gBox при изменении парпметров экрана
function gbDivPar(){
var gbdW = gbDiv[0].clientWidth; //ширина div в gBox
var gbdH = gbdW; //высота div в gBox
var gbdMB = gBox.clientWidth*0.013; //нижний отступ div в gBox
for(var i = 0; i < 100; i++){
if(gbDiv[i]==null){//нахождение количества элементов
count = i-1;
document.getElementById('gallery').style.height = gbdW*Math.ceil(i/3) + gbdMB*(Math.ceil(i/3)-1) + 'px'; //установка высоты галереи
break;
}else{
gbDiv[i].style.height=gbdH + 'px';
gbDiv[i].style.marginBottom=gbdMB + 'px';
var gbdImg = gbDiv[i].getElementsByTagName('img')[0];//img в конкретном div
var gbdiW = gbdImg.naturalWidth;
var gbdiH = gbdImg.naturalHeight;
if(gbdiW<gbdiH){//настройка изображения в блоке
gbdImg.style.width="100%";
gbdImg.style.top=(gbdH-gbdW*gbdiW/gbdiH)/2 + "px";
}else if(gbdiW>gbdiH){
gbdImg.style.height="100%";
gbdImg.style.right=-(gbdW-gbdH*gbdiW/gbdiH)/2 + "px";
}else{
gbdImg.style.width="100%";
gbdImg.style.height="100%";
};
};
};
};
function gResize(){
winW = document.documentElement.clientWidth; //ширина экрана
winH = document.documentElement.clientHeight; //высота экрана
gbDivPar();
gViewPar();
};
window.onload=gResize;
window.addEventListener("resize", gResize);
</script>
<!--gallery module end -->
</body>
</html>
