Last active
April 22, 2022 22:35
-
-
Save primaryobjects/0be99dc272858aba416677741e0f395b to your computer and use it in GitHub Desktop.
Collapsible tabs example in Bootstrap 4 alpha. Resize the page to see the tabs collapse into a dropdown menu. See demo https://plnkr.co/edit/6WVKhJcqfRNP6pDoq85N?p=preview
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <title>Collapsible Tabs Example</title> | |
| <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"> | |
| </head> | |
| <body> | |
| <div class='container main-tab'> | |
| <h2>Collapsible Tabs</h2> | |
| <p>Resize the page to see the tabs collapse into a dropdown menu.</p> | |
| <ul class='nav nav-pills'> | |
| <li class='nav-item border'> | |
| <a href='#tab1' class='nav-link active' data-toggle='tab'>Tab 1</a> | |
| </li> | |
| <li class='nav-item border'> | |
| <a href='#tab2' class='nav-link' data-toggle='tab'>Tab 2</a> | |
| </li> | |
| <li class='nav-item border'> | |
| <a href='#tab3' class='nav-link' data-toggle='tab'>Tab 3</a> | |
| </li> | |
| <li class='nav-item border'> | |
| <a href='#tab4' class='nav-link' data-toggle='tab'>Tab 4</a> | |
| </li> | |
| <li class='nav-item border'> | |
| <a href='#tab5' class='nav-link' data-toggle='tab'>Tab 5</a> | |
| </li> | |
| <li class='nav-item border'> | |
| <a href='#tab6' class='nav-link' data-toggle='tab'>Tab 6</a> | |
| </li> | |
| <li class='nav-item border'> | |
| <a href='#tab7' class='nav-link' data-toggle='tab'>Tab 7</a> | |
| </li> | |
| <li class='nav-item border'> | |
| <a href='#tab8' class='nav-link' data-toggle='tab'>Tab 8</a> | |
| </li> | |
| <li class='nav-item border'> | |
| <a href='#tab9' class='nav-link' data-toggle='tab'>Tab 9</a> | |
| </li> | |
| <li class='nav-item border'> | |
| <a href='#tab10' class='nav-link' data-toggle='tab'>Tab 10</a> | |
| </li> | |
| <li class='nav-item dropdown collapsed-menu'> | |
| <a class="nav-link dropdown-toggle" data-toggle='dropdown' href='#' role='button' aria-haspopup="true" aria-expanded="false"> | |
| <span class="glyphicon glyphicon-chevron-right"></span> | |
| </a> | |
| <div class="dropdown-menu collapsed-tabs" aria-labelledby="dropdownMenuButton"> | |
| </div> | |
| </li> | |
| </ul> | |
| <div class='tab-content clearfix pt-3'> | |
| <div class='tab-pane active' id='tab1'> | |
| Tab 1 | |
| </div> | |
| <div class='tab-pane' id='tab2'> | |
| Tab 2 | |
| </div> | |
| <div class='tab-pane' id='tab3'> | |
| Tab 3 | |
| </div> | |
| <div class='tab-pane' id='tab4'> | |
| Tab 4 | |
| </div> | |
| <div class='tab-pane' id='tab5'> | |
| Tab 5 | |
| </div> | |
| <div class='tab-pane' id='tab6'> | |
| Tab 6 | |
| </div> | |
| <div class='tab-pane' id='tab7'> | |
| Tab 7 | |
| </div> | |
| <div class='tab-pane' id='tab8'> | |
| Tab 8 | |
| </div> | |
| <div class='tab-pane' id='tab9'> | |
| Tab 9 | |
| </div> | |
| <div class='tab-pane' id='tab10'> | |
| Tab 10 | |
| </div> | |
| </div> | |
| </div> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script> | |
| <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script> | |
| <script src="script.js"></script> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var TabManager = { | |
| initialize: function(parent) { | |
| var tabs = parent; | |
| var tabsHeight = tabs.innerHeight(); | |
| if (tabsHeight >= 50) { | |
| while(tabsHeight > 50) { | |
| var children = tabs.children('li:not(:last-child)'); | |
| var count = children.length; | |
| // Create the new menu item. | |
| var item = $(children[count-1]); | |
| var newMenuItem = '<a class="dropdown-item" href="' + item.children('a').attr('href') + '" data-toggle="tab">' + item.text() + '</a>'; | |
| // Append the new menu item to the collapsed menu list. | |
| tabs.find('.collapsed-tabs').prepend(newMenuItem); | |
| // Remove the menu item from the main tab area. | |
| item.remove(); | |
| tabsHeight = tabs.innerHeight(); | |
| } | |
| } | |
| else { | |
| var count = 0; | |
| while(tabsHeight < 50 && (tabs.children('li').length > 0) && count++ < 20) { | |
| var collapsed = tabs.find('.collapsed-tabs').children('a'); | |
| var count = collapsed.length; | |
| if (count) { | |
| // Create the new tab item. | |
| var item = $(collapsed[0]); | |
| var newMenuItem = "<li class='nav-item'>\n<a href='" + item.attr('href') + "' class='nav-link' data-toggle='tab'>" + item.text() + "</a>\n</li>"; | |
| // Insert the new tab item into the main tab area. | |
| tabs.children('li.collapsed-menu').before(newMenuItem); | |
| // Remove the tab item from the collapsed menu list. | |
| item.remove(); | |
| tabsHeight = tabs.innerHeight(); | |
| } | |
| else { | |
| break; | |
| } | |
| } | |
| if (tabsHeight > 50) { | |
| // Double chk height again. | |
| TabManager.initialize(parent); | |
| } | |
| } | |
| // Hide the collapsed menu list if no items are present. | |
| if (!tabs.find('.collapsed-tabs').children('a').length) { | |
| tabs.find('.collapsed-menu').hide(); | |
| } | |
| else { | |
| tabs.find('.collapsed-menu').show(); | |
| } | |
| } | |
| }; | |
| $(function() { | |
| TabManager.initialize($('.main-tab .nav')); | |
| $(window).resize(function() { | |
| TabManager.initialize($('.main-tab .nav')) | |
| }); | |
| }) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Copyright????