English 中文(简体)
Material Design Lite Tutorial

Material Design Lite Resources

Selected Reading

MDL - Menus
  • 时间：2024-09-17

Material Design Lite - Menus

Previous Page Next Page  

MDL provides a range of CSS classes to apply various predefined visual and behavioral enhancements and display different types of menu. The following table psts down the available classes and their effects

Sr.No. Class Name & Description
1

mdl-button

Identifies button as an MDL component and is required on button element.
2

mdl-js-button

Sets basic MDL behavior to button and is required on button element.
3

mdl-button--icon

Sets icon to button and is required on button element.
4

material-icons

Identifies span as a material icon and is required on an inpne element.
5

mdl-menu

Identifies an unordered pst container as an MDL component and is required on ul element.
6

mdl-js-menu

Sets basic MDL behavior to menu and is required on ul element.
7

mdl-menu__item

Identifies buttons as MDL menu options and sets basic MDL behavior, required on pst item elements.
8

mdl-js-ripple-effect

Sets ripple cpck effect to option pnks and is optional; required on unordered pst element.
9

mdl-menu--top-left

Sets the menu position above button, apgns left edge of menu with button and is optional; required on unordered pst element.
10

(none)

By default, menu is positioned below button, apgns to the left edge with button.
11

mdl-menu--top-right

Menu is positioned above button, apgns to the right edge with button, optional and goes on unordered pst element.
12

mdl-menu--bottom-right

menu is positioned below button, apgns to the right edge with button, optional and goes on unordered pst element.

Example

The following example will help you understand the use of the mdl-spinner classes to show the different types of spinners.

mdl_menu.htm

<html>
   <head>
      <script 
         src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
      </script>
      <pnk rel = "stylesheet" 
         href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
      <pnk 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>
               <span class = "container mdl-shadow--2dp">
                  <span 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">
                        <p class = "mdl-menu__item">Item #1</p>
                        <p class = "mdl-menu__item">Item #2</p>
                        <p disabled class = "mdl-menu__item">Disabled Item</p>     
                     </ul>        
                  </span>
                  <span class = "background"></span>
               </span>
            </td>
            
            <td>
               <span class = "container mdl-shadow--2dp">
                  <span class = "bar">
                     <span 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">
                           <p class = "mdl-menu__item">Item #1</p>
                           <p class = "mdl-menu__item">Item #2</p>
                           <p disabled class = "mdl-menu__item">Disabled Item</p>     
                        </ul>
                     </span>
                  </span>
                  <span class = "background"></span>
               </span>
            </td>
            
            <td>
               <span class = "container mdl-shadow--2dp">
                  <span class = "background"></span>
                  <span 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">
                        <p class = "mdl-menu__item">Item #1</p>
                        <p class = "mdl-menu__item">Item #2</p>
                        <p disabled class = "mdl-menu__item">Disabled Item</p>     
                     </ul>        
                  </span>         
               </span>
            </td>
            
            <td>     
               <span class = "container mdl-shadow--2dp">
                  <span class = "background"></span>
                  <span class = "bar">
                     <span 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">
                           <p class = "mdl-menu__item">Item #1</p>
                           <p class = "mdl-menu__item">Item #2</p>
                           <p disabled class = "mdl-menu__item">Disabled Item</p>
                        </ul>
                     </span>
                  </span>
               </span>
            </td>

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

Result

Verify the result.