PHP File Manager
Editing File: bootstrap-navbar.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>SmartMenus jQuery Website Menu - Bootstrap Addon - Navbar</title> <!-- Bootstrap core CSS --> <link href="../libs/demo-assets/bootstrap/css/bootstrap.min.css" rel="stylesheet"> <!-- SmartMenus jQuery Bootstrap Addon CSS --> <link href="../addons/bootstrap/jquery.smartmenus.bootstrap.css" rel="stylesheet"> <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script> <![endif]--> </head> <body style="padding-top:20px;"> <div class="container"> <!-- Static navbar --> <div class="navbar navbar-default" role="navigation"> <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</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</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</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 class="active"><a href="bootstrap-navbar.html">Default</a></li> <li><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</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</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> <div class="page-header"> <h1>SmartMenus Bootstrap Addon (Navbar)</h1> <p class="lead">Creating zero config advanced Bootstrap 3 navbars with SmartMenus jQuery and the SmartMenus jQuery Bootstrap Addon.</p> </div> <p>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.</p> <h2>Source Code</h2> <h3>CSS</h3> <p>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).</p> <pre><!-- Bootstrap core CSS --> <link href="../libs/demo-assets/bootstrap/css/bootstrap.min.css" rel="stylesheet"> <span style="color:#419641;"><!-- SmartMenus jQuery Bootstrap Addon CSS --> <link href="../addons/bootstrap/jquery.smartmenus.bootstrap.css" rel="stylesheet"></span></pre> <h3>HTML</h3> <p>A sample multi-level dropdown navbar with left and right aligned navs.</p> <pre><!-- Static navbar --> <div class="navbar navbar-default" role="navigation"> <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"> <span style="color:#419641;"><!-- 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</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</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</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></span> <span style="color:#419641;"><!-- Right nav --> <ul class="nav navbar-nav navbar-right"> <li class="active"><a href="bootstrap-navbar.html">Default</a></li> <li><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</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</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></span> </div><!--/.nav-collapse --> </div></pre> <h3>JavaScript</h3> <p>In addition to Bootstrap's JavaScript just include SmartMenus jQuery and the SmartMenus jQuery Bootstrap Addon. The default options used in <code>jquery.smartmenus.bootstrap.js</code> should work well for all. However, you can, of course, tweak them if you like.</p> <pre><!-- Bootstrap core JavaScript ================================================== --> <!-- Placed at the end of the document so the pages load faster --> <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script> <script src="../libs/demo-assets/bootstrap/js/bootstrap.min.js"></script> <span style="color:#419641;"><!-- 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></span></pre> <hr /> <ul class="pagination"> <li><a href="index.html">« Back to main demo</a></li> </ul> </div> <!-- /container --> <!-- Bootstrap core JavaScript ================================================== --> <!-- Placed at the end of the document so the pages load faster --> <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script> <script src="../libs/demo-assets/bootstrap/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> </body> </html>
Cancel