Material Design Lite - Menus
home
Run
screen_rotation
fullscreen
cloud_download
navigate_next
<html> <head> <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> <link rel="stylesheet" href="https://code.getmdl.io/1.1.1/material.indigo-pink.min.css"> <script defer src="https://code.getmdl.io/1.1.1/material.min.js"></script> </head> <body> <div style=" margin-top:100px;width:100%;text-align:center;border:1px solid #999;"> <!-- Left aligned menu --> <button id="dummy-menu-lower-left" class="mdl-button mdl-js-button mdl-button--icon"> <i class="material-icons">more_vert</i> </button> <ul class="mdl-menu mdl-menu--bottom-left mdl-js-menu mdl-js-ripple-effect" for="dummy-menu-lower-left"> <li class="mdl-menu__item">Action 1</li> <li disabled class="mdl-menu__item">Action 2 Disabled</li> <li class="mdl-menu__item">Action 3</li> </ul> </div> </body> </html>
<html> <head> <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> <link rel="stylesheet" href="https://code.getmdl.io/1.1.1/material.indigo-pink.min.css"> <script defer src="https://code.getmdl.io/1.1.1/material.min.js"></script> </head> <body> <div style=" margin-top:100px;width:100%;text-align:center;border:1px solid #999;"> <!-- Left aligned menu --> <button id="dummy-menu-lower-left" class="mdl-button mdl-js-button mdl-button--icon"> <i class="material-icons">more_vert</i> </button> <ul class="mdl-menu mdl-menu--bottom-left mdl-js-menu mdl-js-ripple-effect" for="dummy-menu-lower-left"> <li class="mdl-menu__item">Action 1</li> <li disabled class="mdl-menu__item">Action 2 Disabled</li> <li class="mdl-menu__item">Action 3</li> </ul> </div> </body> </html>
Copyrights@tutorialsplane.com