show/hide buttons on resizable navbar

Question

I have a nivagation bar with button links in row on resize the window to smaller width each button wrap underneath which changing the navigation height, gets removed from the nav and appended into a dropdown menu.

I managed to append wrapped buttons when the navigation height is higher than 80, but it will only work if the initial size of the screen is big which will have all buttons in one row. but if the screen started at a smaller width it won't append all wrapped buttons in the menu.

Here is my attempt

$(window).resize(function() {
  var navbar = $("#navbar");
  var list = $("#list");
  var btns = $("#btns");
  var last_element;
  for (var i = 0; i < list.children().length; i++) {
    setTimeout(function() {
      if (list.height() > 80) {
        last_element = list.children().last();
        setTimeout(function() {
          $("#btns .dropdown-menu").prepend(last_element);
        }, 300);
        last_element.remove();
      }
    }, 500);

  }
});

#navbar {
  width: fit-content;
  background-color: #dbdbdb;
  box-shadow: 2px 2px 2px #999;
  border-radius: 10px;
  padding: 10px;
}

#list {
  margin: 0;
  padding: 0;
  text-align: center;
  display: flex;
  flex-wrap: wrap;
}

.item {
  color: #333;
  font-size: 30px;
  font-weight: bold;
  background-color: #f5f5f5;
  /*    display: inline-block; */
  padding: 10px 30px;
  border-radius: 5px;
  box-shadow: 2px 2px 2px #888;
  margin: 4px 2px;
  list-style-type: none;
}

.dropdown-menu {
  width: 200px;
  padding: 0 20px;
}






  
    item 1
    item 2
    item 3
    item 4
    item 5
    item 6
    item 7

I would love to have similar action to this image,

Can someone offer a snippet suggestion or what should I use to implement such action?

Aluminium Shek · Accepted Answer

Updated - move hidden items to dropdown menu

First, make changes on css:

apply display: flex to #navbar.
calculate the maximum height of #list manually and set max-height & overflow: hidden property to it. In this case, the maximum height of #list would be 73px but not 80px. (the height of .item 65px + top margin of .item 4px + bottom margin of .item 4px = 73px) If the max-height is not correct, #list may not hide the .items properly.
set display: inline-block for .items.

`

#navbar{
   width: fit-content;
   background-color: #dbdbdb;
   box-shadow: 2px 2px 2px #999;
   border-radius: 10px;
   padding: 10px;

   /*Flex layout*/
   display:flex;
   flex-direction:row;
   align-items:center;
}

#list{
   margin: 0;
   padding: 0;

   /*Calculate the max-height and set overflow hidden*/
   overflow:hidden;
   max-height:73px;
}

.item{
   color: #333;
   font-size: 30px;
   font-weight: bold;
   background-color: #f5f5f5;
   display: inline-block;
   padding: 10px 30px;
   border-radius: 5px;
   box-shadow: 2px 2px 2px #888;
   margin: 4px 2px;
   list-style-type: none;

   /*Move text-align center to here*/
   text-align: center;

   /*Remove flex layout & add display inline-block*/
   display: inline-block;

}

.dropdown-menu{
   width: 200px;
   padding: 0 20px;
}

`

Then, update the $(window).resize() function. The below code will check if the item is being moved to a hidden area. Moreover, use .html() to refresh the dropdown menu.

let list = $("#list");
let listItems = $("#list .item");
let dropdownMenu = $("#btns .dropdown-menu");

$(window).resize(function() {
    let listPosition = list.position().top;
    let hiddenItems = listItems.filter(function(){
    return $(this).position().top - listPosition > 0;
  }).clone();
    dropdownMenu.html(hiddenItems);
});

show/hide buttons on resizable navbar

Answers (2)

Related Questions