Material Design Lite - Menus
home
Run
screen_rotation
fullscreen
cloud_download
navigate_before
<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> <!-- Right aligned menu on top of button --> <button style="position:absolute;right:0;bottom:0" id="demo-menu-top-right" class="mdl-button mdl-js-button mdl-button--icon"> <i class="material-icons">more_vert</i> </button> <ul class="mdl-menu mdl-menu--top-right mdl-js-menu mdl-js-ripple-effect" data-mdl-for="demo-menu-top-right"> <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> <li class="mdl-menu__item">Action 4</li> <li class="mdl-menu__item">Action 5</li> <li class="mdl-menu__item">Action 6</li> <li class="mdl-menu__item">Action 7</li> </ul> </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> <!-- Right aligned menu on top of button --> <button style="position:absolute;right:0;bottom:0" id="demo-menu-top-right" class="mdl-button mdl-js-button mdl-button--icon"> <i class="material-icons">more_vert</i> </button> <ul class="mdl-menu mdl-menu--top-right mdl-js-menu mdl-js-ripple-effect" data-mdl-for="demo-menu-top-right"> <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> <li class="mdl-menu__item">Action 4</li> <li class="mdl-menu__item">Action 5</li> <li class="mdl-menu__item">Action 6</li> <li class="mdl-menu__item">Action 7</li> </ul> </body> </html>
Copyrights@tutorialsplane.com