Search code examples
htmlmenupolymer

Dropdown menu alwways opened


I'm learning Polymer and I encountered a little problem while doing the menu. Apparently, when I add the dropdown menu it displays opened always, it doesn't close and open at will. Also, I checked the code at the github repo from Polymer and its demos and can't find out what am I doing wrong.

          <paper-toolbar>
            <paper-menu-button>
      <paper-icon-button icon="menu" class="dropdown-trigger"></paper-icon-button>
      <paper-menu class="dropdown-content">
        <paper-item>Share</paper-item>
        <paper-item>Settings</paper-item>
        <paper-item>Help</paper-item>
      </paper-menu>
    <paper-menu-button>

</paper-menu-button>
      <div class="title">Title</div>
      <paper-icon-button icon="refresh"></paper-icon-button>
      </paper-toolbar>

Solution

  • You are having an extra <paper-menu-button> before </paper-menu-button> <div class="title">Title</div>

    This is how your code should looks

    <base href="http://polygit.org/polymer+:master/components/">
    <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
    <link href="polymer/polymer.html" rel="import">
    
    <link href="paper-input/paper-input.html" rel="import">
    <link href="paper-slider/paper-slider.html" rel="import">
    <link href="paper-toolbar/paper-toolbar.html" rel="import">
    <link href="paper-menu/paper-menu.html" rel="import">
    <link href="paper-menu-button/paper-menu-button.html" rel="import">
    <link href="paper-item/paper-item.html" rel="import">
    <link href="paper-icon-button/paper-icon-button.html" rel="import">
      <link rel="import" href="iron-icons/iron-icons.html">
    
    <dom-module id="my-app">
      <template>
    
        <paper-toolbar>
          <paper-menu-button>
            <paper-icon-button icon="menu" class="dropdown-trigger">+</paper-icon-button>
            <paper-menu class="dropdown-content">
              <paper-item>Share</paper-item>
              <paper-item>Settings</paper-item>
              <paper-item>Help</paper-item>
            </paper-menu>
          </paper-menu-button>
    
          <div class="title">Title</div>
          <paper-icon-button icon="refresh"></paper-icon-button>
        </paper-toolbar>
    
    
    
      </template>
      <script>
         addEventListener('WebComponentsReady', function() {
          Polymer({
          is: 'my-app',
    
          properties: {
    
          }
    
    
        }); 
    
        });
      </script>
    </dom-module>
    <my-app></my-app>

    I don't know if you have imported all the required imports, but here is a Plunkr , you can see it in action