Responsive fancy style sidebar menu | 2my4edge

05 June 2015

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.

responsive toggle sidebar menu
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 :

1 comment:

  1. very nice post.. : )

    How much you earn monthly from this blog via adsense ?
    please let me know this ...:)

    ReplyDelete

^