Проблема с изменением положения кнопки меню после изменения размера окна - PullRequest
Новая
       43

Проблема с изменением положения кнопки меню после изменения размера окна

0 голосов
/ 12 мая 2019

У меня проблема с положением кнопки меню после открытия фиксированного списка меню после изменения размера окна (кнопка не следует за положением меню). Должна быть проблема с подсчетом его положения после изменения размера окна (конечно, после обновления страницы все работает нормально).

Кнопка должна быть зафиксирована (справа от колонки начальной загрузки), а также меню (с высотой: 100vh). Кнопка должна всегда придерживаться меню с правой стороны. Я просто не знаю, как правильно использовать функцию изменения размера, чтобы постоянно проверять положение кнопки в соответствии с меню, чтобы всегда было видно, что к ней можно приклеиться после закрытия меню и его повторного открытия, а также при изменении размера окна с открытым меню.

Я разместил код с несколькими комментариями на коде: https://codepen.io/ilonu/pen/BezRKa

<header>

   <div class="fixed-top">
        <div class="container">
          <div class="row">
            <div class="col">
              <button class="hamburger-btn" id="hamburgerBtn">
                  <span class="menu-name">Menu</span>
              </button>
            </div>
          </div>
        </div>
   </div>

   <div class="menu-wrapper">
     <ul>
       <li>Menu item 1</li>
       <li>Manu item 2</li>
       <li>Menu item 3</li>
     </ul>
  </div>

</header>


.header {
    min-height: 100px;
    padding-bottom: 10px;
    padding-top: 10px;
}

.fixed-top {
    position: fixed;
    height: 80px;
        width: 100%;
    left: 50%;
        top: 20px;
    transform: translate(-50%);
}

.fixed-top .row {
    height: 100%;
}

.fixed-top .col {
    height: 100%; 
    position: relative;
}

/* hamburger menu ---------------------------------*/
.hamburger-btn {
    width: 80px;
    height: 80px;
    position: absolute;
    right: 15px;
}

.hamburger-btn.is-active {
    background-color: grey;
}


/* Menu list ---------------------------- */
.menu-wrapper {
    height: 100vh;
    position: fixed;
    width: 400px;
        right: -400px;
        top: 0;
    bottom: 0;

        background-color: yellow;
}

.menu-active {
    right: 0!important;
}


/* Media queries ----------------- */
@media (max-width: 767px) {
    .hamburger-btn {
        width: 50px;
        height: 50px;
    }
    .menu-wrapper {
        width: 320px;
        right: -320px;
    }

}

@media (max-width: 375px) {
    .menu-wrapper {
        width: 265px;
        right: -265px;
    }

}


const hamburger = document.getElementById('hamburgerBtn');
const menuTop = document.querySelector('.menu-wrapper');

var defaultviewportWidth = Math.max(document.documentElement.clientWidth);


function getButtonPosition() {

    const viewportWidth2 = Math.max(document.documentElement.clientWidth);
        const buttonCoordinates = hamburger.getBoundingClientRect();
        const menuCoordinates = menuTop.getBoundingClientRect();
        const menuWidth = menuCoordinates.width;
        const defaultBtnPosition = buttonCoordinates.right;
        const BtnPositionRight = (viewportWidth2 - defaultBtnPosition);
        const ButtonOffsetRight = menuWidth - BtnPositionRight;

        return ButtonOffsetRight;
};


var position = getButtonPosition();


function showMenu() {

    menuTop.classList.toggle('menu-active');
    hamburger.classList.toggle('is-active');

    if (hamburger.classList.contains('is-active')) {
        hamburger.style.right = position + 15 + 'px';
    }
    else {
      // this is 'default' button position inside bootstrap .col
        hamburger.style.right = '15px';
    }
}

hamburger.addEventListener('click', showMenu);

// with resizing the window i wanted to update position values
    $( window ).resize(function() {
      defaultviewportWidth = Math.max(document.documentElement.clientWidth);
      getButtonPosition();
    });

Буду признателен за любые подсказки!

...