├── README.md
└── bootstrap-overflow-navs.js
/README.md:
--------------------------------------------------------------------------------
1 | Bootstrap Overflow Navs Instructions
2 | ====================================
3 |
4 | This plugin will pull the contents of the navbar into a bootstrap dropdown if the width of the ul exceeds that of the page.
5 |
6 | Twitter Bootstrap is required for this jQuery plugin to work, download it from https://github.com/twbs/bootstrap
7 |
8 | ## Getting started
9 |
10 | Include jQuery, bootstrap (CSS and Javascript) and the plugin on a page. Then select a nav to apply the plugin to.
11 |
12 | Below is the HTML for a bootstrap navbar.
13 |
14 | ```html
15 |
16 |
26 |
27 |
28 |
29 |
30 |
37 | ```
38 |
39 | ## Contributing
40 |
41 | Anyone is welcome to help improve this plugin
42 |
43 |
44 |
45 |
46 |
--------------------------------------------------------------------------------
/bootstrap-overflow-navs.js:
--------------------------------------------------------------------------------
1 | /* ===================================================
2 | * bootstrap-overflow-navs.js v0.4
3 | * ===================================================
4 | * Copyright 2012-15 Michael Langford, Evan Owens
5 | *
6 | * Licensed under the Apache License, Version 2.0 (the "License");
7 | * you may not use this file except in compliance with the License.
8 | * You may obtain a copy of the License at
9 | *
10 | * http://www.apache.org/licenses/LICENSE-2.0
11 | *
12 | * Unless required by applicable law or agreed to in writing, software
13 | * distributed under the License is distributed on an "AS IS" BASIS,
14 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
15 | * See the License for the specific language governing permissions and
16 | * limitations under the License.
17 | * ========================================================== */
18 |
19 | +function ($) { "use strict";
20 |
21 | /**
22 | * options:
23 | * more - translated "more" text
24 | * offset - width that needs to be subtracted from the parent div width
25 | */
26 | $.fn.overflowNavs = function(options) {
27 | // Create a handle to our ul menu
28 | // @todo Implement some kind of check to make sure there is only one? If we accidentally get more than one
29 | // then strange things happen
30 | var ul = $(this);
31 |
32 | // This should work with all navs, not just the navbar, so you should be able to pass a parent in
33 | var parent = options.parent ? options.parent : ul.parents('.navbar');
34 |
35 | // Check if it is a navbar and twitter bootstrap collapse is in use
36 | var collapse = $('div.nav-collapse').length; // Boostrap < 2
37 | if(!collapse) {
38 | var collapse = $('div.navbar-collapse').length; // Boostrap > 2
39 | }
40 |
41 | // Check if bootstrap navbar is collapsed (mobile)
42 | if(collapse) {
43 | var collapsed = $('.btn-navbar').is(":visible"); // Boostrap < 2
44 | if(!collapsed) {
45 | var collapsed = $('.navbar-toggle').is(":visible"); // Boostrap > 2
46 | }
47 | }
48 | else {
49 | var collapsed = false;
50 | }
51 |
52 | // Only process dropdowns if not collapsed
53 | if(collapsed === false) {
54 |
55 | // Get width of the navbar parent so we know how much room we have to work with
56 | var parent_width = $(parent).width() - (options.offset ? parseInt($(options.offset).width()) : 0);
57 |
58 | // Find an already existing .overflow-nav dropdown
59 | var dropdown = $('li.overflow-nav', ul);
60 |
61 | // Create one if none exists
62 | if (! dropdown.length) {
63 | dropdown = $('');
64 | dropdown.append($('' + options.more + ''));
65 | dropdown.append($(''));
66 | }
67 |
68 | // Get the width of the navbar, need to add together s as the ul wraps in bootstrap
69 | var width = 100; // Allow for padding
70 | ul.children('li').each(function() {
71 | var $this = $(this);
72 | width += $this.outerWidth();
73 | });
74 |
75 | // Window is shrinking
76 | if (width >= parent_width) {
77 | // Loop through each non-dropdown li in the ul menu from right to left (using .get().reverse())
78 | $($('li', ul).not('.dropdown').not('.dropdown li').get().reverse()).each(function() {
79 | // Get the width of the navbar
80 | var width = 100; // Allow for padding
81 | ul.children('li').each(function() {
82 | var $this = $(this);
83 | width += $this.outerWidth();
84 | });
85 | if (width >= parent_width) {
86 | // Remember the original width so that we can restore as the window grows
87 | $(this).attr('data-original-width', $(this).outerWidth());
88 | // Move the rightmost item to top of dropdown menu if we are running out of space
89 | dropdown.children('ul.dropdown-menu').prepend(this);
90 | }
91 | // @todo on shrinking resize some menu items are still in drop down when bootstrap mobile navigation is displaying
92 | });
93 | }
94 | // Window is growing
95 | else {
96 | // We used to just look at the first one, but this doesn't work when the window is maximized
97 | //var dropdownFirstItem = dropdown.children('ul.dropdown-menu').children().first();
98 | dropdown.children('ul.dropdown-menu').children().each(function() {
99 | if (width+parseInt($(this).attr('data-original-width')) < parent_width) {
100 | // Restore the topmost dropdown item to the main menu
101 | dropdown.before(this);
102 | }
103 | else {
104 | // If the topmost item can't be restored, don't look any further
105 | return false;
106 | }
107 | });
108 | }
109 |
110 | // Remove or add dropdown depending on whether or not it contains menu items
111 | if (! dropdown.children('ul.dropdown-menu').children().length) {
112 | dropdown.remove();
113 | }
114 | else {
115 | // Append new dropdown menu to main menu iff it doesn't already exist
116 | if (! ul.children('li.overflow-nav').length) {
117 | ul.append(dropdown);
118 | }
119 | }
120 | }
121 | };
122 |
123 | }(window.jQuery);
124 |
--------------------------------------------------------------------------------