Веб

Как переместить iFrame при открытии левой навигации

Узнайте, как корректно сместить iFrame влево при открытии/закрытии левой навигации с помощью CSS‑трансформаций, относительных позиций и JavaScript‑классов.

Авторы: НейроАгент

Как правильно сместить iFrame, который отделяет левую навигационную панель, влево при открытии и закрытии меню, чтобы он не оставался посередине экрана? Я уже пробовал margin: 0 auto; position: absolute; left:0px, но это не работает.

Ниже приведён соответствующий HTML‑, CSS‑ и JavaScript‑код:

html
<body>
  <button id="mobileLinksNavButton" onClick="LinkesNavUmschalten()" class="hamburger">☰</button>
  <div id="LinkeSeiteMobile">
    <div id="linksmenu">…</div>
  </div>
  <div id="rechts">
    <div id="rechtsoben">…</div>
    <div id="rechtsunten">…</div>
    <div id="main_iframe" style="display:none">
      <iframe id="iframe_content" src=""></iframe>
    </div>
  </div>
</body>
js
function LinkesNavUmschalten() {
  var LinsmenuNav = document.getElementById("LinkeSeiteMobile");
  var LinsmenuNav2 = document.getElementById("rechts");
  LinsmenuNav.classList.toggle("menu-offen");
  LinsmenuNav2.classList.toggle("links-rucken");
  console.log(55);
}
css
.menu-offen {
  visibility: hidden;
}
.links-rucken {
  margin: 0 auto;
  position: absolute;
  left:0px;
}

Какие изменения в CSS или JavaScript нужно внести, чтобы iFrame корректно смещался влево при открытии левой навигации?

Проблема возникает именно потому, что класс .links-rucken применён к элементу #rechts – это блочный элемент, занимающий всю ширину экрана.
margin:0 auto; left:0; работают только с элементами фиксированной ширины, поэтому iFrame остаётся в центре, а не смещается как надо.

Шаги решения

Шаг Что меняется Зачем
1 #rechts ставим position: relative Сдвигаемый элемент должен быть позиционирован относительно своего блочного контекста.
2 .links-rucken делаем position: absolute и задаём left:-100% (или фиксированную ширину) Это полностью перемещает элемент влево, когда класс активен.
3 По желанию добавляем transition Для плавного анимационного эффекта.
4 В JS класс применяем к #main_iframe, а не к #rechts Контейнер iframe – это то, что нужно сдвигать.
5 Заменяем visibility:hidden на display:none Скрытое меню не занимает место и не вызывает нежелательных сдвигов макета.

Конкретный код

CSS

css
/* 1. Родительский элемент позиционируем относительно */
#rechts {
  position: relative;            /* База для абсолютной позиционировки */
}

/* 2. Элемент‑контейнер iframe */
#main_iframe {
  position: absolute;            /* Позиционирование относительно #rechts */
  left: 0;                       /* Начальная позиция */
  width: 100%;                   /* Полная ширина, чтобы не было горизонтального скролла */
  transform: translateX(0);      /* Исходное положение */
  transition: transform 300ms ease; /* Плавный переход */
}

/* 3. Класс, который сдвигает iframe при открытии навигации */
.links-rucken {
  transform: translateX(-100%);   /* Перемещаем iframe влево на 100% его ширины */
}

/* 4. Скрываем меню, когда оно закрыто */
.menu-offen {
  display: none;                  /* Не занимает места */
}

Примечание:
transform: translateX(-100%) перемещает элемент ровно на свою ширину влево. Если ширина не 100 %, можно задать фиксированное значение, например transform: translateX(-320px);.

JavaScript

js
function LinkesNavUmschalten() {
  const menu = document.getElementById("LinkeSeiteMobile");
  const iframeContainer = document.getElementById("main_iframe");

  /* Открываем/закрываем меню */
  menu.classList.toggle("menu-offen");

  /* Сдвигаем iframe */
  iframeContainer.classList.toggle("links-rucken");
}

Объяснение:

  • menu-offen скрывает меню без потери места.
  • links-rucken добавляется к контейнеру iframe (#main_iframe), заставляя его сместиться влево.

Что происходит при клике?

  1. Кнопка меню вызывает LinkesNavUmschalten().
  2. Меню (#LinkeSeiteMobile) появляется или скрывается.
  3. #main_iframe получает класс .links-rucken.
  4. Через transform: translateX(-100%) контейнер iframe полностью перемещается влево, оставляя видимым левый навигатор.

Результат

  • iFrame больше не остаётся в центре экрана.
  • При открытии навигации он плавно сдвигается влево.
  • При закрытии возвращается в исходное положение.

Бонус: анимация для плавного эффекта

Если хочется, чтобы сама панель навигации тоже «сдвигалась» вместе с iframe, можно добавить transition к меню:

css
#LinkeSeiteMobile {
  position: absolute;
  left: -300px;          /* Начальная позиция за пределами экрана */
  transition: left 300ms ease;
}

#LinkeSeiteMobile.menu-offen {
  left: 0;               /* Видимая позиция */
}

Теперь панель навигации и iframe двигаются синхронно, создавая более приятный пользовательский опыт.

Вывод

  • Позиционируйте элемент, который нужно сдвигать, как position: absolute относительно position: relative родителя.
  • Используйте transform: translateX(-100%) (или фиксированную ширину) вместо margin:auto.
  • Применяйте класс, вызывающий смещение, к контейнеру iframe, а не к родительскому блоку.
  • Скрывайте меню через display:none, чтобы оно не занимало место.

Таким образом, при открытии левой навигации iframe корректно смещается влево и больше не остаётся в центре экрана.

Авторы
НейроАгент
Автор
Проверено модерацией
НейроОтветы
Модерация
Как переместить iFrame при открытии левой навигации