পৃষ্ঠাসমূহ

Search Your Article

CS

 

Welcome to GoogleDG – your one-stop destination for free learning resources, guides, and digital tools.

At GoogleDG, we believe that knowledge should be accessible to everyone. Our mission is to provide readers with valuable ebooks, tutorials, and tech-related content that makes learning easier, faster, and more enjoyable.

What We Offer:

  • 📘 Free & Helpful Ebooks – covering education, technology, self-development, and more.

  • 💻 Step-by-Step Tutorials – practical guides on digital tools, apps, and software.

  • 🌐 Tech Updates & Tips – simplified information to keep you informed in the fast-changing digital world.

  • 🎯 Learning Support – resources designed to support students, professionals, and lifelong learners.

    ✔ Latest world News 

     

Our Vision

To create a digital knowledge hub where anyone, from beginners to advanced learners, can find trustworthy resources and grow their skills.

Why Choose Us?

✔ Simple explanations of complex topics
✔ 100% free access to resources
✔ Regularly updated content
✔ A community that values knowledge sharing

We are continuously working to expand our content library and provide readers with the most useful and relevant digital learning materials.

📩 If you’d like to connect, share feedback, or suggest topics, feel free to reach us through the Contact page.

Pageviews

Monday, March 6, 2017

Material Design Lite - Menus

The MDL provides various CSS classes to apply various predefined visual and behavioral enhancements to the display various types of menu. The below table mentions the available classes and their effects.

S.N.Class Name & Description
1mdl-button
Identifies button as an MDL component and is required on button element.
2mdl-js-button
Sets basic MDL behavior to button and is required on button element.
3mdl-button--icon
Sets icon to button and is required on button element.
4material-icons
Identifies span as a material icon and is required on an inline element.
5mdl-menu
Identifies an unordered list container as an MDL component and is required on ul element.
6mdl-js-menu
Sets basic MDL behavior to menu and is required on ul element.
7mdl-menu__item
Identifies buttons as MDL menu options and sets basic MDL behavior, required on list item elements.
8mdl-js-ripple-effect
Sets ripple click effect to option links and is optional; required on unordered list element.
9mdl-menu--top-left
Set the menu position above button, aligns left edge of menu with button and is optional; required on unordered list element.
10(none)
By default, menu is positioned below button, aligns to the left edge with button.
11mdl-menu--top-right
menu is positioned above button, aligns to the right edge with button, optional and goes on unordered list element.
12mdl-menu--bottom-right
menu is positioned below button, aligns to the right edge with button, optional and goes on unordered list element.

Example

The following example showcases the use of mdl-spinner classes to show 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>
   <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>

Result

Verify the result.
Labels:

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)