Navigation 右侧的Material Design Lite（MDL）导航抽屉

我正在使用Google Material Design Lite（MDL）for web，无法将导航抽屉放在右侧。 文档中没有关于如何执行此操作的信息。这可能吗

默认的抽屉总是从左边来

<header class="custom-header mdl-layout__header mdl-layout__header--waterfall">
    <div class="mdl-layout__drawer-button">
        <i class="material-icons">menu</i>
    </div>
    <div class="mdl-layout__header-row">
        <span class="mdl-layout-title">My App</span>
    </div>
</header>
<div class="mdl-layout__drawer">
    drawer contents...
</div>

菜单
我的应用程序
抽屉内容。。。

这并不是一个正确的方法，但有一个解决方法

首先，我们必须覆盖抽屉按钮的位置，然后定位到整个抽屉，使其显示在右侧。然后我们必须修复抽屉动画

在

mdl-layout\u标题

后包括以下

style

标记

<header class="custom-header mdl-layout__header mdl-layout__header--waterfall">
    <div class="mdl-layout__header-row">
        <span class="mdl-layout-title">My App</span>
    </div>
</header>
<div class="mdl-layout__drawer">
    drawer contents...
</div>

<style>
    .mdl-layout__drawer-button, .mdl-layout__drawer{
        left: initial;
        right: 0;
    }

    .mdl-layout__drawer{    
        transform:translateX(250px);
    }
</style>

我的应用程序
抽屉内容。。。
.mdl-layout\u抽屉按钮、.mdl-layout\u抽屉{
左：首字母；
右：0；
}
.mdl-layout__抽屉{
转换：translateX（250px）；
}

以下是我详细阐述的解决方法。 希望对你有帮助。 期待您的想法和建议，以便进一步改进

.mdl-layout\u抽屉-右侧{
显示：-网络工具包盒；
显示：-webkit flex；
显示：-ms flexbox；
显示器：flex；
-网络工具包盒方向：垂直；
-webkit盒方向：正常；
-webkit柔性方向：列；
-ms-flex方向：列；
弯曲方向：立柱；
-webkit柔性包装：nowrap；
-ms-flex-wrap:nowrap；
柔性包装：nowrap；
宽度：240px；
身高：100%；
最大高度：100%；
位置：绝对位置；
排名：0；
右：0；
盒影：02px2px0RGBA（0,0,0,14），03px1px-2pxRGBA（0,0,0,2），01px5px0RGBA（0,0,0,12）；
框大小：边框框；
右边框：1px实心#e0；
背景：#fafafa；
-webkit转换：translateX（250px）；
-ms变换：translateX（250px）；
转换：translateX（250px）；
-webkit变换样式：保留-3d；
变换样式：保留-3d；
改变：转变；
-webkit转换持续时间：.2s；
过渡持续时间：.2s；
-webkit过渡计时功能：立方贝塞尔（.4,0,2,1）；
过渡计时功能：立方贝塞尔（.4,0,2,1）；
-webkit转换属性：-webkit转换；
过渡性质：变换；
颜色：#4242；
溢出：可见；
溢出y：自动；
z指数：5；
}
.主动{
-webkit转换：translateX（0）；
-ms变换：translateX（0）；
变换：translateX（0）；
}
.mdl-layout\uu模糊器-右侧{
背景色：透明；
位置：绝对位置；
排名：0；
左：0；
身高：100%；
宽度：100%；
z指数：4；
可见性：隐藏；
-webkit转换属性：背景色；
过渡特性：背景色；
-webkit转换持续时间：.2s；
过渡持续时间：.2s；
-webkit过渡计时功能：立方贝塞尔（.4,0,2,1）；
过渡计时功能：立方贝塞尔（.4,0,2,1）；
}
.mdl-layout\uuu drawer-right.active~.mdl-layout\uuuu模糊器-right{
背景色：rgba（0,0,0,5）；
能见度：可见；
}
.mdl-layout\uu drawer-right>.mdl布局标题{
线高：56px；
左侧填充：16px；
}
标题
通知
标题
通知
$（'#notif'）。单击（函数（）{
if（$（'.mdl-layout__-drawer-right'）.hasClass（'active'））{
$（'.mdl-layout__-drawer-right'）.removeClass（'active'）；
}
否则{
$（'.mdl-layout__-drawer-right'）.addClass（'active'）；
}
});
$（'.mdl-layout\uu obfuscator-right'）。单击（函数（）{
if（$（'.mdl-layout__-drawer-right'）.hasClass（'active'））{
$（'.mdl-layout__-drawer-right'）.removeClass（'active'）；
}
否则{
$（'.mdl-layout__-drawer-right'）.addClass（'active'）；
}
});

而不是

左：首字母使用
左：自动
<style>
.mdl-layout__drawer-right {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    width: 240px;
    height: 100%;
    max-height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);
    box-sizing: border-box;
    border-right: 1px solid #e0e0e0;
    background: #fafafa;
    -webkit-transform: translateX(250px);
    -ms-transform: translateX(250px);
    transform: translateX(250px);
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    will-change: transform;
    -webkit-transition-duration: .2s;
    transition-duration: .2s;
    -webkit-transition-timing-function: cubic-bezier(.4,0,.2,1);
    transition-timing-function: cubic-bezier(.4,0,.2,1);
    -webkit-transition-property: -webkit-transform;
    transition-property: transform;
    color: #424242;
    overflow: visible;
    overflow-y: auto;
    z-index: 5;
}

.active {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);  
}

.mdl-layout__obfuscator-right {
    background-color: transparent;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 4;
    visibility: hidden;
    -webkit-transition-property: background-color;
    transition-property: background-color;
    -webkit-transition-duration: .2s;
    transition-duration: .2s;
    -webkit-transition-timing-function: cubic-bezier(.4,0,.2,1);
    transition-timing-function: cubic-bezier(.4,0,.2,1);
}

.mdl-layout__drawer-right.active~.mdl-layout__obfuscator-right {
    background-color: rgba(0,0,0,.5);
    visibility: visible;
}

.mdl-layout__drawer-right>.mdl-layout-title {
    line-height: 56px;
    padding-left: 16px;
}

</style>

<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
  <header class="mdl-layout__header">
    <div class="mdl-layout__header-row">
      <!-- Title -->
      <span class="mdl-layout-title">Title</span>
      <!-- Add spacer, to align navigation to the right -->
      <div class="mdl-layout-spacer"></div>
      <!-- Navigation -->
        <div class="material-icons mdl-badge" id="notif" data-badge="5">notifications</div>
    </div>
  </header>
  <div class="mdl-layout__drawer">
    <span class="mdl-layout-title">Title</span>
    <nav class="mdl-navigation">
      <a class="mdl-navigation__link" href="">Link</a>
      <a class="mdl-navigation__link" href="">Link</a>
      <a class="mdl-navigation__link" href="">Link</a>
      <a class="mdl-navigation__link" href="">Link</a>
    </nav>
    </div>
  <div class="mdl-layout__drawer-right">
    <span class="mdl-layout-title">Notifications</span>
   </div>
  <main class="mdl-layout__content">
  </main>
  <div class="mdl-layout__obfuscator-right"></div>
</div>

<script>
$('#notif').click(function(){
 if($('.mdl-layout__drawer-right').hasClass('active')){       
    $('.mdl-layout__drawer-right').removeClass('active'); 
 }
 else{
    $('.mdl-layout__drawer-right').addClass('active'); 
 }
});

$('.mdl-layout__obfuscator-right').click(function(){
 if($('.mdl-layout__drawer-right').hasClass('active')){       
    $('.mdl-layout__drawer-right').removeClass('active'); 
 }
 else{
    $('.mdl-layout__drawer-right').addClass('active'); 
 }
});
</script>