Material Design Lite-メニュー

MDLは、事前定義されたさまざまな視覚的および動作強化を適用し、さまざまなタイプのメニューを表示するための一連のCSSクラスを提供します。次の表に、使用可能なクラスとその効果を示します

Sr.No.	Class Name & Description
1	mdl-button ボタンをMDLコンポーネントとして識別し、ボタン要素で必要です。
2	mdl-js-button 基本的なMDL動作をボタンに設定し、ボタン要素に必要です。
3	mdl-button—icon アイコンをボタンに設定し、ボタン要素に必要です。
4	material-icons スパンをマテリアルアイコンとして識別し、インライン要素で必要です。
5	mdl-menu 順序付けられていないリストコンテナーをMDLコンポーネントとして識別し、ul要素で必要です。
6	mdl-js-menu 基本的なMDL動作をメニューに設定し、ul要素で必要です。
7	mdl-menu__item ボタンをMDLメニューオプションとして識別し、リストアイテム要素に必要な基本的なMDL動作を設定します。
8	mdl-js-ripple-effect オプションリンクにリップルクリック効果を設定します（オプション）。順序なしリスト要素には必須です。
9	mdl-menu—top-left ボタンの上のメニュー位置を設定し、メニューの左端をボタンに揃えます。オプションです。順序なしリスト要素には必須です。
10	(none) デフォルトでは、メニューはボタンの下に配置され、ボタンで左端に揃えられます。
11	mdl-menu—top-right メニューはボタンの上に配置され、ボタンで右端に揃えられ、オプションで、順序付けられていないリスト要素に配置されます。
12	mdl-menu—bottom-right メニューはボタンの下に配置され、ボタンで右端に揃えられ、オプションで、順序付けられていないリスト要素に配置されます。

例

次の例は、 mdl-spinner クラスを使用してさまざまなタイプのスピナーを表示する方法を理解するのに役立ちます。

mdl_menu

<html>
   <head>
      <script
         src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
      </script>
      <link rel = "stylesheet"
         href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
      <link rel = "stylesheet"
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">

      <style>
         .container {
            position: relative;
            width: 200px;
         }

         .background {
            background: white;
            height: 148px;
            width: 100%;
         }

         .bar {
            box-sizing: border-box;
            background: #BBBBBB;
            color: white;
            width: 100%;
            height: 64px;
            padding: 16px;
         }

         .wrapper {
            box-sizing: border-box;
            position: absolute;
            right: 16px;
         }
      </style>
   </head>

   <body>
      <table>
         <tr><td>Lower Left Menu</td><td>Lower Right Menu</td><td>Top Left Menu</td>
            <td>Top Right Menu</td></tr>
         <tr>
            <td>
               <div class = "container mdl-shadow--2dp">
                  <div class = "bar">
                     <button id = "demo_menu-lower-left"
                        class = "mdl-button mdl-js-button mdl-button--icon"
                        data-upgraded = ",MaterialButton">
                        <i class = "material-icons">more_vert</i>
                     </button>
                     <ul class = "mdl-menu mdl-menu--bottom-left mdl-js-menu mdl-js-ripple-effect"
                        for = "demo_menu-lower-left">
                        <li class = "mdl-menu__item">Item #1</li>
                        <li class = "mdl-menu__item">Item #2</li>
                        <li disabled class = "mdl-menu__item">Disabled Item</li>
                     </ul>
                  </div>
                  <div class = "background"></div>
               </div>
            </td>

            <td>
               <div class = "container mdl-shadow--2dp">
                  <div class = "bar">
                     <div class = "wrapper">
                        <button id = "demo_menu-lower-right"
                           class = "mdl-button mdl-js-button mdl-button--icon"
                           data-upgraded = ",MaterialButton">
                           <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">Item #1</li>
                           <li class = "mdl-menu__item">Item #2</li>
                           <li disabled class = "mdl-menu__item">Disabled Item</li>
                        </ul>
                     </div>
                  </div>
                  <div class = "background"></div>
               </div>
            </td>

            <td>
               <div class = "container mdl-shadow--2dp">
                  <div class = "background"></div>
                  <div class = "bar">
                     <button id = "demo_menu-top-left"
                        class = "mdl-button mdl-js-button mdl-button--icon"
                        data-upgraded = ",MaterialButton">
                        <i class = "material-icons">more_vert</i>
                     </button>
                     <ul class = "mdl-menu mdl-menu--top-left mdl-js-menu mdl-js-ripple-effect"
                        for = "demo_menu-top-left">
                        <li class = "mdl-menu__item">Item #1</li>
                        <li class = "mdl-menu__item">Item #2</li>
                        <li disabled class = "mdl-menu__item">Disabled Item</li>
                     </ul>
                  </div>
               </div>
            </td>

            <td>
               <div class = "container mdl-shadow--2dp">
                  <div class = "background"></div>
                  <div class = "bar">
                     <div class = "wrapper">
                        <button id = "demo_menu-top-right"
                           class = "mdl-button mdl-js-button mdl-button--icon"
                           data-upgraded = ",MaterialButton">
                           <i class = "material-icons">more_vert</i>
                        </button>
                        <ul class = "mdl-menu mdl-menu--top-right mdl-js-menu mdl-js-ripple-effect"
                           for = "demo_menu-top-right">
                           <li class = "mdl-menu__item">Item #1</li>
                           <li class = "mdl-menu__item">Item #2</li>
                           <li disabled class = "mdl-menu__item">Disabled Item</li>
                        </ul>
                     </div>
                  </div>
               </div>
            </td>

         </tr>
      </table>
   </body>
</html>

結果

結果を確認します。

Materialdesignlite-menus

Material Design Lite-メニュー

例

mdl_menu

結果

目次