引導3在菜單中滑動動畫方向

Question

當按下切換圖標（「漢堡包圖標」）時，如何更改導航菜單方向的默認滑塊？

我想達到類似於www.shopify.com在其網站的移動版本上使用的效果：http://d.pr/v/1iEUF（這裏是我試圖實現的簡短視頻演示）。

非常感謝您提前。

Answer 1

這裏是構建風格

JS

jQuery(function($){ 
    $('.navbar-toggle').click(function(){ 
    $('.navbar-collapse').toggleClass('right'); 
    $('.navbar-toggle').toggleClass('indexcity'); 
    }); 
}); 

我已經reupdated演示，你想我已經得到ü之前發佈的方式，效果的方式。

DEMO

Answer 2

這是你的小提琴 https://jsfiddle.net/sesn/t2h1ya1z/ 如果你花更多的時間，代碼可以進行優化，以線的最小數量。

<div class="navbar navbar-inverse navbar-fixed-top" role="navigation" id="slide-nav"> 
    <div class="container"> 
     <div class="navbar-header"> 
      <a class="navbar-toggle"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </a> 
      <a class="navbar-brand" href="#">Project name</a> 
     </div> 
     <div id="slidemenu"> 
      <a class="close">X</a> 
      <ul class="nav navbar-nav"> 
       <li class="active"> 
        <a href="#">Menu</a> 
       </li> 
       <li> 
        <a href="#">Menu</a> 
       </li> 
       <li> 
        <a href="#">Menu</a> 
       </li> 

      </ul> 

     </div> 
    </div> 
</div> 
<div id="page-content"> 
    <div class="container"> 
     <h1 class="no-margin-top">Left Sidebar menu</h1> 
     <p> 
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid sunt minus libero quas soluta blanditiis voluptatibus, eveniet sint tempora! Maxime! 
     </p> 
     <p> 
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad laudantium deleniti ratione ea voluptas, dolore expedita nisi? Veniam, doloremque, reiciendis. 
     </p> 
     <p> 
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci blanditiis nam esse molestiae voluptatem maiores fugiat nulla commodi magni impedit. 
     </p> 
     <p> 
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora ducimus iure ipsa ea officia aliquid quibusdam nostrum obcaecati itaque temporibus! 
     </p> 
     <p> 
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid sunt minus libero quas soluta blanditiis voluptatibus, eveniet sint tempora! Maxime! 
     </p> 
     <p> 
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad laudantium deleniti ratione ea voluptas, dolore expedita nisi? Veniam, doloremque, reiciendis. 
     </p> 
     <p> 
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci blanditiis nam esse molestiae voluptatem maiores fugiat nulla commodi magni impedit. 
     </p> 
     <p> 
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora ducimus iure ipsa ea officia aliquid quibusdam nostrum obcaecati itaque temporibus! 
     </p> 
     <p> 
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid sunt minus libero quas soluta blanditiis voluptatibus, eveniet sint tempora! Maxime! 
     </p> 
     <p> 
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad laudantium deleniti ratione ea voluptas, dolore expedita nisi? Veniam, doloremque, reiciendis. 
     </p> 
     <p> 
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci blanditiis nam esse molestiae voluptatem maiores fugiat nulla commodi magni impedit. 
     </p> 
     <p> 
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora ducimus iure ipsa ea officia aliquid quibusdam nostrum obcaecati itaque temporibus! 
     </p> 
     <p> 
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid sunt minus libero quas soluta blanditiis voluptatibus, eveniet sint tempora! Maxime! 
     </p> 
     <p> 
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad laudantium deleniti ratione ea voluptas, dolore expedita nisi? Veniam, doloremque, reiciendis. 
     </p> 
     <p> 
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci blanditiis nam esse molestiae voluptatem maiores fugiat nulla commodi magni impedit. 
     </p> 
     <p> 
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora ducimus iure ipsa ea officia aliquid quibusdam nostrum obcaecati itaque temporibus! 
     </p> 
    </div> 
</div> 

CSS

body.slide-active { 
    overflow-x: hidden 
} 
#page-content { 
    position: relative; 
    padding-top: 70px; 
    left: 0; 
} 
#page-content.slide-active { 
    padding-top: 0 
} 
#slide-nav .navbar-toggle { 
    cursor: pointer; 
    position: relative; 
    line-height: 0; 
    float: left; 
    margin: 0; 
    width: 30px; 
    height: 40px; 
    padding: 17px 0 0 0; 
    border: 0; 
    background: transparent; 
} 
#slide-nav .navbar-toggle.slide-active .icon-bar { 
    background: #CC0F0F; 
    color: #CC0F0F; 
} 
.navbar-header { 
    position: relative 
} 
.navbar.navbar-fixed-top.slide-active { 
    position: relative 
} 
@media (max-width: 767px) { 
    #slide-nav .container { 
     margin: 0 !important; 
     padding: 0 !important; 
     height: 100%; 
    } 
    #slide-nav .navbar-header { 
     margin: 0 auto; 
     padding: 0 15px; 
    } 
    #slide-nav .navbar.slide-active { 
     position: absolute; 
     width: 80%; 
     top: -1px; 
     z-index: 1000; 
    } 
    #slide-nav #slidemenu { 
     background: #f7f7f7; 
     left: -100%; 
     min-width: 0; 
     position: absolute; 
     padding-left: 0; 
     z-index: 2; 
     top: -8px; 
     margin: 0; 
    } 
    #slide-nav #slidemenu .navbar-nav { 
     min-width: 0; 
     width: 100%; 
     margin: 0; 
     margin-top: 40px; 
    } 
    #slide-nav #slidemenu .navbar-nav .dropdown-menu li a { 
     min-width: 0; 
     width: 80%; 
     white-space: normal; 
    } 
    #slide-nav { 
     border-top: 0 
    } 
    #slide-nav.navbar-inverse #slidemenu { 
     background: #333 
    } 
    #navbar-height-col { 
     position: fixed; 
     top: 0; 
     height: 100%; 
     bottom: 0; 
     background: #f7f7f7; 
    } 
    #navbar-height-col.inverse { 
     background: #333; 
     z-index: 1; 
     border: 0; 
    } 
    #slide-nav .navbar-form { 
     width: 100%; 
     margin: 8px 0; 
     text-align: center; 
     overflow: hidden; 
     /*fast clearfixer*/ 
    } 
    #slide-nav .navbar-form .form-control { 
     text-align: center 
    } 
    #slide-nav .navbar-form .btn { 
     width: 100% 
    } 
    #slidemenu .close { 
     color: white; 
     margin: 10px; 
    } 
} 
@media (min-width: 768px) { 
    #page-content { 
     left: 0 !important 
    } 
    .navbar.navbar-fixed-top.slide-active { 
     position: fixed 
    } 
    .navbar-header { 
     left: 0 !important 
    } 
} 

的js

$(document).ready(function() { 
    $('#slide-nav.navbar-inverse').after($('<div class="inverse" id="navbar-height-col"></div>')); 
    $('#slide-nav.navbar-default').after($('<div id="navbar-height-col"></div>')); 

    var slidewidth = '20%'; 
    var navbarneg = '-' + slidewidth; 

    if ($(window).width() < 767) { 
     $('#navbar-height-col').css("width", slidewidth); 
     $('#navbar-height-col').css("left", navbarneg); 
     $('#slide-nav #slidemenu').css("width", slidewidth); 
     $('#slide-nav #slidemenu').css("left", navbarneg); 
    } 
    $('#slidemenu .close').on('click', function() { 
     var selected = $('#slidemenu').hasClass('slide-active'); 
     $('#slidemenu, .navbar-toggle, .navbar-header').toggleClass('slide-active'); 
     $('#slidemenu').stop().animate({ 
      left : selected ? navbarneg : '0px' 
     }); 
     $('.inverse').stop().animate({ 
      left : selected ? navbarneg : '0px' 
     }); 

     //alert(1); 
    }); 

    $("#slide-nav").on("click", '.navbar-toggle', function(e) { 

     // slider is active 
     var selected = $(this).hasClass('slide-active'); 

     // set slidemenu width 
     $('#slidemenu').stop().animate({ 
      left : selected ? navbarneg : '0px' 
     }); 

     // set navbar width 
     $('#navbar-height-col').stop().animate({ 
      left : selected ? navbarneg : '0px' 
     }); 

     $(this).toggleClass('slide-active', !selected); 
     $('#slidemenu').toggleClass('slide-active'); 

     $('.navbar, .navbar-header').toggleClass('slide-active'); 
    }); 

    var selected = '#slidemenu .navbar, .navbar-header'; 

    $(window).on("resize", function() { 
     if ($(window).width() > 767 && $('.navbar-toggle').is(':hidden')) { 
      $(selected).removeClass('slide-active'); 
     } 
    }); 
});