githubmirror/amphtml

examples/sidebar-nested-menu.html
176 строк7 KB
Caroline Liu
Apply lang="en" to examples/ (#34759)
10 июн 2021, 17:30
10 июн 2021, 17:302ee75c4
<!doctype html>
<html ⚡ lang="en">
<head>
  <meta charset="utf-8">
  <title>AMP nested menu example</title>
  <link rel="canonical" href="self.html" />
  <meta name="viewport" content="width=device-width,minimum-scale=1">
  <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <script async custom-element="amp-sidebar" src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.js"></script>
  <script async custom-element="amp-list" src="https://cdn.ampproject.org/v0/amp-list-0.1.js"></script>
  <script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script>
  <style amp-custom>
    header {
      position: sticky;
      top: 0;
      background: #336;
    }
    .hamburger{
      font-size: 2em;
      cursor: pointer;
      width: 50px;
      height: 50px;
      color: white;
      border: none;
      background: none;
    }
    ul {
      margin: 0;
    }
    .scrollable {
      height: 100%;
      overflow: scroll;
    }
    #sidebar1 {
      width: 330px;
    }
    #sidebar1 li > h4,
    #sidebar1 li > a {
      margin: 5px;
      padding: 5px;
    }
    #sidebar1 li > a {
      font-size: 1em;
      display: block;
      color: black;
      font-weight: bold;
      text-decoration: none;
    }
    #sidebar1 li > a:hover {
      color: #008;
      text-decoration: underline;
    }
    #sidebar1 li > h3,
    #sidebar1 [amp-nested-submenu-close] {
      background: #336;
      color: white;
      margin: 0;
      padding: 10px;
    }
    #sidebar1 .right-arrow {
      float: right;
    }
    #sidebar1 .left-arrow {
      margin-right: 10px;
    }
  </style>
</head>
<body>
  <header>
    <button class="hamburger" on="tap:sidebar1.open">=</button>
  </header>
  <amp-sidebar id="sidebar1" layout="nodisplay" on="sidebarClose:menu1.reset">
    <amp-list layout="fill" src="/list/ecommerce-nested-menu" items="." single-item>
      <template type="amp-mustache">
        <amp-nested-menu id="menu1" layout="fill">
          <ul class="scrollable">
            <li>
              <h3 tabindex="-1">Categories</h3>
            </li>
            {{#menu}}
            <li>
              <h4 amp-nested-submenu-open>
                <span>{{title}}</span>
                <span class="right-arrow" aria-hidden="true">&gt;</span>
              </h4>
              <div amp-nested-submenu>
                <ul>
                  <li>
                    <h4 amp-nested-submenu-close>
                      <span class="left-arrow" aria-hidden="true">&lt;</span>
                      <span>back</span>
                    </h4>
                    <amp-img src="{{image}}" alt="{{title}}" layout="responsive" width="5" height="3"></amp-img>
                  </li>
                  {{#content}}
                  <li>
                    <h4 amp-nested-submenu-open>
                      <span>{{title}}</span>
                      <span class="right-arrow" aria-hidden="true">></span>
                    </h4>
                    <div amp-nested-submenu>
                      <ul>
                        <li>
                          <h4 amp-nested-submenu-close>
                            <span class="left-arrow" aria-hidden="true">&lt;</span>
                            <span>back</span>
                          </h4>
                        </li>
                        {{#content}}
                        <li>
                          <a href="https://www.google.com/search?q={{.}}" tabindex="0">{{.}}</a>
                        </li>
                        {{/content}}
                      </ul>
                    </div>
                  </li>
                  {{/content}}
                </ul>
              </div>
            </li>
            {{/menu}}
            <li>
              <a href="https://www.google.com/" tabindex="0">See More</a>
            </li>
            <li>
              <amp-img src="http://placeimg.com/300/200/tech" alt="tech image" layout="responsive" width="3" height="2"></amp-img>
              <h3 tabindex="-1">Information</h3>
            </li>
            <li>
              <a href="https://amp.dev/" tabindex="0">Visit AMP</a>
            </li>
          </ul>
        </amp-nested-menu>
      </template>
    </amp-list>
  </amp-sidebar>

  <article>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      Curabitur ullamcorper turpis vel commodo scelerisque. Phasellus
      luctus nunc ut elit cursus, et imperdiet diam vehicula.
      Duis et nisi sed urna blandit bibendum et sit amet erat.
      Suspendisse potenti. Curabitur consequat volutpat arcu nec
      elementum. Etiam a turpis ac libero varius condimentum.
      Maecenas sollicitudin felis aliquam tortor vulputate,
      ac posuere velit semper.
    </p>
    <p>
      Fusce pretium tempor justo, vitae consequat dolor maximus eget.
      Aliquam iaculis tincidunt quam sed maximus. Suspendisse faucibus
      ornare sodales. Nullam id dolor vitae arcu consequat ornare a
      et lectus. Sed tempus eget enim eget lobortis.
      Mauris sem est, accumsan sed tincidunt ut, sagittis vel arcu.
      Nullam in libero nisi.
    </p>
    <p>
      Sed pharetra semper fringilla. Nulla fringilla, neque eget
      varius suscipit, mi turpis congue odio, quis dignissim nisi
      nulla at erat. Duis non nibh vel erat vehicula hendrerit eget
      vel velit. Donec congue augue magna, nec eleifend dui porttitor
      sed. Cras orci quam, dignissim nec elementum ac, bibendum et purus.
      Ut elementum mi eget felis ultrices tempus. Maecenas nec sodales
      ex. Phasellus ultrices, purus non egestas ullamcorper, felis
      lorem ultrices nibh, in tristique mauris justo sed ante.
      Nunc commodo purus feugiat metus bibendum consequat. Duis
      finibus urna ut ligula auctor, sed vehicula ex aliquam.
      Sed sed augue auctor, porta turpis ultrices, cursus diam.
      In venenatis aliquet porta. Sed volutpat fermentum quam,
      ac molestie nulla porttitor ac. Donec porta risus ut enim
      pellentesque, id placerat elit ornare.
    </p>
  </article>
</body>
</html>