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

What is the best method for incorporating a drop-down menu in every row of a Material UI Table?

The type 'string[]' is missing the required property 'label', resulting in a typescript error

Eslint is actively monitoring files specified in the eslintignore to ensure they meet the set

Issues arise with controlling access due to cache-control and canvas properties

Dividing Faces with Lengthy Edges in three.js into Two Separate Faces

Customize your Bootstrap hamburger menu with a unique open and close button design

Is it possible for the client to prevent the blocking of the Cross-Origin Resource Sharing (CORS) error?

What are some ways to create a div section within a Google Map interface?

Unable to use saved images with jQuery Slider

Does using AJAX with jQuery and PHP guarantee that the response will always be in JSON format?

Extract content from whole webpage including HTML, CSS, and JavaScript

What action will prompt the event to export all data as a CSV file?

What is the correct method for typing a React functional component with properties?

Ways to display pre-selected information using MUI datagrid's checkboxSelection feature

Can you explain to me the syntax used in Javascript?

Accordion menu designed exclusively with JavaScript

How to Display HTML Content from a WYSIWYG Editor in ASP.NET Webforms without Master Page Bootstrap Styles Interfering

Reorganizing asynchronous code into a nested synchronous structure in Meteor/React

An error has occurred with the Firefox Addon: the module `path` cannot be located within the resource://gre/modules/commonjs/http.js

What is the method for substituting one text with another using two-way data binding?