Размещение параметров меню в кнопке "Дополнительно" при нехватке места

Question

Я только начинаю веб-разработку, извините, если мои вопросы тривиальны.

Я использую Bootstrap 4 и создал navbar с гамбургер-меню, которое скрывает все меню, когда экран достигает определенной ширины, но я хотели бы изменить, чтобы отдельные элементы меню скрывались в кнопке «больше» один за другим, чтобы, если только один пункт меню слишком велик для размещения меню, только этот параметр переходит к кнопке «больше».

Сначала я попытался в Javascript изменить ширину экрана, чтобы исчез последний элемент:

setInterval(okno, 25)

function okno() {
    var a = window.innerWidth;
    if (a < 1335) {
        document.getElementById("kontakt").style.display = "none";
    }
}

<nav class="navbar navbar-expand-xl navbar-light"
    style="background-color:dimgrey;position:fixed;width:100%;z-index:100">
    <button class="navbar-toggler" type="button" style="background:white;float:left !important" data-toggle="collapse"
        data-target="#colapsibleNavbar">
        <span class="navbar-toggler-icon" style="color:black !important"></span>
    </button>
    <div class="collapse navbar-collapse justify-content-center" id="colapsibleNavbar">
        <ul class="navbar-nav">
            <li class="nav-item">
                <a class="nav-link" href="kopysno.html">Strona Główna</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="Aktualnosci.html">Aktualności</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="mapaokolicy.html">Mapa Okolicy</a>
            </li>
            <li class="nav-item">
                <div class="dropdown">
                    <a class="dropdown-toggle" style="text-align:center;text-decoration:none" data-toggle="dropdown"
                        href="#">Informacje</a>
                    <div style="background-color:dimgrey" class="dropdown-menu">
                        <a class="dropdown-item" href="Historia.html">Historia</a>
                        <a class="dropdown-item" href="#">Geografia</a>
                        <a class="dropdown-item" href="#">Środowisko</a>
                        <a class="dropdown-item" href="#">Kartografia Archiwalna</a>
                        <a class="dropdown-item" href="#">Galeria Fotografii</a>
                    </div>
                </div>
            </li>

            <li class="nav-item">
                <a class="nav-link" href="#">Filmy</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="dawnimieszkancy.html">Dawni Mieszkańcy</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Artykuły prasowe</a>
            </li>
            <li class="kontakt nav-item">
                <a class="nav-link" href="kontakt.html">Kontakt</a>
            </li>
        </ul>
    </div>
</nav>

Но это просто не работает, и я не знаю почему. Вы можете помочь мне? Заранее благодарю

Answer 1

У вас нет элемента с kontakt ID, но вы можете найти его по его className, используя document.querySelector('.className').

Создайте функцию и вызовите ее при загрузке DOM или изменении размера окна, добавление слушателей событий для каждого:

function okno() {
    if(window.innerWidth < 1335) {
         // Hide if window width is less than 1335
         document.querySelector(".kontakt").style.display = "none";
    } else {
         // Show if window with is greater or equal than 1335
         // Use empty string to set the default element display setting
         document.querySelector(".kontakt").style.display = "";
    }
}
// Call when DOM is loaded
document.addEventListener('DOMContentLoaded', okno);
// Call if window is resized
window.addEventListener('resize', okno);

<nav class="navbar navbar-expand-xl navbar-light" style="background-color:dimgrey;position:fixed;width:100%;z-index:100">
                        <button class="navbar-toggler" type="button" style="background:white;float:left !important" data-toggle="collapse" data-target="#colapsibleNavbar">
                            <span class="navbar-toggler-icon" style="color:black !important"></span>
                        </button>
                        <div class="collapse navbar-collapse justify-content-center" id="colapsibleNavbar">
                        <ul class="navbar-nav" >
                            <li class="nav-item">
                                <a class="nav-link" href="kopysno.html">Strona Główna</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="Aktualnosci.html">Aktualności</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="mapaokolicy.html">Mapa Okolicy</a>
                            </li>
                            <li class="nav-item">
                                <div class="dropdown">
                                    <a class="dropdown-toggle" style="text-align:center;text-decoration:none" data-toggle="dropdown" href="#">Informacje</a>
                                    <div style="background-color:dimgrey"class="dropdown-menu">
                                        <a class="dropdown-item" href="Historia.html">Historia</a>
                                        <a class="dropdown-item" href="#">Geografia</a>
                                        <a class="dropdown-item" href="#">Środowisko</a>
                                        <a class="dropdown-item" href="#">Kartografia Archiwalna</a>
                                        <a class="dropdown-item" href="#">Galeria Fotografii</a>
                                    </div>
                                </div>  
                            </li>
                            
                            <li class="nav-item">
                                <a class="nav-link" href="#">Filmy</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="dawnimieszkancy.html">Dawni Mieszkańcy</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#">Artykuły prasowe</a>
                            </li>
                            <li class="kontakt nav-item">
                                <a class="nav-link" href="kontakt.html">Kontakt</a>
                            </li>   
                        </ul>
                        </div>
                    </nav>

Answer 2

пробовали ли вы сценарий css, например

  <style>
       #your_div{
           max-height: set the height you want here, like 150px;
       }
  </style>

, затем запустите код JavaScript, чтобы проверить высоту div, и если высота div превышает или равна, используйте .append, чтобы добавить кнопка с

<button onclick="my_function()" value="Give Me More Content">
 <script>
      function my_function(){
           $.("#your_div").style("max-height", "1000px (this could be any number)");
      }
 </script>

Просто идея, но надеюсь, что это поможет