CSS + JS - сдвигать тело вправо, когда открывается боковая навигация, без изменения размера изображений

Я пытаюсь протолкнуть всю свою страницу прямо, когда нажимаю на свое гамбургер-меню, но когда я это делаю, мои изображения меняют размер вместе со всем, что установлено на margin: 0 auto;, в результате чего эти элементы уходят в середину представления. . Есть ли способ переместить все содержимое моей страницы вправо, чтобы оно не отображалось в представлении, а не изменяло размер? Хотелось бы держаться подальше от jQuery и просто сделать это с помощью Vanilla JS.

ПЕРЕД: CSS + JS - сдвигать тело вправо, когда открывается боковая навигация, без изменения размера изображений

ПОСЛЕ: CSS + JS - сдвигать тело вправо, когда открывается боковая навигация, без изменения размера изображений

Мой CSS:

.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #1c2234;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}

.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: white;
  display: block;
  transition: 0.3s;
}

.sidenav a:hover {
  color: #f5d0cd;
}

#main {
  transition: margin-left .5s;
}
.hero-container {
  height: 100vh;
  padding-top: 0px;
}

.hero {
  height: 100vh;
  background-image: url("hero.jpg");
  background-repeat: no-repeat;
  background-size: 100%;
}

Мой HTML:

<body>
    <!-- Sidenav -->
    <div id = "mySidenav" class = "sidenav">
      <a href = "javascript:void(0)" class = "closebtn" onclick = "closeNav()">&times;</a>
      <a href = "#">Home</a>
      <a href = "#">About</a>
      <a href = "#">Visit</a>
      <a href = "#">Catering</a>
      <a href = "#">Wholesale</a>
      <a href = "#">Shop</a>
    </div>
    <!-- Main separates main content from side nav -->
    <div id = "main">
      <!-- Header -->
      <header>
        <nav>
          <div class = "row">
            <ion-icon name = "menu" id = "hamburger" onclick = "openNav()"></ion-icon>
            <%= link_to image_tag("blue_filled_mark1.png", :alt => "Valor Logo", :id => "main-logo"), root_path %>
          </div>
        </nav>
      </header>

      <section class = "hero-container">
        <div class = "hero">
        </div>
      </section>
    </div>
 </body>

Мой Javascript:

function openNav() { // eslint-disable-line no-unused-vars
    document.getElementById("mySidenav").style.width = "250px";
    document.getElementById("main").style.marginLeft = "250px";
}

function closeNav() { // eslint-disable-line no-unused-vars
    document.getElementById("mySidenav").style.width = "0";
    document.getElementById("main").style.marginLeft= "0";

Заранее спасибо за помощь.

javascript html css responsive-design

19.06.2018 22:32

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

396

Перейти к ответу Данный вопрос помечен как решенный

Ответы 4

Попробуйте установить background-size: auto 100% на .hero:

function openNav() { // eslint-disable-line no-unused-vars
  document.getElementById("mySidenav").style.width = "250px";
  document.getElementById("main").style.marginLeft = "250px";
}

function closeNav() { // eslint-disable-line no-unused-vars
  document.getElementById("mySidenav").style.width = "0";
  document.getElementById("main").style.marginLeft = "0";
}

.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #1c2234;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}

.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: white;
  display: block;
  transition: 0.3s;
}

.sidenav a:hover {
  color: #f5d0cd;
}

#main {
  transition: margin-left .5s;
}

.hero-container {
  height: 100vh;
  padding-top: 0px;
}

.hero {
  height: 100vh;
  background-image: url("https://cdn-image.departures.com/sites/default/files/styles/responsive_900x600/public/take-me-to-madison-avenue_2000x1333.jpg?itok=gN5iGEtX");
  background-repeat: no-repeat;
  background-size: auto 100%;
}

<body>
  <!-- Sidenav -->
  <div id = "mySidenav" class = "sidenav">
    <a href = "javascript:void(0)" class = "closebtn" onclick = "closeNav()">&times;</a>
    <a href = "#">Home</a>
    <a href = "#">About</a>
    <a href = "#">Visit</a>
    <a href = "#">Catering</a>
    <a href = "#">Wholesale</a>
    <a href = "#">Shop</a>
  </div>
  <!-- Main separates main content from side nav -->
  <div id = "main">
    <!-- Header -->
    <header>
      <nav>
        <div class = "row">
          <b name = "menu" id = "hamburger" onclick = "openNav()">menu</b>
          
        </div>
      </nav>
    </header>

    <section class = "hero-container">
      <div class = "hero">
      </div>
    </section>
  </div>
</body>

19.06.2018 22:51

Опция 1: Измените размер фона .hero на «100vw», а не на 100%.

.hero {
   height: 100vh;
   background-image: url("hero.jpg");
   background-repeat: no-repeat;
   background-size: 100vw;
}

Вариант 2: Установите ширину #main на '100vw'

#main {
  transition: margin-left .5s;
  width: 100vw
}

Добавление поля margin-left уменьшает ширину #main, потому что это не задано явно. Поскольку размер фона в процентах определяется относительно родительского контейнера, фоновое изображение сжимается, чтобы соответствовать новому размеру #main. Единица 'vw' по сути то же самое, за исключением того, что она относится к области просмотра и родительскому элементу. (См. Хорошее объяснение VW здесь). Установка фиксированного размера фона (вариант 1) заставляет ширину оставаться на уровне 100% от области просмотра, даже когда родительский элемент сжимается. Установка родительского элемента (#main) на фиксированный размер (вариант 2) также работает.

Надеюсь это поможет!

19.06.2018 23:01

вот идея:

html:

<body>
  <div class = "body-wrap">
    <!-- Sidenav -->
    <div id = "mySidenav" class = "sidenav">
      <a href = "javascript:void(0)" class = "closebtn" onclick = "closeNav()">&times;</a>
      <a href = "#">Home</a>
      <a href = "#">About</a>
      <a href = "#">Visit</a>
      <a href = "#">Catering</a>
      <a href = "#">Wholesale</a>
      <a href = "#">Shop</a>
    </div>
    <!-- Main separates main content from side nav -->
    <div id = "main">
      <!-- Header -->
      <header>
        <nav>
          <div class = "row">
            <ion-icon name = "menu" id = "hamburger" onclick = "openNav()"></ion-icon>
            <%= link_to image_tag("blue_filled_mark1.png", :alt => "Valor Logo", :id => "main-logo"), root_path %>
          </div>
        </nav>
      </header>

      <section class = "hero-container">
        <div class = "hero">
        </div>
      </section>
    </div>
  </div>
 </body>

css:

.sidenav{
  width: 200px; /*or whatever width you want*/
  left: -200px;
  position: fixed;
}

.sidenav.open{
  left: 0;
}

.body-wrap {
  position: relative;
  left: 0;
  overflow: hidden;
}
.body-wrap.open {
  left: 200px;
}

затем в событии клика просто включите и выключите свой открытый класс.

19.06.2018 23:34

Ответ принят как подходящий

Когда вы увеличиваете левое поле вашего контейнера #main, вы фактически уменьшаете его доступную ширину для рендеринга его дочерних элементов. Вместо этого вы можете использовать position: relative; left: 250px, чтобы "сдвинуть" блок #main вправо, не изменяя его ширину:

function openNav() { // eslint-disable-line no-unused-vars
    document.getElementById("mySidenav").style.width = "250px";
    document.getElementById("main").style.left = "250px";
}

function closeNav() { // eslint-disable-line no-unused-vars
    document.getElementById("mySidenav").style.width = "0";
    document.getElementById("main").style.left = "0";
}

.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #1c2234;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}

.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: white;
  display: block;
  transition: 0.3s;
}

.sidenav a:hover {
  color: #f5d0cd;
}

#main {
  transition: all .5s ease-out;
  position: relative;
  left: 0;
}
.hero-container {
  height: 100vh;
  padding-top: 0px;
}

.hero {
  height: 100vh;
  background-image: url("https://us.123rf.com/450wm/stockbroker/stockbroker1506/stockbroker150603180/42131668-family-buying-fresh-vegetables-at-farmers-market-stall.jpg?ver=6");
  background-repeat: no-repeat;
  background-size: 100%;
}

.row {
  background: #222;
  color: #FFF;
  padding: 15px;
}

.row span {
  cursor: pointer;
}

.row span:hover {
  text-decoration: underline;
}

<!-- Sidenav -->
    <div id = "mySidenav" class = "sidenav">
      <a href = "javascript:void(0)" class = "closebtn" onclick = "closeNav()">&times;</a>
      <a href = "#">Home</a>
      <a href = "#">About</a>
      <a href = "#">Visit</a>
      <a href = "#">Catering</a>
      <a href = "#">Wholesale</a>
      <a href = "#">Shop</a>
    </div>
    <!-- Main separates main content from side nav -->
    <div id = "main">
      <!-- Header -->
      <header>
        <nav>
          <div class = "row">
            <span name = "menu" id = "hamburger" onclick = "openNav()">Open Menu</span>
          </div>
        </nav>
      </header>

      <section class = "hero-container">
        <div class = "hero">
        </div>
      </section>
    </div>

19.06.2018 23:37

Другие вопросы по теме

Видимость страницы при изменении размера

Создание динамического списка элементов и отображение элемента в соответствии с подпиской пользователя

Как получить определенный набор значений из базы данных в Php с помощью метода PDO Fetch?

Встраивание гиперссылки в сообщение об ошибке Python

Скрыть / показать языковой div с помощью jquery

Изменить цвет кнопки при прокрутке до целевого раздела

Document.write не работает, то есть, но работает в Chrome

Центральная карусель Bootstrap с 3+ коробками

(HTML / CSS) Как центрировать сетку по вертикали в родительском элементе

HTML разное направление фокуса только на одну часть страницы

CSS + JS - сдвигать тело вправо, когда открывается боковая навигация, без изменения размера изображений

Ответы 4

Другие вопросы по теме

Похожие вопросы