When space runs out, tuck menu choices into the "more" button

Question

When space runs out, tuck menu choices into the "more" button

As I venture into the world of web development, please forgive me if my queries seem elementary.

I am currently using Bootstrap 4 and have implemented a navbar with a hamburger menu that hides the entire menu when the screen reaches a certain width. However, I wish to modify this so that individual menu elements hide within a "more" button one by one. Essentially, if only one menu option exceeds the space available, it should move to the "more" button.

Initially, I attempted to use JavaScript to adjust the screen width and make the last element disappear:

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>

Unfortunately, this approach does not yield the desired results, and I am unsure why. Can anyone provide assistance? Thank you in advance.

javascript html css bootstrap-4

Answer 1

Answer №1

You currently do not have an element with the ID kontakt, but you can locate it using its className by utilizing

document.querySelector('.className')

.

To solve this, create a function and execute it when the DOM is fully loaded or when the window is resized by adding event listeners for each scenario:

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

<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" >
                           <!-- Navigation Links -->
                        </ul>
                        </div>
                    </nav>

Answer 2

You currently do not have an element with the ID kontakt, but you can locate it using its className by utilizing

document.querySelector('.className')

.

To solve this, create a function and execute it when the DOM is fully loaded or when the window is resized by adding event listeners for each scenario:

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

<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" >
                           <!-- Navigation Links -->
                        </ul>
                        </div>
                    </nav>

Answer 3

Answer №2

Have you ever considered using a CSS script like this?

  <style>
       #your_div{
           max-height: specify your desired height here, for example 150px;
       }
  </style>

Then you can run a JavaScript code to monitor the div's height. If the height exceeds or matches a certain value, you can use .append to add a button that triggers the following function:

<button onclick="my_function()" value="Load More Content">
 <script>
      function my_function(){
           $.("#your_div").style("max-height", "1000px (any number will work)");
      }
 </script>

This is just a suggestion, but hopefully it proves useful.

Answer 4

Have you ever considered using a CSS script like this?

  <style>
       #your_div{
           max-height: specify your desired height here, for example 150px;
       }
  </style>

Then you can run a JavaScript code to monitor the div's height. If the height exceeds or matches a certain value, you can use .append to add a button that triggers the following function:

<button onclick="my_function()" value="Load More Content">
 <script>
      function my_function(){
           $.("#your_div").style("max-height", "1000px (any number will work)");
      }
 </script>

This is just a suggestion, but hopefully it proves useful.

When space runs out, tuck menu choices into the "more" button

Answer №1

Answer №2

Similar questions

Issue with Axios Get method: Data not displaying in table

Refreshing JWT Authentication in Angular

How can I bring a "floating" element above its sibling element without taking up space?

Python: Change text within HTML content rather than the HTML tags

Attempting to send a formik form to a specified action URL

Using controllerAs in an AngularJS directive allows for multiple instances to be created, each with the

I created a footer using Bootstrap 4 that is perfectly centered on the desktop version but unfortunately appears off-center on mobile devices

What is the best way to implement startdate and endate in Bootstrap React JS?

Choose Option 1 in order to proceed with selecting Option 2 and displaying the outcome in the VueJs framework

Exploring the potential of utilizing records within deepstream.io

VueJS File Upload Field Failing to Reset Post Successful Submission

Exploring ways to create a dynamic background image that allows the rest of the page to float over seamlessly

Use an array to populate a map in Javascript

Jest - Silence greets the test results

The AngularJS ngModel directive encounters issues when used within a ui-bootstrap tabset

Troubleshooting a TypeScript Problem with React Context

Customize the CSS for material-ui buttons or create a new style altogether

How can I detect when the user has finished typing in the input field using React?

Take away the attention from the span element

Customizing the appearance of the browser's autocomplete feature as we input information into the form field