Растянуть Яндекс карты на всю ширину экрана

225

03 декабря 2018, 17:40

Помогите растянуть карты iframe внутри выдвигающегося меню

CSS

.top-panel {
background: #39464e;
position: fixed;
top: -400px;
left: 0px;
width: 100%;
height: 400px;
padding: 0;
box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
transition: top 500ms cubic-bezier(0.17,0.04,0.03,0.94);
}
iframe{height: 400px;width: 100%;}

HTML

<input class="open" id="top-box" type="checkbox" hidden>
   <label class="btn" for="top-box"></label>
    <div class="top-panel">
        <div class="mapmap">
           <iframe src="https://yandex.ru/map-widget/v1/-/CBBMnWq02D"  frameborder="1" allowfullscreen="true"></iframe>
        </div>
    </div>

Answer 1

Так?

$('.btn').on('click',function(){ 
  var isChecked = $('.open').prop('checked'); 
  if(!isChecked) { 
    $('.top-panel').animate({  
      'top': '0' 
    },1000); 
    $('.btn').text('Закрыть карту'); 
  } else { 
    $('.top-panel').animate({  
      'top': '-100%' 
    },1000); 
    $('.btn').text('Открыть карту'); 
  } 
});

.top-panel { 
  background: #39464e; 
  position: fixed; 
  top: -100%; 
  left: 0; 
  right: 0; 
  width: 100wh; 
  height: 100vh; 
  padding: 0; 
  transition: top 500ms cubic-bezier(.17,.04,.03,.94); 
} 
 
.mapmap, .mapmap iframe{ 
  width: 100%; 
  height: 100%; 
} 
 
iframe { 
  border: 0; 
} 
 
.btn { 
  position: absolute; 
  background: #fff; 
  border: 1px solid #ddd; 
  border-radius: 5px; 
  box-shadow: 0 1px 2px 1px rgba(0,0,0,.15), 
              0 2px 5px -3px rgba(0,0,0,.15); 
  padding: 5px; 
  z-index: 9999; 
  cursor: pointer; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<input class="open" id="top-box" type="checkbox" hidden> 
<label class="btn" for="top-box">Открыть карту</label> 
 
<div class="top-panel"> 
 
  <div class="mapmap"> 
    <iframe src="https://yandex.ru/map-widget/v1/-/CBBMnWq02D" frameborder="1" allowfullscreen="true"></iframe> 
 
  </div> 
</div>