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" hidden>Ghost</a>
71          <a href="javascript:void(0)" role="menuitem">Item 3</a>
72          <a href="javascript:void(0)" role="menuitem" style="display:none">Another ghost</a>
73        </simple-menu>
74      </div>
75    </div>
76
77    <div>
78      <h3>Multi-select menu</h3>
79      <div class="horizontal-section">
80        <simple-menu multi>
81          <a href="javascript:void(0)" role="menuitem">Item 0</a>
82          <a href="javascript:void(0)" role="menuitem" disabled>Item 1</a>
83          <a href="javascript:void(0)" role="menuitem" hidden>Ghost</a>
84          <a href="javascript:void(0)" role="menuitem">Item 2</a>
85          <a href="javascript:void(0)" role="menuitem">Item 3</a>
86          <a href="javascript:void(0)" role="menuitem" style="display:none">Another ghost</a>
87        </simple-menu>
88      </div>
89    </div>
90
91    <div>
92      <div class="row">
93        <h3>Simple menubar</h3>
94        <div class="horizontal-section">
95          <simple-menubar>
96            <a href="javascript:void(0)" role="menuitem">Item 0</a>
97            <a href="javascript:void(0)" role="menuitem">Item 1</a>
98            <a href="javascript:void(0)" role="menuitem" disabled>Item 2</a>
99            <a href="javascript:void(0)" role="menuitem">Item 3</a>
100          </simple-menubar>
101        </div>
102      </div>
103      <div class="row">
104        <h3>Multi-select menubar</h3>
105        <div class="horizontal-section">
106          <simple-menubar multi>
107            <a href="javascript:void(0)" role="menuitem">Item 0</a>
108            <a href="javascript:void(0)" role="menuitem">Item 1</a>
109            <a href="javascript:void(0)" role="menuitem">Item 2</a>
110            <a href="javascript:void(0)" role="menuitem">Item 3</a>
111          </simple-menubar>
112        </div>
113      </div>
114    </div>
115
116  </div>
117</body>
118</html>
119