More dropdown button in bootstrap tab menu items using jQuery
In this tutorial I am going to solve more menu item issue, Let say, I have navigation of 12 items, and when resolution gets smaller, menu items drop in a new line.
But, I want to make that when an item doesn't fit on navigation anymore it should put a "MORE" dropdown button on the right side of the nav.
Obviously, To perform this action, we need some code that hides and shows the tabs or menu items.
Tricks for Hiding and Showing Tabs in the Lists:
Think about CSS Flexbox, Because of Flexbox, the tab items will never break into multiple lines and will shrink to their minimum possible widths. This means we can walk through each item one by one, add up their widths, compare it to the width of .tabs element, and toggle the visibility of particular tabs accordingly. For that, we will create a function called collect and we can take extra menu from the desired width of the menu in a clone.
.clone()
According to jQuery api documentation as we know The .clone() method performs a deep copy of the set of matched elements, meaning that it copies the matched elements as well as all of their descendant elements and text nodes.
And next, we can put it to the more button dropdown $(window).resize() or $(window).onload() but, $(window).onload() is workable on a normal page, when we call it on bootstrap modal it will not run perfectly, so for this, we will use one another jquery event .mouseenter(), so that when we mouse enter on more button dropdown this function will call. and this is workable for me perfectly.
Create index.html page