Responsive fancy style sidebar menu

Here i'm going to tell you that simple side bar navigation menu with dropdown feature in fancy style, now a days all the websites are coming with response design so here i'm going to tell that fancy style responsive navigation menu like hide show style. i hope you really like this tutorial. lets see the coding.

DOWNLOAD                        LIVE DEMO

BOOTSRAP & CSS FILE

    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/
            bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/
            bootstrap.min.js"></script>

HTML CODE

<div id="wrapper">
    <div class="overlay"></div>
    
        <nav class="navbar navbar-inverse navbar-fixed-top" id="sidebar-wrapper" 
                                                            role="navigation">
            <ul class="nav sidebar-nav">
                <li class="sidebar-brand">
                    <a href="http://2my4edge.com">
                       2my4edge.com
                    </a>
                </li>
                <li>
                    <a href="#">Sample Links</a>
                </li>
                <li class="dropdown">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                    Drop down links<span class="caret"></span></a>
                  <ul class="dropdown-menu" role="menu">
                    <li><a href="#">Sample link drop down</a></li>
                    <li><a href="#">Sample link drop down</a></li>
                    <li><a href="#">Sample link drop down</a></li>
                    <li><a href="#">Sample link drop down</a></li>
                  </ul>
                </li>
            </ul>
        </nav>

<!-- contents -->
        <div id="page-content-wrapper">
            <button type="button" class="hamburger is-closed" data-toggle="offcanvas">
                <span class="hamb-top"></span>
                <span class="hamb-middle"></span>
                <span class="hamb-bottom"></span>
            </button>
            <div class="container">
                <div class="row">
                    <div class="col-lg-12">
                        <iframe src="http://2my4edge.com" width="100%" height="980px" >
                                </iframe>                        
                    </div>
                </div>
            </div>
        </div>
<!-- content end -->

</div>

SCRIPT

<script type="text/javascript">
    $(document).ready(function () {
    var trigger = $('.hamburger'),
      overlay = $('.overlay'),
     isClosed = false;

    trigger.click(function () {
      hamburger_cross();      
    });

    function hamburger_cross() {

      if (isClosed == true) {          
        overlay.hide();
        trigger.removeClass('is-open');
        trigger.addClass('is-closed');
        isClosed = false;
      } else {   
        overlay.show();
        trigger.removeClass('is-closed');
        trigger.addClass('is-open');
        isClosed = true;
      }
  }
  
  $('[data-toggle="offcanvas"]').click(function () {
        $('#wrapper').toggleClass('toggled');
  });  
});
</script>

Toggle style side bar hide and show navigation menu bar using bootstrap, i hope you really like this post. Thank you.

RELATED POSTS :

Accordion toggle using Jquery with Bootstrap

Simple Tooltip using Bootstrap

Step by step tab style form validation Wizard using Bootstrap

Simple dropdown menu with Bootstrap

Responsive Full screen slider using Bootstrap

Simple updated dynamic datatable using Bootstrap (NEW)

Responsive navbar menu using bootstrap

Responsive back to top using Bootstrap

Simple textarea text counter using bootstrap