Tips on automating the process of moving overflowing elements into a dropdown menu

Question

Tips on automating the process of moving overflowing elements into a dropdown menu

Challenge Description

In need of a dynamic navigation bar, I faced the problem of displaying only the first X items on one line and have the remaining items hidden in a "Show more" dropdown. The challenge was to calculate the width of each item accurately without rendering all elements at once for performance reasons.

Potential Approach

To address this issue, I devised a method to measure the width of each item by considering text length and button padding. By comparing the total width of items with the screen width, I could determine which items should be shown on the initial display line. However, the difficulty lay in measuring the text width without rendering all items simultaneously, as it would impact performance negatively.

javascript html css reactjs

Answer 1

Answer №1

When determining the width of each item, it is necessary for the browser to render them first. Trying to find a workaround where items are not rendered initially may seem like premature optimization. Unless your menu contains thousands of top-level items, the rendering time is minimal compared to what an alternative scripting solution would require.

The JavaScript logic in the code below is straightforward and should not have a significant impact on performance. The loop iterates through the list of top-level items just once.

window.addEventListener( 'DOMContentLoaded', () => {
    const menu = document.querySelector( '#menu' )
    const items = menu.querySelectorAll( '.item' )
    const viewMore = menu.querySelector( '.view-more' )
    const overflow = menu.querySelector( '#overflow-menu' )
    
    const maxWidth = menu.offsetWidth
    let accumulator = viewMore.offsetWidth
    let c = 0
    
    while ( accumulator <= maxWidth && c < items.length - 1 ) {
        accumulator += items[c].offsetWidth
        c++
    }
    
    for ( c--; c < items.length; c++ ) {
        if ( ! items[c].classList.contains( 'view-more' ) ) {
            overflow.appendChild(items[c]);
        }
    }
    
    viewMore.addEventListener( 'click', () => {
        overflow.classList.toggle( 'visible' ) 
    } )
} )

#menu {
    display: flex;
}
.item {
    padding: 5px 10px;
    cursor: pointer;
    white-space: nowrap;
    color: black;
}
.item.view-more {
    background-color: black;
    color: white;
    border-radius: 5px;
    position: relative;
}
#overflow-menu {
    position: absolute;
    top: 100%;
    right: 0;
    display: none;
    flex-direction: column;
    background-color: white;
    box-shadow: 0 0 10px black;
}
#overflow-menu.visible {
    display: flex;
}

<div id="menu">
  <div class="item">Text</div>
  <div class="item">Of Varying</div>
  <div class="item">Lengths</div>
  <div class="item">That The Browser</div>
  <div class="item">Must</div>
  <div class="item">Render</div>
  <div class="item">In</div>
  <div class="item">Order To</div>
  <div class="item">Determine</div>
  <div class="item">The</div>
  <div class="item">Final Width</div>
  <div class="item">:)</div>
  
  <div class="item view-more">
      View More
      <div id="overflow-menu"></div>
  </div>
</div>

Answer 2

When determining the width of each item, it is necessary for the browser to render them first. Trying to find a workaround where items are not rendered initially may seem like premature optimization. Unless your menu contains thousands of top-level items, the rendering time is minimal compared to what an alternative scripting solution would require.

The JavaScript logic in the code below is straightforward and should not have a significant impact on performance. The loop iterates through the list of top-level items just once.

window.addEventListener( 'DOMContentLoaded', () => {
    const menu = document.querySelector( '#menu' )
    const items = menu.querySelectorAll( '.item' )
    const viewMore = menu.querySelector( '.view-more' )
    const overflow = menu.querySelector( '#overflow-menu' )
    
    const maxWidth = menu.offsetWidth
    let accumulator = viewMore.offsetWidth
    let c = 0
    
    while ( accumulator <= maxWidth && c < items.length - 1 ) {
        accumulator += items[c].offsetWidth
        c++
    }
    
    for ( c--; c < items.length; c++ ) {
        if ( ! items[c].classList.contains( 'view-more' ) ) {
            overflow.appendChild(items[c]);
        }
    }
    
    viewMore.addEventListener( 'click', () => {
        overflow.classList.toggle( 'visible' ) 
    } )
} )

#menu {
    display: flex;
}
.item {
    padding: 5px 10px;
    cursor: pointer;
    white-space: nowrap;
    color: black;
}
.item.view-more {
    background-color: black;
    color: white;
    border-radius: 5px;
    position: relative;
}
#overflow-menu {
    position: absolute;
    top: 100%;
    right: 0;
    display: none;
    flex-direction: column;
    background-color: white;
    box-shadow: 0 0 10px black;
}
#overflow-menu.visible {
    display: flex;
}

<div id="menu">
  <div class="item">Text</div>
  <div class="item">Of Varying</div>
  <div class="item">Lengths</div>
  <div class="item">That The Browser</div>
  <div class="item">Must</div>
  <div class="item">Render</div>
  <div class="item">In</div>
  <div class="item">Order To</div>
  <div class="item">Determine</div>
  <div class="item">The</div>
  <div class="item">Final Width</div>
  <div class="item">:)</div>
  
  <div class="item view-more">
      View More
      <div id="overflow-menu"></div>
  </div>
</div>

Tips on automating the process of moving overflowing elements into a dropdown menu

Challenge Description

Potential Approach

Answer №1

Similar questions

Submitting a form using an anchor tag in Angular 8: A step-by-step guide

`How can I effectively test a React.js page utilizing both Context and useEffect?`

Unable to modify language settings in DatePicker - Material UI

When I adjust the size of my browser, the elements on my HTML page shift around

Guide on exporting a dynamically imported class instance using ES6 modules in NodeJS

What's the trick to efficiently managing multiple checkboxes in an array state?

Text box content does not refresh unless the page is reloaded

What is the process of declaring a react-icons icon in TypeScript?

Troubleshooting the issue: Unable to shift a div to the left in a Rails app using jQuery and CSS when a mouseover event occurs

Configuring IP Whitelisting for Firebase Cloud Functions with MongoDB Cluster

Expanding Your jQuery Library from a Content Delivery Network

How can one save a text value element from a cascading list in ASP.NET MVC?

What is the best way to make a default selection in a headless-ui combobox?

Analyzing string values in Cypress

Replace the function if it is specified in the object, otherwise use the default functionality

How to Perfectly Align a Gif

Regular expression: Identify all instances of double quotes within a given string and insert a comma

Looking for a particular root node in a tree structure?

My component is displaying a warning message that advises to provide a unique "key" prop for each child in a list during rendering

jQuery.get() function is limited to specific types of webpages