0

Помогите растянуть карты 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>

1 ответ 1

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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.