左の代わりに、マテリアライズサイドナヴを右に開くにはどうすればいいですか？

Question

私はMaterializeデザインフレームワークを使用していますが、右側からSideNavを開きたいとします。私はマテリアライズについてもっとは分かりません。今はSideNavが左側から開きますが、右側からSideNavを開きたいと思います。

$('.button-collapse').sideNav({ 
 
     menuWidth: 300, // Default is 240 
 
     closeOnClick: true // Closes side-nav on <a> clicks, useful for Angular/Meteor 
 
    } 
 
); 
 
    $('.collapsible').collapsible();

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css"> 
 
     <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>   
 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script>   
 
<nav> 
 
    <ul class="hide-on-med-and-down"> 
 
    <li><a href="#!">First Sidebar Link</a></li> 
 
    <li><a href="#!">Second Sidebar Link</a></li> 
 
    </ul> 
 
    <ul id="slide-out" class="side-nav fixed"> 
 
     <li class="bold"><a href="#!" class="waves-effect waves-teal">First Sidebar Link</a></li> 
 
     <li class="bold"><a href="#!" class="">Second Sidebar Link</a></li> 
 
     <li class="no-padding"> 
 
     <ul class="collapsible collapsible-accordion"> 
 
      <li> 
 
      <a class="collapsible-header waves-effect waves-teal">Dropdown<i class="mdi-navigation-arrow-drop-down"></i></a> 
 
      <div class="collapsible-body"> 
 
       <ul> 
 
       <li><a href="#!">First</a></li> 
 
       <li><a href="#!">Second</a></li> 
 
       <li><a href="#!">Third</a></li> 
 
       <li><a href="#!">Fourth</a></li> 
 
       </ul> 
 
      </div> 
 
      </li> 
 
     </ul> 
 
     </li> 
 
    </ul> 
 
    <a href="#" data-activates="slide-out" class="button-collapse"><i class="mdi-navigation-menu"></i></a> 
 
</nav>

Answer 1

ので、同じよう'.button-collapse'.sideNav(...)にedge: 'right'を使用してみてください：

$('.button-collapse').sideNav({ 
 
     menuWidth: 300, 
 
     closeOnClick: true, 
 
     edge: 'right', // <--- CHECK THIS OUT 
 
    } 
 
); 
 
    $('.collapsible').collapsible();

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css"> 
 
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>   
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script> 
 
    
 
<nav> 
 
    <ul class="right hide-on-med-and-down"> 
 
    <li><a href="#!">First Sidebar Link</a></li> 
 
    <li><a href="#!">Second Sidebar Link</a></li> 
 
    </ul> 
 
    <ul id="slide-out" class="side-nav fixed"> 
 
     <li class="bold"><a href="#!" class="waves-effect waves-teal">First Sidebar Link</a></li> 
 
     <li class="bold"><a href="#!" class="">Second Sidebar Link</a></li> 
 
     <li class="no-padding"> 
 
     <ul class="collapsible collapsible-accordion"> 
 
      <li> 
 
      <a class="collapsible-header waves-effect waves-teal">Dropdown<i class="mdi-navigation-arrow-drop-down"></i></a> 
 
      <div class="collapsible-body"> 
 
       <ul> 
 
       <li><a href="#!">First</a></li> 
 
       <li><a href="#!">Second</a></li> 
 
       <li><a href="#!">Third</a></li> 
 
       <li><a href="#!">Fourth</a></li> 
 
       </ul> 
 
      </div> 
 
      </li> 
 
     </ul> 
 
     </li> 
 
    </ul> 
 
    <a href="#" data-activates="slide-out" class="button-collapse"><i class="mdi-navigation-menu"></i></a> 
 
</nav>

Answer 2

あなたがマテリアライズと角度を使用している場合は、あなたが持っていることを確認してください。

$('.button-collapse').sideNav({ 
     menuWidth: 300, 
     closeOnClick: true, 
     edge: 'right', // <--- CHECK THIS OUT 
    } 
); 
    $('.collapsible').collapsible(); 

は、コントローラ内の関数から呼び出されます。鉱山は、次のようになります。

home.parallax = function() { 
    $('.parallax').parallax() 
} 

home.sideNav = function() { 
    $('.button-collapse').sideNav({ 
    menuWidth  : 300, 
    edge   : 'right', 
    closeOnClick : true, 
    draggable  : true 
    }); 
} 

私はこれを言わなければならないことが、今その愚かだと思うが、私はドキュメントはI私に言ったと思ったinit.jsファイルからエッジとmenuWidthのようなものを変更しようとする狂気自分自身を運転していましたsideNavが動作するために必要です。

私のように、右端にセットするだけで、何度も何度も何度も何度も何度も何度も何度も左に見えるようになるのに役立ちます。

Answer 3

右揃えに.right-alignedクラスを追加するだけです。

<ul id="slide-out" class="side-nav fixed"> 
     <li class="bold"><a href="#!" class="waves-effect waves-teal">First Sidebar Link</a></li> 
     <li class="bold"><a href="#!" class="">Second Sidebar Link</a></li> 
     <li class="no-padding"> 
     <ul class="collapsible collapsible-accordion"> 
      <li> 
      <a class="collapsible-header waves-effect waves-teal">Dropdown<i class="mdi-navigation-arrow-drop-down"></i></a> 
      <div class="collapsible-body"> 
       <ul> 
       <li><a href="#!">First</a></li> 
       <li><a href="#!">Second</a></li> 
       <li><a href="#!">Third</a></li> 
       <li><a href="#!">Fourth</a></li> 
       </ul> 
      </div> 
      </li> 
     </ul> 
     </li> 
    </ul>