Creating zero config advanced Bootstrap 3 navbars with SmartMenus jQuery and the SmartMenus jQuery Bootstrap Addon.
You basically just need to include the JS/CSS files on your Bootstrap 3 powered pages and everything should work automatically including full support for whatever Bootstrap theme you already use. And, of course, you still have the full power and flexibility of SmartMenus jQuery at hand should you need to tweak or customize anything.
In addition to Bootstrap's CSS just include the SmartMenus jQuery Bootstrap Addon CSS. It's just static CSS code you don't need to edit at all (and probably shouldn't try to).
<!-- Bootstrap core CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<!-- SmartMenus jQuery Bootstrap Addon CSS -->
<link href="../addons/bootstrap/jquery.smartmenus.bootstrap.css" rel="stylesheet">
<!-- Navbar static top -->
<div class="navbar navbar-default navbar-static-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div class="navbar-collapse collapse">
<!-- Left nav -->
<ul class="nav navbar-nav">
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">A long sub menu <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Something else here</a></li>
<li class="disabled"><a class="disabled" href="#">Disabled item</a></li>
<li><a href="#">One more link</a></li>
<li><a href="#">Menu item 1</a></li>
<li><a href="#">Menu item 2</a></li>
<li><a href="#">Menu item 3</a></li>
<li><a href="#">Menu item 4</a></li>
<li><a href="#">Menu item 5</a></li>
<li><a href="#">Menu item 6</a></li>
<li><a href="#">Menu item 7</a></li>
<li><a href="#">Menu item 8</a></li>
<li><a href="#">Menu item 9</a></li>
<li><a href="#">Menu item 10</a></li>
<li><a href="#">Menu item 11</a></li>
<li><a href="#">Menu item 12</a></li>
<li><a href="#">Menu item 13</a></li>
<li><a href="#">Menu item 14</a></li>
<li><a href="#">Menu item 15</a></li>
<li><a href="#">Menu item 16</a></li>
<li><a href="#">Menu item 17</a></li>
<li><a href="#">Menu item 18</a></li>
<li><a href="#">Menu item 19</a></li>
<li><a href="#">Menu item 20</a></li>
<li><a href="#">Menu item 21</a></li>
<li><a href="#">Menu item 22</a></li>
<li><a href="#">Menu item 23</a></li>
<li><a href="#">Menu item 24</a></li>
<li><a href="#">Menu item 25</a></li>
<li><a href="#">Menu item 26</a></li>
<li><a href="#">Menu item 27</a></li>
<li><a href="#">Menu item 28</a></li>
<li><a href="#">Menu item 29</a></li>
<li><a href="#">Menu item 30</a></li>
<li><a href="#">Menu item 31</a></li>
<li><a href="#">Menu item 32</a></li>
<li><a href="#">Menu item 33</a></li>
<li><a href="#">Menu item 34</a></li>
<li><a href="#">Menu item 35</a></li>
<li><a href="#">Menu item 36</a></li>
<li><a href="#">Menu item 37</a></li>
<li><a href="#">Menu item 38</a></li>
<li><a href="#">Menu item 39</a></li>
<li><a href="#">Menu item 40</a></li>
<li><a href="#">Menu item 41</a></li>
<li><a href="#">Menu item 42</a></li>
<li><a href="#">Menu item 43</a></li>
<li><a href="#">Menu item 44</a></li>
<li><a href="#">Menu item 45</a></li>
<li><a href="#">Menu item 46</a></li>
<li><a href="#">Menu item 47</a></li>
<li><a href="#">Menu item 48</a></li>
<li><a href="#">Menu item 49</a></li>
<li><a href="#">Menu item 50</a></li>
<li><a href="#">Menu item 51</a></li>
<li><a href="#">Menu item 52</a></li>
<li><a href="#">Menu item 53</a></li>
<li><a href="#">Menu item 54</a></li>
<li><a href="#">Menu item 55</a></li>
<li><a href="#">Menu item 56</a></li>
<li><a href="#">Menu item 57</a></li>
<li><a href="#">Menu item 58</a></li>
<li><a href="#">Menu item 59</a></li>
<li><a href="#">Menu item 60</a></li>
</ul>
</li>
<li><a href="#">Another link</a></li>
<li><a href="#">One more link</a></li>
</ul>
</li>
</ul>
</li>
</ul>
<!-- Right nav -->
<ul class="nav navbar-nav navbar-right">
<li><a href="bootstrap-navbar.html">Default</a></li>
<li class="active"><a href="bootstrap-navbar-static-top.html">Static top</a></li>
<li><a href="bootstrap-navbar-fixed-top.html">Fixed top</a></li>
<li><a href="bootstrap-navbar-fixed-bottom.html">Fixed bottom</a></li>
<li><a href="#">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li><a href="#">A sub menu <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="disabled"><a class="disabled" href="#">Disabled item</a></li>
<li><a href="#">One more link</a></li>
</ul>
</li>
<li><a href="#">A separated link</a></li>
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</div><!--/.container -->
</div>
In addition to Bootstrap's JavaScript just include SmartMenus jQuery and the SmartMenus jQuery Bootstrap Addon. The default options used in jquery.smartmenus.bootstrap.js should work well for all. However, you can, of course, tweak them if you like.
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<!-- SmartMenus jQuery plugin -->
<script type="text/javascript" src="../jquery.smartmenus.js"></script>
<!-- SmartMenus jQuery Bootstrap Addon -->
<script type="text/javascript" src="../addons/bootstrap/jquery.smartmenus.bootstrap.js"></script>
data-* attributesThe following data-* attributes can be set to any ul.navbar-nav:
data-sm-options - set any custom options for the SmartMenus jQuery plugin (check the docs for details).data-sm-skip - this will tell the script to skip this navbar and not apply any SmartMenus features to it so it will behave like a regular Bootstrap navbar.data-sm-skip-collapsible-behavior - this will tell the script to not apply SmartMenus' specific behavior to this navbar in collapsible mode (mobile view). Bootstrap's behavior for navbars in collapsible mode is to use the whole area of the parent items just as a toggle button for their sub menus and thus it's impossible to set a link to the parent items that can be followed on click/tap. SmartMenus' behavior is to add a separate dedicated +/- sub menus toggle button to parent items and thus allows the link of the parent items to be activated on the second click/tap (the first click/tap displays the sub menu if it's not visible).The following methods are available:
jQuery.SmartMenus.Bootstrap.init() - reinit the addon. Useful if you add any navbars dynamically on your page and need to init them (all navbars are normally initialized ondomready).