<!doctype html> <!– @license Copyright © 2015 The Polymer Project Authors. All rights reserved. This code may only be used under the BSD style license found at polymer.github.io/LICENSE.txt The complete set of authors may be found at polymer.github.io/AUTHORS.txt The complete set of contributors may be found at polymer.github.io/CONTRIBUTORS.txt Code distributed by Google as part of the polymer project is also subject to an additional IP rights grant found at polymer.github.io/PATENTS.txt –> <html> <head>

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">

<title>iron-menu-behavior demo</title>

<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="../../paper-styles/color.html">
<link rel="import" href="../../paper-styles/demo-pages.html">
<link rel="import" href="../../paper-styles/default-theme.html">
<link rel="import" href="simple-menu.html">
<link rel="import" href="simple-menubar.html">

<style is="custom-style">
  simple-menu,
  simple-menubar {
    display: inline-block;
    width: 100%;
  }

  simple-menu a {
    display: block;
  }

  simple-menubar a,
  simple-menu a {
    padding: 15px 20px;
    color: var(--primary-text-color);
    text-decoration: none;
  }

  simple-menu a[disabled],
  simple-menubar a[disabled] {
    color: var(--google-grey-300);
  }

  .horizontal-section {
    padding: 0;
    margin-bottom: 20px;
  }

  .row {
    height: 120px;
  }
</style>

</head> <body unresolved>

<div class="horizontal-section-container">
  <div>
    <h3>Simple menu</h3>
    <div class="horizontal-section">
      <simple-menu>
        <a href="javascript:void(0)" role="menuitem">Item 0</a>
        <a href="javascript:void(0)" role="menuitem">Item 1</a>
        <a href="javascript:void(0)" role="menuitem" disabled>Item 2</a>
        <a href="javascript:void(0)" role="menuitem" hidden>Ghost</a>
        <a href="javascript:void(0)" role="menuitem">Item 3</a>
        <a href="javascript:void(0)" role="menuitem" style="display:none">Another ghost</a>
      </simple-menu>
    </div>
  </div>

  <div>
    <h3>Multi-select menu</h3>
    <div class="horizontal-section">
      <simple-menu multi>
        <a href="javascript:void(0)" role="menuitem">Item 0</a>
        <a href="javascript:void(0)" role="menuitem" disabled>Item 1</a>
        <a href="javascript:void(0)" role="menuitem" hidden>Ghost</a>
        <a href="javascript:void(0)" role="menuitem">Item 2</a>
        <a href="javascript:void(0)" role="menuitem">Item 3</a>
        <a href="javascript:void(0)" role="menuitem" style="display:none">Another ghost</a>
      </simple-menu>
    </div>
  </div>

  <div>
    <div class="row">
      <h3>Simple menubar</h3>
      <div class="horizontal-section">
        <simple-menubar>
          <a href="javascript:void(0)" role="menuitem">Item 0</a>
          <a href="javascript:void(0)" role="menuitem">Item 1</a>
          <a href="javascript:void(0)" role="menuitem" disabled>Item 2</a>
          <a href="javascript:void(0)" role="menuitem">Item 3</a>
        </simple-menubar>
      </div>
    </div>
    <div class="row">
      <h3>Multi-select menubar</h3>
      <div class="horizontal-section">
        <simple-menubar multi>
          <a href="javascript:void(0)" role="menuitem">Item 0</a>
          <a href="javascript:void(0)" role="menuitem">Item 1</a>
          <a href="javascript:void(0)" role="menuitem">Item 2</a>
          <a href="javascript:void(0)" role="menuitem">Item 3</a>
        </simple-menubar>
      </div>
    </div>
  </div>

</div>

</body> </html>