| <article> |
| <p>A menu button is a button that opens a menu. It is often styled as a typical push button with a |
| downward pointing arrow or triangle to hint that activating the button will display a menu. |
| The menu button has roles, attributes and behaviour as outlined in |
| <a href="https://www.w3.org/TR/wai-aria-practices/#menubutton" target="_blank">WAI-ARIA Authoring Practices</a>. |
| </p> |
| </article> |
| |
| <link rel="stylesheet" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css"> |
| |
| <style> |
| .size-22 { |
| font-size: 22px; |
| width: 22px; |
| text-align: center; |
| vertical-align: middle; |
| } |
| |
| .mdl-cell p { |
| margin-bottom: 0; |
| white-space: nowrap; |
| text-overflow: ellipsis; |
| overflow: hidden; |
| } |
| |
| |
| .mdl-textfield.mdlext-js-menu-button .mdl-textfield__input { |
| padding-right: 40px; |
| } |
| |
| .mdl-textfield__icon { |
| width: 32px; |
| text-align: left; |
| position: absolute; |
| right: 0; |
| top: 50%; |
| transform: translateY(-50%); |
| } |
| |
| .mdl-textfield.is-disabled .mdl-textfield__icon { |
| color: rgba(0, 0, 0, 0.26) !important; |
| } |
| |
| .mdl-textfield.is-invalid .mdl-textfield__icon { |
| color: #de3226 !important; |
| } |
| |
| #max-width-menu { |
| max-width: 400px; |
| } |
| |
| </style> |
| |
| <script> |
| function signedIn(sn) { |
| return 'Signed in with <i class="size-22 icon ion-social-' + sn + '"></i> '; |
| } |
| function signedInIcon(sn) { |
| return '<i class="size-22 icon ion-social-' + sn + '"></i>'; |
| } |
| </script> |
| |
| <div class="mdl-grid mdl-grid--no-spacing"> |
| <div class="mdl-cell mdl-cell--4-col"> |
| <p><code>mdl-button</code></p> |
| <button id="btn-social-1" style="width:100%; max-width:300px; height:46px" |
| class="mdl-button mdl-button--colored mdl-button--raised mdl-js-ripple-effect mdl-js-button mdlext-js-menu-button" |
| aria-controls="shared-social-menu" > |
| <i class="material-icons">person_outline</i> |
| <span class="mdlext-menu-button__caption">Sign in with ...</span> |
| <i class="material-icons mdlext-aria-expanded-more-less"></i> |
| </button> |
| <script> |
| document.querySelector('#btn-social-1').addEventListener('menuselect', function(event) { |
| this.querySelector('.mdlext-menu-button__caption').innerHTML = signedIn(event.detail.source.getAttribute('data-value')); |
| }); |
| </script> |
| </div> <!--cell --> |
| |
| <div class="mdl-cell mdl-cell--4-col"> |
| <p><code>mdl-textfield</code></p> |
| <div id="btn-social-2" |
| class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label mdlext-js-menu-button" |
| aria-controls="shared-social-menu"> |
| <input class="mdl-textfield__input" type="text" readonly> |
| <label class="mdl-textfield__label">Sign in with ...</label> |
| <i class="material-icons mdl-textfield__icon mdlext-aria-expanded-more-less"></i> |
| </div> |
| <script> |
| document.querySelector('#btn-social-2').addEventListener('menuselect', function(event) { |
| this.MaterialTextfield.change(event.detail.source.querySelector('span').innerHTML); |
| }); |
| </script> |
| </div> <!--cell --> |
| |
| <div class="mdl-cell mdl-cell--4-col mdlext-bordered-fields"> |
| <p><code>mdlext-bordered-fields</code></p> |
| <div id="btn-social-3" |
| class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label mdlext-bordered-fields__icon-right mdlext-js-menu-button" |
| aria-controls="shared-social-menu"> |
| <input class="mdl-textfield__input" type="text" readonly> |
| <label class="mdl-textfield__label">Sign in with ...</label> |
| <i class="material-icons mdlext-aria-expanded-more-less"></i> |
| </div> |
| <script> |
| document.querySelector('#btn-social-3').addEventListener('menuselect', function(event) { |
| this.MaterialTextfield.change(event.detail.source.querySelector('span').innerHTML); |
| }); |
| </script> |
| </div> <!--cell --> |
| |
| <div class="mdl-cell mdl-cell--4-col"> |
| <p>custom styled <code><div></code></p> |
| <div id="btn-social-4" |
| class="mdlext-menu-button mdlext-js-menu-button" style="width:300px; height:46px; max-width:100%; border:1px solid green" |
| aria-controls="shared-social-menu"> |
| <span class="mdlext-menu-button__caption">Sign in with ...</span> |
| <i class="material-icons mdlext-aria-expanded-more-less"></i> |
| </div> |
| <script> |
| document.querySelector('#btn-social-4').addEventListener('menuselect', function(event) { |
| this.querySelector('span').innerHTML = signedIn(event.detail.source.getAttribute('data-value')) + ', ' + |
| event.detail.source.querySelector('span').innerHTML; |
| }); |
| </script> |
| </div> <!--cell --> |
| |
| |
| <div class="mdl-cell mdl-cell--4-col"> |
| <p>mdl-button--icon</p> |
| |
| <button id="btn-social-5" style="height:46px; width:46px;" |
| class="mdl-button mdl-js-button mdl-button--icon mdlext-js-menu-button" |
| aria-controls="shared-social-menu"> |
| <i class="material-icons">more_vert</i> |
| </button> |
| <script> |
| document.querySelector('#btn-social-5').addEventListener('menuselect', function(event) { |
| this.innerHTML = signedInIcon(event.detail.source.getAttribute('data-value')); |
| }); |
| </script> |
| |
| </div> <!--cell --> |
| |
| </div> <!-- grid --> |
| |
| <ul id="shared-social-menu" class="mdlext-menu" hidden > |
| <li class="mdlext-menu__item" data-value="twitter"> |
| <span class="mdlext-menu__item__caption">Twitter</span> |
| <i class="icon ion-social-twitter-outline size-22"></i> |
| </li> |
| <li class="mdlext-menu__item" data-value="github"> |
| <span class="mdlext-menu__item__caption">GitHub</span> |
| <i class="ion-social-github-outline size-22"></i> |
| </li> |
| <li class="mdlext-menu__item" data-value="googleplus"> |
| <span class="mdlext-menu__item__caption">G+</span> |
| <i class="ion-social-googleplus-outline size-22"></i> |
| </li> |
| <li class="mdlext-menu__item" data-value="linkedin"> |
| <span class="mdlext-menu__item__caption">LinkedIn</span> |
| <i class="icon ion-social-linkedin-outline size-22"></i> |
| </li> |
| <li class="mdlext-menu__item" data-value="facebook"> |
| <span class="mdlext-menu__item__caption">Facebook</span> |
| <i class="icon ion-social-facebook-outline size-22"></i> |
| </li> |
| </ul> |
| |
| <p style="margin-top: 16px;">Menu buttons positioned left, middle and right, using <code>textalign</code>.</p> |
| <div role="presentation"> |
| <button class="mdl-button mdl-button--raised mdl-js-ripple-effect mdl-js-button mdlext-js-menu-button"> |
| <i class="material-icons">gesture</i> |
| <span class="mdlext-menu-button__caption">Select</span> |
| <i class="material-icons mdlext-aria-expanded-more-less"></i> |
| </button> |
| <ul id="max-width-menu" class="mdlext-menu" hidden > |
| <li class="mdlext-menu__item"> |
| <i class="material-icons md-18">info</i> |
| <span class="mdlext-menu__item__caption">Menu item #1</span> |
| </li> |
| <li class="mdlext-menu__item"> |
| <i class="material-icons md-18">help_outline</i> |
| <span class="mdlext-menu__item__caption">Menu item #2. A long text to check ellipsis overflow 0123456789</span> |
| <i class="material-icons md-18">radio</i> |
| </li> |
| <li class="mdlext-menu__item-separator"></li> |
| <li class="mdlext-menu__item" disabled> |
| <span class="mdlext-menu__item__caption">Menu item #3, disabled</span> |
| <i class="material-icons md-18">accessibility</i> |
| </li> |
| <li class="mdlext-menu__item-separator"></li> |
| <li class="mdlext-menu__item"> |
| <span class="mdlext-menu__item__caption">Menu item #IV</span> |
| <i class="material-icons md-18">build</i> |
| </li> |
| <li class="mdlext-menu__item"> |
| <span class="mdlext-menu__item__caption">Menu item #V</span> |
| <i class="material-icons md-18">build</i> |
| </li> |
| <li class="mdlext-menu__item-separator"></li> |
| <li class="mdlext-menu__item"> |
| <span class="mdlext-menu__item__caption">Menu item #VI</span> |
| <i class="material-icons md-18">build</i> |
| </li> |
| <li class="mdlext-menu__item"> |
| <span class="mdlext-menu__item__caption">Menu item #VII</span> |
| <i class="material-icons md-18">build</i> |
| </li> |
| <li class="mdlext-menu__item"> |
| Menu item #n |
| </li> |
| </ul> |
| </div> |
| |
| |
| <div role="presentation" style="text-align: center"> |
| <button class="mdl-button mdl-button--raised mdl-js-ripple-effect mdl-js-button mdlext-js-menu-button"> |
| <i class="material-icons">gesture</i> |
| <span class="mdlext-menu-button__caption">Select</span> |
| <i class="material-icons mdlext-aria-expanded-more-less"></i> |
| </button> |
| <ul class="mdlext-menu" hidden > |
| <li class="mdlext-menu__item"> |
| <i class="material-icons md-18">info</i> |
| <span class="mdlext-menu__item__caption">Menu item #1</span> |
| </li> |
| <li class="mdlext-menu__item"> |
| <i class="material-icons md-18">help_outline</i> |
| <span class="mdlext-menu__item__caption">Menu item #2</span> |
| <i class="material-icons md-18">radio</i> |
| </li> |
| <li class="mdlext-menu__item" disabled> |
| <span class="mdlext-menu__item__caption">Menu item #3, disabled</span> |
| <i class="material-icons md-18">accessibility</i> |
| </li> |
| <li class="mdlext-menu__item-separator"></li> |
| <li class="mdlext-menu__item"> |
| <span class="mdlext-menu__item__caption">Menu item #IV</span> |
| <i class="material-icons md-18">build</i> |
| </li> |
| <li class="mdlext-menu__item"> |
| <span class="mdlext-menu__item__caption">Menu item #V</span> |
| <i class="material-icons md-18">build</i> |
| </li> |
| <li class="mdlext-menu__item"> |
| <span class="mdlext-menu__item__caption">Menu item #VI</span> |
| <i class="material-icons md-18">build</i> |
| </li> |
| <li class="mdlext-menu__item"> |
| <span class="mdlext-menu__item__caption">Menu item #VII</span> |
| <i class="material-icons md-18">build</i> |
| </li> |
| <li class="mdlext-menu__item"> |
| <span class="mdlext-menu__item__caption">Menu item #VIII</span> |
| <i class="material-icons md-18">build</i> |
| </li> |
| <li class="mdlext-menu__item"> |
| <span class="mdlext-menu__item__caption">Menu item #IX</span> |
| <i class="material-icons md-18">build</i> |
| </li> |
| <li class="mdlext-menu__item"> |
| <span class="mdlext-menu__item__caption">Menu item #X</span> |
| <i class="material-icons md-18">build</i> |
| </li> |
| <li class="mdlext-menu__item"> |
| <span class="mdlext-menu__item__caption">Menu item #XI</span> |
| <i class="material-icons md-18">build</i> |
| </li> |
| <li class="mdlext-menu__item"> |
| <span class="mdlext-menu__item__caption">Menu item #XII</span> |
| <i class="material-icons md-18">build</i> |
| </li> |
| <li class="mdlext-menu__item"> |
| <span class="mdlext-menu__item__caption">Menu item #XIII</span> |
| <i class="material-icons md-18">build</i> |
| </li> |
| <li class="mdlext-menu__item"> |
| <span class="mdlext-menu__item__caption">Menu item #XIV</span> |
| <i class="material-icons md-18">build</i> |
| </li> |
| <li class="mdlext-menu__item"> |
| <span class="mdlext-menu__item__caption">Menu item #XV</span> |
| <i class="material-icons md-18">build</i> |
| </li> |
| <li class="mdlext-menu__item"> |
| <span class="mdlext-menu__item__caption">Menu item #XVI</span> |
| <i class="material-icons md-18">build</i> |
| </li> |
| <li class="mdlext-menu__item"> |
| <span class="mdlext-menu__item__caption">Menu item #XVII</span> |
| <i class="material-icons md-18">build</i> |
| </li> |
| <li class="mdlext-menu__item"> |
| <span class="mdlext-menu__item__caption">Menu item #XVIII</span> |
| <i class="material-icons md-18">build</i> |
| </li> |
| <li class="mdlext-menu__item"> |
| <span class="mdlext-menu__item__caption">Menu item #XIX</span> |
| <i class="material-icons md-18">build</i> |
| </li> |
| <li class="mdlext-menu__item"> |
| <span class="mdlext-menu__item__caption">Menu item #XX</span> |
| <i class="material-icons md-18">build</i> |
| </li> |
| <li class="mdlext-menu__item"> |
| Menu item #n |
| </li> |
| </ul> |
| </div> |
| |
| |
| <div role="presentation" style="text-align: right"> |
| <button class="mdl-button mdl-button--raised mdl-js-ripple-effect mdl-js-button mdlext-js-menu-button"> |
| <i class="material-icons">gesture</i> |
| <span class="mdlext-menu-button__caption">Select</span> |
| <i class="material-icons mdlext-aria-expanded-more-less"></i> |
| </button> |
| <ul class="mdlext-menu" hidden > |
| <li class="mdlext-menu__item"> |
| <i class="material-icons md-18">info</i> |
| <span class="mdlext-menu__item__caption">Menu item #1</span> |
| </li> |
| <li class="mdlext-menu__item"> |
| <i class="material-icons md-18">help_outline</i> |
| <span class="mdlext-menu__item__caption">Menu item #2</span> |
| <i class="material-icons md-18">radio</i> |
| </li> |
| <li class="mdlext-menu__item" disabled> |
| <span class="mdlext-menu__item__caption">Menu item #3, disabled</span> |
| <i class="material-icons md-18">accessibility</i> |
| </li> |
| <li class="mdlext-menu__item"> |
| <span class="mdlext-menu__item__caption">Menu item #IV</span> |
| <i class="material-icons md-18">build</i> |
| </li> |
| <li class="mdlext-menu__item-separator"></li> |
| <li class="mdlext-menu__item"> |
| <span class="mdlext-menu__item__caption">Menu item #V</span> |
| <i class="material-icons md-18">build</i> |
| </li> |
| <li class="mdlext-menu__item"> |
| <span class="mdlext-menu__item__caption">Menu item #VI</span> |
| <i class="material-icons md-18">build</i> |
| </li> |
| <li class="mdlext-menu__item"> |
| <span class="mdlext-menu__item__caption">Menu item #VII</span> |
| <i class="material-icons md-18">build</i> |
| </li> |
| <li class="mdlext-menu__item"> |
| Menu item #n |
| </li> |
| </ul> |
| </div> |
| |
| |
| <p style="margin-top: 16px">This menu button has WAIA roles and attributes coded in markup</p> |
| <button id="aria-demo-button" |
| class="mdl-button mdl-button--raised mdl-button--accent mdl-js-ripple-effect mdl-js-button mdlext-js-menu-button" |
| role="button" |
| aria-haspopup="true" |
| aria-controls="menu-example-dropdown" |
| aria-expanded="false" |
| tabindex="0"> |
| <span class="mdlext-menu-button__caption">Select a size</span> |
| <i class="mdlext-aria-expanded-plus-minus"></i> |
| </button> |
| <script> |
| document.querySelector('#aria-demo-button').addEventListener('menuselect', function(event) { |
| this.querySelector('span').innerHTML = 'Size: ' + event.detail.source.innerHTML; |
| }); |
| </script> |
| <ul id="menu-example-dropdown" |
| class="mdlext-menu" |
| role="menu" |
| hidden > |
| <li class="mdlext-menu__item" role="menuitem">X Small</li> |
| <li class="mdlext-menu__item-separator" role="separator"></li> |
| <li class="mdlext-menu__item" role="menuitem">Small</li> |
| <li class="mdlext-menu__item" role="menuitem">Medium</li> |
| <li class="mdlext-menu__item" role="menuitem">Large</li> |
| <li class="mdlext-menu__item-separator" role="separator"></li> |
| <li class="mdlext-menu__item" role="menuitem">X Large</li> |
| <li class="mdlext-menu__item" role="menuitem">XXX Large</li> |
| </ul> |
| |
| <p style="margin-top: 16px">A disabled menu button should do nothing</p> |
| <div role="presentation"> |
| <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdlext-js-menu-button" disabled> |
| <span class="mdlext-menu-button__caption">Disabled</span> |
| <i class="material-icons mdlext-aria-expanded-more-less"></i> |
| </button> |
| <ul class="mdlext-menu" hidden> |
| <li class="mdlext-menu__item">Menu item #1</li> |
| </ul> |
| </div> |
| |
| |
| <p style="margin-top: 16px">Menu buttons inside a table. Menus placed inside and after the table element to verify |
| that positioning works as expected.</p> |
| |
| <div style="position:relative; border:2px solid green; overflow: hidden;"> |
| <p>The box with green borders has <code>overflow:hidden</code></p> |
| <div> |
| |
| <table id="a-table-with-menu-buttons" |
| class="mdl-data-table mdl-js-data-table mdl-data-table--selectable mdl-shadow--2dp" style="width: 48%; float:left;"> |
| <thead> |
| <tr> |
| <th class="mdl-data-table__cell--non-numeric">Material</th> |
| <th>Quantity</th> |
| <th>Unit price</th> |
| </tr> |
| </thead> |
| <tbody> |
| <tr> |
| <td class="mdl-data-table__cell--non-numeric">Acrylic (Transparent)</td> |
| <td> |
| <span style="width:40px; display: inline-block;"></span> |
| <button class="mdl-button mdl-js-button mdl-button--icon mdl-button--primary mdlext-js-menu-button" |
| aria-controls="table-menu-example"> |
| <i class="mdlext-aria-expanded-more-less"></i> |
| </button> |
| </td> |
| <td>$2.90</td> |
| </tr> |
| <tr> |
| <td class="mdl-data-table__cell--non-numeric">Plywood (Birch)</td> |
| <td> |
| <span style="width:40px; display: inline-block;"></span> |
| <button class="mdl-button mdl-js-button mdl-button--icon mdl-button--primary mdlext-js-menu-button" |
| aria-controls="table-menu-example"> |
| <i class="mdlext-aria-expanded-more-less"></i> |
| </button> |
| </td> |
| <td>$1.25</td> |
| </tr> |
| <tr> |
| <td class="mdl-data-table__cell--non-numeric">Laminate (Gold on Blue)</td> |
| <td> |
| <span style="width:40px; display: inline-block;"></span> |
| <button class="mdl-button mdl-button--icon mdl-button--primary mdl-js-button mdlext-js-menu-button" |
| aria-controls="table-menu-example"> |
| <i class="mdlext-aria-expanded-more-less"></i> |
| </button> |
| </td> |
| <td>$2.35</td> |
| </tr> |
| </tbody> |
| </table> |
| |
| <script> |
| document.querySelector('#a-table-with-menu-buttons').addEventListener('menuselect', function(event) { |
| var span = event.target.closest('td').querySelector('span'); |
| span.innerHTML = event.detail.source.getAttribute('data-value'); |
| }); |
| </script> |
| |
| <div role="presentation" style="width:48%; float:right;"> |
| <p style="margin-top: 16px">This menu button has a menu with dark color theme, <code>mdlext-dark-color-theme</code> class</p> |
| |
| <button class="mdl-button mdl-button--raised mdl-js-ripple-effect mdl-js-button mdlext-js-menu-button"> |
| <i class="material-icons">gesture</i> |
| <span class="mdlext-menu-button__caption">Select</span> |
| <i class="material-icons mdlext-aria-expanded-more-less"></i> |
| </button> |
| <ul class="mdlext-menu mdlext-dark-color-theme" hidden > |
| <li class="mdlext-menu__item"> |
| <i class="material-icons md-18">info</i> |
| <span class="mdlext-menu__item__caption">Menu item #1</span> |
| </li> |
| <li class="mdlext-menu__item"> |
| <i class="material-icons md-18">help_outline</i> |
| <span class="mdlext-menu__item__caption">Menu item #2. A long text to check ellipsis overflow 0123456789</span> |
| <i class="material-icons md-18">radio</i> |
| </li> |
| <li class="mdlext-menu__item-separator"></li> |
| <li class="mdlext-menu__item" disabled> |
| <span class="mdlext-menu__item__caption">Menu item #3, disabled</span> |
| <i class="material-icons md-18">accessibility</i> |
| </li> |
| <li class="mdlext-menu__item-separator"></li> |
| <li class="mdlext-menu__item"> |
| <span class="mdlext-menu__item__caption">Menu item #IV</span> |
| <i class="material-icons md-18">build</i> |
| </li> |
| <li class="mdlext-menu__item"> |
| <span class="mdlext-menu__item__caption">Menu item #V</span> |
| <i class="material-icons md-18">build</i> |
| </li> |
| <li class="mdlext-menu__item-separator"></li> |
| <li class="mdlext-menu__item"> |
| <span class="mdlext-menu__item__caption">Menu item #VI</span> |
| <i class="material-icons md-18">build</i> |
| </li> |
| </ul> |
| </div> |
| |
| </div> |
| </div> |
| |
| <ul id="table-menu-example" class="mdlext-menu" hidden > |
| <li class="mdlext-menu__item" data-value="10">Ten</li> |
| <li class="mdlext-menu__item" data-value="25">Twentyfive</li> |
| <li class="mdlext-menu__item" data-value="50">Fifty</li> |
| </ul> |
| |
| |
| <style> |
| .demo-grid { |
| margin-top: 32px; |
| } |
| .demo-grid .mdl-cell { |
| background: rgb(63,81,181); |
| text-align: center; |
| color: white; |
| padding: 16px 8px; |
| border: 1px solid #aaaaaa; |
| } |
| .demo-grid .mdl-cell:nth-child(odd) { |
| background: rgb(33,150,243); |
| } |
| </style> |
| |
| |
| <div id="a-grid-with-menu-buttons" class="demo-grid"> |
| <p>Menu buttons inside <code>mdl-grid</code></p> |
| |
| <div id="menu-button-grid" class="mdl-grid mdl-grid--no-spacing"> |
| <div class="mdl-cell mdl-cell--4-col mdl-cell--4-col-tablet mdl-cell--2-col-phone"> |
| <button class="mdl-button mdl-button--raised mdl-button--accent mdl-js-ripple-effect mdl-js-button mdlext-js-menu-button"> |
| <span class="mdlext-menu-button__caption">Select a size</span> |
| <i class="mdlext-aria-expanded-plus-minus"></i> |
| </button> |
| <ul class="mdlext-menu" |
| role="menu" |
| hidden > |
| <li class="mdlext-menu__item" role="menuitem">Small</li> |
| <li class="mdlext-menu__item" role="menuitem">Medium</li> |
| <li class="mdlext-menu__item" role="menuitem">Large</li> |
| </ul> |
| </div> |
| <div class="mdl-cell mdl-cell--5-col mdl-cell--4-col-tablet mdl-cell--2-col-phone"> |
| <button class="mdl-button mdl-button--raised mdl-button--accent mdl-js-ripple-effect mdl-js-button mdlext-js-menu-button"> |
| <span class="mdlext-menu-button__caption">Select a size</span> |
| <i class="mdlext-aria-expanded-plus-minus"></i> |
| </button> |
| <ul class="mdlext-menu" |
| role="menu" |
| hidden > |
| <li class="mdlext-menu__item" role="menuitem">Small</li> |
| <li class="mdlext-menu__item" role="menuitem">Medium</li> |
| <li class="mdlext-menu__item" role="menuitem">Large</li> |
| </ul> |
| </div> |
| <div class="mdl-cell mdl-cell--3-col mdl-cell--4-col-tablet mdl-cell--hide-phone"> |
| <button class="mdl-button mdl-button--raised mdl-button--accent mdl-js-ripple-effect mdl-js-button mdlext-js-menu-button"> |
| <span class="mdlext-menu-button__caption">Select a size</span> |
| <i class="mdlext-aria-expanded-plus-minus"></i> |
| </button> |
| <ul class="mdlext-menu" |
| role="menu" |
| hidden > |
| <li class="mdlext-menu__item" role="menuitem">Small</li> |
| <li class="mdlext-menu__item" role="menuitem">Medium</li> |
| <li class="mdlext-menu__item" role="menuitem">Large</li> |
| </ul> |
| </div> |
| </div> |
| </div> |
| <script> |
| document.querySelector('#a-grid-with-menu-buttons').addEventListener('menuselect', function(event) { |
| event.target.querySelector('span').innerHTML = 'Size: ' + event.detail.source.innerHTML; |
| }); |
| </script> |
| |
| <div style="margin-bottom:256px;"></div> |
| |
| <!-- |
| https://www.w3.org/TR/wai-aria-practices/#menubutton |
| http://w3c.github.io/aria-practices/examples/menu-button/menu-button-1.html |
| http://w3c.github.io/aria-practices/examples/menu-button/menu-button-2.html |
| http://tympanus.net/codrops/2012/10/04/custom-drop-down-list-styling/ |
| http://www.slideshare.net/webaxe/html5-dev-con-2012-aria-widget |
| http://terrillthompson.com/blog/474 |
| https://github.com/davidtheclark/react-aria-menubutton |
| https://codepen.io/tiffanytse/pen/Dkvtr |
| https://codepen.io/andytran/pen/vLNGvN |
| https://codepen.io/dapacreative/pen/WQoLzb |
| https://codepen.io/gabrieltomescu/pen/ZGGyPK |
| https://codepen.io/Idered/pen/vowrB |
| https://codepen.io/Stedesign/pen/DbAJh |
| http://markbirbeck.com/2015/10/14/a-mixin-approach-to-material-design-lite-using-sass/ |
| --> |