Slidebars jQuery Plug-In

What are Slidebars?

Slidebars provides a method of navigation that is mobile-friendly. It allows you to have navigation links slide in when a button is clicked ( such as the hamburger icon). Slidebars is a jQuery plug-in to easily accomplish this navigation.

Why I like Slidebars...

Slidebars is a free library and it took about 15 minutes to incorporate into my website!

Below is a working code example you can modify for your website (You need to download slidebars and include both the css and js in your code. jQuery is also required and needs to be included before the slidebars js!).

<body>
  <div canvas="container">
    <div class="row top-nav-row">
      <div class="col-xs-12 col-sm-6 ctr-align">
        <img class="img img-responsive ctr-align" src="assets/logo.png" />
      </div>
      <div class="col-xs-12 col-sm-6">
          <div class="ctr-align top-pad">
            <span class='hidden-xs hidden-sm'>
              <a class='link-nav'>OUR SOFTWARE</a>   <span class='link-add'>|</span>  
              <a class='link-nav'>OUR BLOG</a>    
            </span>
            <button class='btn btn-free-consult' data-target="#consult-modal" data-toggle="modal">FREE CONSULTATION</button>
            <button class="btn btn-default js-toggle-right-slidebar"><span class="glyphicon glyphicon-menu-hamburger"></span></button>
          </div>
    </div>
  </div>
  <div off-canvas="slidebar-2 right shift" class="right-nav">
    <button class='btn btn-close close-box js-close-right-slidebar'>X</button>
    <p>
      <img class="img img-responsive" src="assets/logo2.png" />
      <ul class='side-nav'>
        <li>FREE CONSULTATION</li>
        <li>Our Software</li>
        <li>Our Blog</li>
        <li>About Us</li>
        <li>Contact Us</li>
      </ul>
  </p>
  </div>
</body>

Visit Slidebars website to Download

Design My Mall

Search This Blog