Как превратить обычный меню в "бургер" меню

Question

При перемещение вниз страницы обычный (горизонтальный) меню превращался в "бургер" меню.Когда кто-то листает вниз меню оставался на самом верху и в правом верхнем углу появился "бургер" меню, когда листаешь вверх то наоборот и находишься на самом верху, пропал "бургер".

Answer 1

это обучающий пример а не боевой !
он предназначен для ознакомления, понимания как оно работает.

// @ts-check
const menu1 = document.getElementById('menu1')
const menu2 = document.getElementById('menu2')
const menu2button = document.getElementById('menu2button')
const menu1H = menu1.getBoundingClientRect().height
/** @type {'inc'|'dec'}*/
let qq = 'dec'
window.addEventListener('scroll', _.throttle(() => {
  if (pageYOffset > menu1H) {
    if ('dec' === qq) {
      toggle()
    }
    qq = 'inc'
  } else {
    if ('inc' === qq) {
      toggle()
    }
    qq = 'dec'
  }
}, 100))
/** @param {HTMLElement} el*/
function toggleHidden(el) { el.classList.toggle('hidden') }

function toggleHiddenMenu2() { toggleHidden(menu2) }

function toggle() { document.querySelectorAll('.menu').forEach(toggleHidden) }

html,
body {
  margin: 0;
  padding: 0;
}

.inlineBlock {
  display: inline-block;
}

.hidden {
  display: none !important;
}

.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  background-color: cadetblue;
}

header {
  height: 25px;
  line-height: 25px;
}

menu {
  margin: 0;
}

#menu2 {
  position: absolute;
  right: 0;
  width: 150px;
  background-color: aquamarine;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://unpkg.com/lodash"></script>

</head>

<body>

  <header class="sticky">
    <menu>

      <div class="inlineBlock" style="width: 5%;">logo</div>

      <div class="inlineBlock" style="width: calc(90% - 40px); text-align: center;">
        <div id="menu1" class="menu">
          <span><a href="#home">home</a></span>
          <span><a href="#about">about</a></span>
          <span><a href="#constacts">constacts</a></span>
        </div>
      </div>

      <div class="inlineBlock" style="width: 5%;">
        <button is="menu2button" class="menu hidden" onclick="toggleHiddenMenu2()">= </button>
        <ul id="menu2" class="hidden">
          <li><span><a href="#home">home</a></span></li>
          <li><span><a href="#about">about</a></span></li>
          <li><span><a href="#constacts">constacts</a></span></li>
        </ul>
      </div>

    </menu>
  </header>

  <main>
    q<br> q<br> q<br> q<br> q<br> q<br> q<br> q<br> q<br> q
    <br> q<br> q<br> q<br> q<br> q<br> q<br> q<br> q<br> q
    <br> q<br> q<br> q<br> q<br> q<br> q<br> q<br> q<br> q
    <br> q<br> q<br> q<br> q<br> q<br> q<br> q<br> q<br> q
    <br> q<br> q<br> q<br> q<br> q<br> q<br> q<br> q<br> q
    <br> q<br> q<br> q<br> q<br> q<br> q<br> q<br> q<br>
  </main>

</body>

</html>

БЛОГ НА HUSL

Как превратить обычный меню в "бургер" меню

Ответы (1 шт):