githubmirror/amphtml

examples/responsive-menu.amp.html
226 строк8 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 responsive menu example</title>
  <link rel="canonical" href="amps.html">
  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <script async custom-element="amp-mega-menu" src="https://cdn.ampproject.org/v0/amp-mega-menu-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>
  <script async custom-element="amp-sidebar" src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.js"></script>
  <script async custom-element="amp-accordion" src="https://cdn.ampproject.org/v0/amp-accordion-0.1.js"></script>
  <script async custom-element="amp-lightbox" src="https://cdn.ampproject.org/v0/amp-lightbox-0.1.js"></script>
  <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>
  <style amp-custom>
    ul {
      list-style-type: none;
      padding: 0;
    }
    #header {
      position: sticky;
      z-index: 1000;
      top: 0;
    }
    #banner {
      background: #666;
      display: flex;
      flex-direction: row;
    }
    #banner h1 {
      flex-grow: 1;
      font-size: 1.5em;
      text-align: center;
      color: white;
    }
    .hamburger {
      padding: 10px 30px;
      font-size: 2em;
      background: none;
      border: 0;
      display: none;
      color: white;
    }
    .submenu {
      margin: 0 20px;
    }
    .submenu-heading {
      margin-bottom: 10px;
    }
    #megamenu nav > * {
      background: #ccc;
      padding-left: 20px;
    }
    .menu-heading {
      margin: 0;
      padding: 10px 15px;
      font-size: 1em;
      outline: none;
      text-decoration: none;
      font-weight: bold;
    }
    #megamenu .menu-heading:focus {
      background: #ddd;
    }
    #megamenu .menu-heading:hover {
      background: #eee;
    }
    #megamenu li[open] .menu-heading {
      background: #fff;
    }
    #megamenu .menu-content {
      left: 10px;
      right: 10px;
      width: auto;
    }
    #megamenu .menu-content amp-img {
      margin: 10px;
    }
    #megamenu .submenu {
      display: inline-block;
      vertical-align: top;
    }
    #sidebar {
      width: 350px;
    }
    #sidebar section[expanded] {
      background: white;
    }
    @media (max-width: 1024px) {
      #megamenu {
        display: none;
      }
      .hamburger {
        display: block;
      }
    }
  </style>
</head>
<body>
  <header id="header">
    <div id="banner">
      <h1>AMP Responsive Menu</h1>
      <button
          class="hamburger"
          tabindex="0"
          on='tap:sidebar.toggle'
          aria-label="Click to open sidebar">
        =
      </button>
    </div>

    <amp-mega-menu id="megamenu" layout="fixed-height" height="38">
      <amp-list layout="fixed-height" height="320" src="https://api.myjson.com/bins/11znw2" items="." single-item>
        <template type="amp-mustache">
          <nav>
            <ul>
              {{#menu}}<!--
           --><li>
                <h3 class="menu-heading" role="button">{{title}}</h3>
                <div class="menu-content" role="dialog">
                  <amp-img layout="fixed" width="300" height="250" src="{{image}}" alt="{{title}}"></amp-img>
                  {{#content}}
                  <div class="submenu">
                    <h4 class="submenu-heading" aria-hidden="true">{{title}}</h4>
                    <ul aria-label="{{title}}">
                      {{#content}}
                      <li><a href="https://www.google.com/search?q={{.}}">{{.}}</a></li>
                      {{/content}}
                    </ul>
                  </div>
                  {{/content}}
                </div>
              </li><!--
           -->{{/menu}}<!--
           --><li>
                <a class="menu-heading" href="https://amp.dev/">Visit AMP</a>
              </li>
            </ul>
          </nav>
        </template>
      </amp-list>
    </amp-mega-menu>
  </header>

  <amp-sidebar id="sidebar" layout="nodisplay">
    <amp-list layout="fill" src="https://api.myjson.com/bins/11znw2" items="." single-item>
      <template type="amp-mustache">
        <amp-accordion layout="container" expand-single-section>
          {{#menu}}
          <section>
            <h3 class="menu-heading">{{title}}</h3>
            <div>
              {{#content}}
              <div class="submenu">
                <h4 class="submenu-heading" aria-hidden="true">{{title}}</h4>
                <ul aria-label="{{title}}">
                  {{#content}}
                  <li><a href="https://www.google.com/search?q={{.}}">{{.}}</a></li>
                  {{/content}}
                </ul>
              </div>
              {{/content}}
            </div>
          </section>
          {{/menu}}
        </amp-accordion>
      </template>
    </amp-list>
  </amp-sidebar>

  <amp-img layout="responsive" width="1280" height="720"
    src="https://picsum.photos/1280/720" alt="placeholder image"></amp-img>

  <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>
  <p>
    Curabitur convallis, urna quis pulvinar feugiat, purus diam
    posuere turpis, sit amet tincidunt purus justo et mi. Donec
    sapien urna, aliquam ut lacinia quis, varius vitae ex.
    Maecenas efficitur iaculis lorem, at imperdiet orci viverra
    in. Nullam eu erat eu metus ultrices viverra a sit amet leo.
    Pellentesque est felis, pulvinar mollis sollicitudin et,
    suscipit eget massa. Nunc bibendum non nunc et consequat.
    Quisque auctor est vel leo faucibus, non faucibus magna ultricies.
    Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
    posuere cubilia Curae; Vestibulum tortor lacus, bibendum et
    enim eu, vehicula placerat erat. Nullam gravida rhoncus accumsan.
    Integer suscipit iaculis elit nec mollis. Vestibulum eget arcu
    nec lectus finibus rutrum vel sed orci.
  </p>

</body>
</html>