Home » Jquery » javascript – show/hide buttons on resizable navbar-Exceptionshub

javascript – show/hide buttons on resizable navbar-Exceptionshub

Posted by: admin February 24, 2020 Leave a comment

Questions:

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.
navbar

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.

height>80

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;
}
<!-- bootstrap style -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />


<div id="navbar">
  <ul id="list">
    <li class="item">item 1</li>
    <li class="item">item 2</li>
    <li class="item">item 3</li>
    <li class="item">item 4</li>
    <li class="item">item 5</li>
    <li class="item">item 6</li>
    <li class="item">item 7</li>

  </ul>
  <div id="btns">
    <div class="dropdown">
      <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Dropdown button
         </button>
      <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
      </div>
    </div>
  </div>
</div>



<!-- scripts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

I would love to have similar action to this image,

gif

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

How to&Answer:

Updated – move hidden items to dropdown menu


First, make changes on css:

  1. apply display: flex to #navbar.

  2. 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.

  3. 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);
});

Answer:

I see you’re using bootstrap. You still can do this without any JS if a collapsible menu on mobile devices is what you need.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>