Как я могу показать кнопку мобильного меню, если для навигации потребуются две строки?

На моем веб-сайте используется Foundation 6.5.3 с адаптивным переключателем навигации: Меню верхней панели для настольных устройств и меню строки заголовка для устройств с окном просмотра ниже большой точки останова.

Проблема

У меня много пунктов в навигации. Это приводит к использованию двух строк, когда область просмотра меньше 1287 пикселей. Я не хочу этого делать, вместо этого я бы хотел, чтобы в этот момент он переключился на меню строки заголовка. Точная область просмотра, в которой возникает проблема, может измениться в будущем, когда в контент веб-сайта будут внесены изменения. Итак, я хочу, чтобы меню переключалось с верхней панели на строку заголовка, как только оно больше не помещается в одну строку.

Что я пробовал

Я написал этот код JavaScript:

responsiveNav();
function responsiveNav() {
  "use strict";
  var topBar = document.querySelector(".top-bar");
  var titleBar = document.querySelector(".title-bar");
  if (topBar.offsetHeight > 48) {
    topBar.style.display = "none";
    titleBar.style.display = "flex";
  } else {}
}
window.addEventListener('resize', responsiveNav);

Это работает частично: когда верхняя панель превышает 48 пикселей, вместо нее отображается строка заголовка. Но меню не интерактивное, при нажатии на иконку меню ничего не происходит. Что мне нужно сделать, чтобы активировать его?


javascript navigation responsive-design zurb-foundation zurb-foundation-6
person Discostu36    schedule 27.08.2020    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Если я понял вашу проблему, я думаю, вы пытаетесь добавить прослушиватель событий к массиву из 2 кнопок (1 для верхней панели и 1 в строке заголовка), поэтому это не работает. Возможным решением может быть следующее (откройте в новом окне и попробуйте изменить размер, чтобы увидеть, как работают оба режима)

responsiveNav();
function responsiveNav() {
  var topBar = document.querySelector(".top-bar");
  var titleBar = document.querySelector(".title-bar");
  if (window.innerWidth > 480) {
    topBar.style.display = "none";
    titleBar.style.display = "flex";
  } else {
     topBar.style.display = "flex";
    titleBar.style.display = "none";
  }
}
window.addEventListener('resize', responsiveNav);

var btn1 = document.querySelectorAll('.btn1');
    
btn1[0].addEventListener('click', event => {
  console.log("btn1 clicked")
});

btn1[1].addEventListener('click', event => {
  console.log("btn1 clicked")
});
.title-bar {
  display: flex;
  
}

button {
  width: 100px;
}
span {
  width: 20px;
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div class="title-bar">
  This is my title
  <span></span>
  <button class="btn1">Button 1</button>
  <button class="btn2">Button 2</button>
  <button class="btn3">Button 3</button>
  <button class="btn4">Button 4</button>
  </div>
<div class="top-bar">
  <button class="btn1">Button 1</button>
  <button class="btn2">Button 2</button>
  <button class="btn3">Button 3</button>
  <button class="btn4">Button 4</button>
  </div>
  
  <script>

  </script>
</body>
</html>

Обратите внимание, что я добавил только первую кнопку, но вы можете легко добавить остальные.

person Davide Bulbarelli    schedule 27.08.2020
comment
Нет, извините, возможно, мой вопрос был недостаточно ясен. Я говорю о функции отзывчивого переключения в Foundation. В обычной конфигурации имеется фиксированный вьюпорт, в котором отображается мобильная навигация (.title-bar) вместо десктопной (.top-bar). Я хочу, чтобы эта точка переключения была динамической: как только содержимое .top-bar больше не помещается на экране, покажите мобильную навигацию. Мой код показывает это, но навигация не работает, я думаю, потому что Foundation все еще считает, что другая навигация активна. - person Discostu36; 27.08.2020