1<!doctype html> 2<!-- 3@license 4Copyright (c) 2015 The Polymer Project Authors. All rights reserved. 5This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt 6The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt 7The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt 8Code distributed by Google as part of the polymer project is also 9subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt 10--> 11<html> 12<head> 13 14 <meta charset="utf-8"> 15 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 16 <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes"> 17 18 <title>iron-menu-behavior demo</title> 19 20 <script src="../../webcomponentsjs/webcomponents-lite.js"></script> 21 <link rel="import" href="../../paper-styles/color.html"> 22 <link rel="import" href="../../paper-styles/demo-pages.html"> 23 <link rel="import" href="../../paper-styles/default-theme.html"> 24 <link rel="import" href="simple-menu.html"> 25 <link rel="import" href="simple-menubar.html"> 26 27 <style is="custom-style"> 28 simple-menu, 29 simple-menubar { 30 display: inline-block; 31 width: 100%; 32 } 33 34 simple-menu a { 35 display: block; 36 } 37 38 simple-menubar a, 39 simple-menu a { 40 padding: 15px 20px; 41 color: var(--primary-text-color); 42 text-decoration: none; 43 } 44 45 simple-menu a[disabled], 46 simple-menubar a[disabled] { 47 color: var(--google-grey-300); 48 } 49 50 .horizontal-section { 51 padding: 0; 52 margin-bottom: 20px; 53 } 54 55 .row { 56 height: 120px; 57 } 58 </style> 59</head> 60<body unresolved> 61 62 <div class="horizontal-section-container"> 63 <div> 64 <h3>Simple menu</h3> 65 <div class="horizontal-section"> 66 <simple-menu> 67 <a href="javascript:void(0)" role="menuitem">Item 0</a> 68 <a href="javascript:void(0)" role="menuitem">Item 1</a> 69 <a href="javascript:void(0)" role="menuitem" disabled>Item 2</a> 70 <a href="javascript:void(0)" role="menuitem">Item 3</a> 71 </simple-menu> 72 </div> 73 </div> 74 75 <div> 76 <h3>Multi-select menu</h3> 77 <div class="horizontal-section"> 78 <simple-menu multi> 79 <a href="javascript:void(0)" role="menuitem">Item 0</a> 80 <a href="javascript:void(0)" role="menuitem">Item 1</a> 81 <a href="javascript:void(0)" role="menuitem">Item 2</a> 82 <a href="javascript:void(0)" role="menuitem">Item 3</a> 83 </simple-menu> 84 </div> 85 </div> 86 87 <div> 88 <div class="row"> 89 <h3>Simple menubar</h3> 90 <div class="horizontal-section"> 91 <simple-menubar> 92 <a href="javascript:void(0)" role="menuitem">Item 0</a> 93 <a href="javascript:void(0)" role="menuitem">Item 1</a> 94 <a href="javascript:void(0)" role="menuitem" disabled>Item 2</a> 95 <a href="javascript:void(0)" role="menuitem">Item 3</a> 96 </simple-menubar> 97 </div> 98 </div> 99 <div class="row"> 100 <h3>Multi-select menubar</h3> 101 <div class="horizontal-section"> 102 <simple-menubar multi> 103 <a href="javascript:void(0)" role="menuitem">Item 0</a> 104 <a href="javascript:void(0)" role="menuitem">Item 1</a> 105 <a href="javascript:void(0)" role="menuitem">Item 2</a> 106 <a href="javascript:void(0)" role="menuitem">Item 3</a> 107 </simple-menubar> 108 </div> 109 </div> 110 </div> 111 112 </div> 113</body> 114</html> 115