创建 Polymer 菜单，如 Google IO 2015 网站答案

【问题标题】：Create Polymer menu like Google IO 2015 website创建 Polymer 菜单，如 Google IO 2015 网站
【发布时间】：2015-09-13 20:13:12
【问题描述】：

我是聚合物新手。我想建立像 Google IO 15 网站这样的菜单。

我尝试将 core-toolbar 添加到 core-scroll-header-panel。

<core-scroll-header-panel headermargin="128" condenses headerheight="192" id="core_scroll_header_panel">
  <core-toolbar id="core_toolbar" class="tall">
    <core-icon-button icon="arrow-back" id="core_icon_button"></core-icon-button>
    <div id="div" flex>
      <core-item id="core_item2" icon="home" label="Home" horizontal center layout></core-item>
      <core-item id="core_item" icon="account-box" label="Our Objectives" horizontal center layout></core-item>
    </div>
    <div id="div1" class="bottom indent">Title</div>
    <core-item id="core_item1" icon="settings" label="Business Activities" horizontal center layout></core-item>
  </core-toolbar>
  <section id="section" content></section>
</core-scroll-header-panel>

但这就像下面显示的图像

如何获得类似Google IO 2015 网站中的涟漪效果或悬停效果。

有没有其他方法可以实现。

【问题讨论】：

菜单是元素paper-tabs

标签： polymer googleio polymer-designer-tool

【解决方案1】：

只需将纸张标签添加到 core-scroll-header-panel 即可。

下面是代码sn-p

    <core-scroll-header-panel id="core_scroll_header_panel">
       <core-toolbar id="core_toolbar" class="tall">
         <div id="div" flex>
         <paper-tabs selected="1" selectedindex="1" horizontal center layout>
          <paper-tab id="paper_tab" flex horizontal layout>Home</paper-tab>
          <paper-tab id="paper_tab1" flex horizontal layout active>Phone</paper-tab>
        <paper-tab id="paper_tab2" flex horizontal layout>Activities</paper-tab>
      </paper-tabs>
    </div>
  </core-toolbar>
  <section id="section" content></section>
</core-scroll-header-panel>

我也有涟漪效应，因为它们是纸元素。

【讨论】：