Navbar.js

Version 1.0.2

Responsive navigation bar. Working with hover on desktops and toch/click on mobile. Multiple levels of dropdows possible. Plain javascript and ecmascript 6 versions available.

Sass config and style files available for easy customizing.

See demo

Installation

npm install bk-navbar-js

Usage

create html structure

<nav id="navbar" class="navbar">

  <!-- Wrapper for positioning -->
  <div class="navbar__inner">

    <!-- Top/Left section -->
    <div class="navbar__section">
      <button class="navbar__button avbar__close_toggle" type="button" name="button"></button>
    </div><!-- Navbar section -->

    <div class="navbar__nav">

      <ul class="navbar__nav__list">

        <li>
          <a href="#">Services</a>

          <div class="navbar__nav__dropdown">

            <ul>

              <li class="back_button">
                <a href="#">Back</a>
              </li><!-- Back button for mobile -->

              <li>
                <a href="#">Design</a>
              </li>

              <li>
                <a href="#">Consulting</a>
              </li>

              <li>
                <a href="#">Catering</a>
              </li>

            </ul>

          </div><!-- Navbar dropdown -->
        </li><!-- Navbar nav list item -->

        <li>
          <a href="#">Work</a>

          <div class="navbar__nav__dropdown">

            <ul>

              <li class="back_button">
                <a href="#">Back</a>
              </li><!-- Back button for mobile -->

              <li>
                <a href="#">Project A</a>
              </li>

              <li>
                <a href="#">Project B</a>
              </li>

              <li>
                <a href="#">Project C</a>
              </li>

            </ul>

          </div><!-- Navbar dropdown -->
        </li><!-- Navbar nav list item -->

      </ul><!-- Navbar navigation list -->

    </div><!-- Navbar navigation -->

    <!-- Bottom/Right section -->
    <div class="navbar__section">
      <button class="navbar__button" type="button" name="button">Login</button>
    </div><!-- Navbar section -->

  </div>

</nav>

connect styles:

<link rel="stylesheet" href="node_modules/navbar/navbar.css">
<!-- OR -->
<link rel="stylesheet" href="node_modules/navbar/dist/navbar.min.css"/>

connect script:

<script src="node_modules/navbar/navbar.ec6.js"></script>
<!-- OR -->
<script src="node_modules/navbar/navbar.js"></script>
<!-- OR -->
<script src="node_modules/navbar/dist/navbar.min.js"></script>

init with javascript:

// Ecmascript 6
const nav = new Navbar('#navbar');
// Plain javascript
var nav = new Navbar('#navbar');

(optional) customize in sass

$navbar-height: 64px;

$navbar-font-size: 1rem;

$navbar-inner-z: 1100;
$navbar-z: 900;
$navbar-open-toggle-z: 1000;

$navbar-default-bg: #342E37;
$navbar-default-color: #DEDEDE;
$navbar-default-deco: #444444;

$inner-transition: all 600ms ease-in-out;
$inner-collapsed: translate3d( 100%, 0, 0 );
$inner-expanded: translate3d( 0, 0, 0 );

$dropdown-collapsed: translate3d( 100%, 0, 0 );
$dropdown-expanded: translate3d( 0, 0, 0 );

$dropdown-static-collapsed: translate3d( 0, 30px, 0 );
$dropdown-static-expanded: translate3d( 0, 0, 0 );

// transitions are needed for the dropdowns to work
$dropdown-transition: all 600ms ease-in-out;
$dropdown-static-transition: all 300ms ease-in-out;

Done!

License

MIT