想要在右上角顯示菜單圖標按鈕。在Material Design Lite中

Question

我想在右上角移動菜單圖標按鈕。但它出現在標題下。 我應該添加什麼樣的屬性或屬性？

<!-- Simple header with fixed tabs. --> 
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header 
      mdl-layout--fixed-tabs"> 
    <header class="mdl-layout__header"> 
    <div class="mdl-layout__header-row"> 
     <!-- Title --> 
     <span class="mdl-layout-title">Title</span> 
    </div> 
    <!-- Right aligned menu below button --> 

<button id="demo-menu-lower-right" 
     class="mdl-button mdl-js-button mdl-button--icon"> 
    <i class="material-icons">more_vert</i> 
</button> 

<ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect" 
    for="demo-menu-lower-right"> 
    <li class="mdl-menu__item">Some Action</li> 
    <li class="mdl-menu__item">Another Action</li> 
    <li disabled class="mdl-menu__item">Disabled Action</li> 
    <li class="mdl-menu__item">Yet Another Action</li> 
</ul> 
    <!-- Tabs --> 
    <div class="mdl-layout__tab-bar mdl-js-ripple-effect"> 
     <a href="#fixed-tab-1" class="mdl-layout__tab is-active">Tab 1</a> 
     <a href="#fixed-tab-2" class="mdl-layout__tab">Tab 2</a> 
     <a href="#fixed-tab-3" class="mdl-layout__tab">Tab 3</a> 
     <a href="#fixed-tab-4" class="mdl-layout__tab">Tab 4</a> 
    </div> 
    </header> 

here is a image url

Answer 1

要使菜單出現在右側，您需要在mdl-layout__header-row元素內添加以下div，然後在頭的右側添加所需的任何元素。有關更多詳細信息，請參閱Layout上的Material Design Lite。

<div class="mdl-layout mdl-js-layout"> 
    <header class="mdl-layout__header mdl-layout__header--transparent"> 
    <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 --> 
     <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> 

     <!-- Right Menu --> 
     <button id="demo-menu-lower-right" 
       class="mdl-button mdl-js-button mdl-button--icon"> 
     <i class="material-icons">more_vert</i> 
     </button> 

     <ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect" 
      for="demo-menu-lower-right"> 
     <li class="mdl-menu__item">Some Action</li> 
     <li class="mdl-menu__item">Another Action</li> 
     <li disabled class="mdl-menu__item">Disabled Action</li> 
     <li class="mdl-menu__item">Yet Another Action</li> 
     </ul><!--/Right Menu --> 
    </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> 
    <main class="mdl-layout__content"> 
    </main> 
</div> 

另外，如果你想改變菜單的位置，你可以將mdl-menu--bottom-right更改爲你喜歡的方向。請參閱頁面底部的MDL Menu規格。

Answer 2

<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header 
     mdl-layout--fixed-tabs"> 
     <header class="mdl-layout__header"> 
      <div class="mdl-layout__header-row"> 
       <div class="row" style="margin:0"> 
       <!-- Title --> 
        <span class="mdl-layout-title left">Title</span> 

       <!-- Right aligned menu below button --> 

       <button id="demo-menu-lower-right" class="mdl-button mdl-js-button mdl-button--icon right"> 
        <i class="material-icons">more_vert</i> 
       </button> 
       </div> 
      </div> 
      <ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect" for="demo-menu-lower-right"> 
       <li class="mdl-menu__item">Some Action</li> 
       <li class="mdl-menu__item">Another Action</li> 
       <li disabled class="mdl-menu__item">Disabled Action</li> 
       <li class="mdl-menu__item">Yet Another Action</li> 
      </ul> 
      <!-- Tabs --> 
      <div class="mdl-layout__tab-bar mdl-js-ripple-effect"> 
       <a href="#fixed-tab-1" class="mdl-layout__tab is-active">Tab 1</a> 
       <a href="#fixed-tab-2" class="mdl-layout__tab">Tab 2</a> 
       <a href="#fixed-tab-3" class="mdl-layout__tab">Tab 3</a> 
       <a href="#fixed-tab-4" class="mdl-layout__tab">Tab 4</a> 
       </div> 
      </header> 

我編輯了自己的定的代碼。希望這會有所幫助