Bootstrap OffCanvas Menu

	$('#nav-expander').on('click',function(e){
    	e.preventDefault();
    	$('body').toggleClass('nav-expanded');
    });
    $('#nav-close').on('click',function(e){
    	e.preventDefault();
    	$('body').removeClass('nav-expanded');
    });
      	
      	
    // Initialize navgoco with default options
     $(".main-menu").navgoco({
         caret: '',
         accordion: false,
         openClass: 'open',
         save: true,
         cookie: {
             name: 'navgoco',
             expires: false,
             path: '/'
         },
         slide: {
             duration: 300,
             easing: 'swing'
         }
     });
        	
	<nav>
        <ul class="list-unstyled main-menu">
          
          <!--Include your navigation here-->
          <li class="text-right"><a href="#" id="nav-close">X</a></li>
          <li><a href="#">Menu One <span class="icon"></span></a></li>
          <li><a href="#">Menu Two <span class="icon"></span></a></li>
          <li><a href="#">Menu Three <span class="icon"></span></a></li>
          <li><a href="#">Dropdown</a>
            <ul class="list-unstyled">
                <li class="sub-nav"><a href="#">Sub Menu One <span class="icon"></span></a></li>
                <li class="sub-nav"><a href="#">Sub Menu Two <span class="icon"></span></a></li>
                <li class="sub-nav"><a href="#">Sub Menu Three <span class="icon"></span></a></li>
                <li class="sub-nav"><a href="#">Sub Menu Four <span class="icon"></span></a></li>
                <li class="sub-nav"><a href="#">Sub Menu Five <span class="icon"></span></a></li>
            </ul>
          </li>
          <li><a href="#">Menu Four <span class="icon"></span></a></li>
          <li><a href="#">Menu Five <span class="icon"></span></a></li>
        </ul>
      </nav>
      
     <div class="navbar navbar-inverse">      
        
        <!--Include your brand here-->
        <a class="navbar-brand" href="#">Off Canvas Menu</a>
        <div class="navbar-header pull-right">
          <a id="nav-expander" class="nav-expander fixed">
            MENU  <i class="fa fa-bars fa-lg white"></i>
          </a>
        </div>
    </div> 
    		
ページトップへ戻る