This plugin will pull the contents of the navbar into a bootstrap dropdown if the width of the ul exceeds that of the page.
Twitter Bootstrap is required for this jQuery plugin to work, download it from https://github.com/twbs/bootstrap
Include jQuery, bootstrap (CSS and Javascript) and the plugin on a page. Then select a nav to apply the plugin to.
Below is the HTML for a bootstrap navbar.
<div class="nav-collapse">
<ul id="menu" class="nav">
<li class=""><a href="#">Menu 1</a></li>
<li class=""><a href="#"">Menu 2</a></li>
<li class=""><a href="#"">Menu 3</a></li>
<li class=""><a href="#"">Menu 4</a></li>
<li class=""><a href="#"">Menu 5</a></li>
<li class=""><a href="#"">Menu 6</a></li>
<li class=""><a href="#"">Menu 7</a></li>
<li class=""><a href="#"">Menu 8</a></li>
</ul>
</div>
<script src="jquery.js"></script>
<script src="bootstrap.js"></script>
<script src="bootstrap-overflow-navs.js"></script>
<script>
$("#menu").overflowNavs({
"more" : "More",
"parent" : ".nav-collapse",
"override_width" : true
});
</script>
Anyone is welcome to help improve this plugin