右侧的 Material Design Lite (MDL) 导航抽屉答案

【问题标题】：Material Design Lite (MDL) Navigation Drawer on the right side右侧的 Material Design Lite (MDL) 导航抽屉
【发布时间】：2015-08-21 03:23:29
【问题描述】：

我正在使用适用于 Web 的 Google Material Design Lite (MDL)，但无法将导航抽屉放在右侧。该文档没有有关如何执行此操作的信息。这可能吗？

默认抽屉总是从左边来的。

<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>

【问题讨论】：

标签： navigation material-design-lite drawer

【解决方案1】：

这是我详细阐述的解决方法。希望它有帮助。寻找您的想法和建议以进一步改进。

https://jsfiddle.net/VamosErik88/HTHnW/651/

<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>

【讨论】：

【解决方案2】：

确实没有合适的方法来做到这一点，但有一种解决方法。

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

在您的mdl-layout__header 之后添加以下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>

【讨论】：

而不是left: initial; 使用left: auto;