Блог

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

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

#javascript #responsive-design #navigation #zurb-foundation #zurb-foundation-6

#javascript #адаптивный дизайн #навигация #zurb-foundation #zurb-foundation-6

Вопрос:

Мой веб-сайт использует 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 пикселей, вместо нее отображается строка заголовка. Но меню не является интерактивным, при нажатии на значок меню ничего не происходит. Что мне нужно сделать, чтобы активировать ее?

Ответ №1:

Если я понял вашу проблему, я думаю, вы пытаетесь добавить прослушиватель событий в массив из 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>

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

Комментарии:

1. Нет, извините, возможно, мой вопрос был недостаточно ясен. Я говорю о функции адаптивного переключения foundation. В обычной конфигурации есть фиксированный экран просмотра, в котором отображается мобильная навигация («.title-bar») вместо навигации рабочего стола («.top-bar»). Я хочу, чтобы эта точка переключения была динамической: как только содержимое «.top-bar» больше не помещается на экран, покажите мобильную навигацию. Мой код показывает это, но навигация не работает, я думаю, потому что Foundation все еще думает, что другая навигация активна.