Mega Navigator

Advanced Navigation build using Bootstrap 3.0+



What's included

Within Mega Navigator you'll find the following directories and files, logically grouping common resources and providing both compiled and minified variations.

Mega Navigator/
├──assets/
│  ├─plugin/
│  ├───css/
│  │   ├── animation/ 
│  │   ├── less/ 
│  │   ├── sass/ 
│  │   ├── theme/ 
│  │   ├── nav.css
│  │
│  ├───icons/
│  │   ├── font-awesome/ 
│  │   ├── simple-line-icons/
│  │
│  ├───js/
│  │   ├── jquery.js/ 
│
│     
│
└──index.html


Basic setup

Start with this basic HTML template. We hope that you can easily customize our examples, adapting them to suit your needs.

<!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">
    <title>Mega Navigator Advanced Navigation build using Bootstrap 3.0+</title>

    <!-- Bootstrap -->
    <link href="assets/theme/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link href="assets/plugin/icons/font-awesome/css/font-awesome.min.css" rel="stylesheet">
    <!-- Simple Line Icons -->
    <link href="assets/plugin/icons/simple-line-icons/simple-line-icons.css" rel="stylesheet">
    <!-- Mega Navigator-->
    <link rel="stylesheet" type="text/css" href="assets/plugin/css/nav.min.css">
    <link rel="stylesheet" type="text/css" href="assets/plugin/css/theme/navbar-inverse.css">
    <link rel="stylesheet" type="text/css" href="assets/plugin/css/animation/animation.css">
  </head>
  <body>
    <!-- begin NavBar-->
    <nav class="navbar navbar-inverse" role="navigation">
      <div class="container-fluid">
        <!-- for full width layout or use class="container" for boxed layout -->
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar">
            <span class="toggle-only">Toggle navigation</span>
            <span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
          </button>
          <a class="navbar-logo" href="#">Brand</a>
        </div>
        <div class="collapse navbar-collapse" id="navbar">
          <ul class="nav navbar-nav navbar-left">
            <!-- Left side navigation-->
            ...
          </ul>
          <ul class="nav navbar-nav navbar-right">
            <!-- Right side navigation-->
            ...
          </ul>
        </div>
      </div>
    </nav>
    <!-- end NavBar-->

    <h1>Hello, world!</h1>

    <!-- jQuery JavaScript-->
    <script src="assets/plugin/js/jquery.js"></script>
    <!-- Bootstrap JavaScript-->
    <script src="assets/theme/bootstrap/js/bootstrap.min.js"></script>
  </body>
</html>


Sources and Credits

I've used the following javascripts, framework, icons or other files as listed.

  • Bootstrap (v. 3.3.6) - http://getbootstrap.com is released under the MIT http://opensource.org/licenses/mit-license.html license and is copyright 2014 Twitter.
  • jQuery (v. 1.11.1) - http://jquery.com projects are released under the terms of the MIT license. http://opensource.org/licenses/mit-license.html
  • Font awesome icon (v. 4.2.0) - http://fontawesome.io/ licensed under SIL OFL 1.1 http://scripts.sil.org/OFL. Code licensed under MIT License http://opensource.org/licenses/mit-license.html
  • Simple Line Icons - http://graphicburger.com licensed under GraphicBurger License http://graphicburger.com/license/


License

Mega Navigator is released under Regular License (http://codecanyon.net/licenses/regular) and Extended License (http://codecanyon.net/licenses/extended)