AMP pages with custom javascript

javascript amp-html

10,564

It seems you'll have to replace the Javascript menu with a pure CSS one. This article explains how to do it:

http://www.da-agency.de/accelerated-mobile-pages-build-mobile-navigation-amp-html/

Complete example copy-pasted here for posterity:

<!doctype html>
<html amp lang="en">
  <head>
    <meta charset="utf-8">
    <title>AMPHTML mobile navigation demo</title>
    <link rel="canonical" href="http://www.da-agency.de/wp/wp-content/uploads/ampdemo/amphtml-mobile-navigation-demo.html" />
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <script type="application/ld+json">
      {
      "@context": "http://schema.org",
      "@type": "NewsArticle",
      "headline": "AMPHTML mobile navigation demo",
      "datePublished": "2016-03-09T10:00:00Z",
      "image": [
        "logo.jpg"
      ]
      }
    </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>
      div.test{
        width:100px;
        height:100px;
        background-color: red;
      }
      div.logo{
        float:left;
        display:block;
      }
      div.toggle{
        float:right;
        display:block;
      }
      div.nav{
        top: 0px;
        width: 100%;
        position: relative;
      }
      div.hamburger{
        text-align: right;
      }
      div.nav, 
      div.main-navigation, 
      div.main-navigation ul, 
      div.main-navigation li, 
      div.main-navigation a {
        text-decoration: none;
        list-style: none outside none;
        display: block;
        line-height: 22px;
        font-size: 15px;
        font-family: Arial,Helvetica;
        color: #777;
      }

      div.nav ul.sub-ul{
        display:none;
      }

      div.nav  ul.main-ul > li:hover > ul.sub-ul {
        display:block;
      }

      div.main-navigation {
        display:none;
      }

      div.nav:hover >  div.main-navigation {
        display:block;
      }
      body{
        background-color: #eee;
      }
      div.page{
        width: 100%;
        height: 100vw;
        max-width: 320px;
        background-color: #fff;
        margin-left: auto;
        margin-right: auto;
        padding: 10px 20px;
      }
    </style>
    <script async src="https://cdn.ampproject.org/v0.js"></script>
  </head>
  <body>
    <div class="page">
      <div class="header">
        <div class="logo">
          <amp-img src="logo.png" width="190px" height="51px" />
        </div>

        <div class="nav">
          <div class="hamburger">
            <a href="#" class="toggle-button"><!--SHOW MENU--><amp-img src="hamburger.png" width="45px" height="40px" /></a>
          </div>
          <div class="main-navigation">
            <ul class="main-ul">
              <li class="main-li">
                <a href="/some/link/url/">some link text</a>
                <ul class="sub-ul">
                  <li><a href="/some/link/url/1.1/">some link text 1.1</a></li>
                  <li><a href="/some/link/url/1.2/">some link text 1.2</a></li>
                  <li><a href="/some/link/url/1.3/">some link text 1.3</a></li>
                </ul>
              </li>
              <li class="main-li">
                <a href="/some/link/url/2/">some link text 2</a>
                <ul class="sub-ul">
                  <li><a href="/some/link/url/2.1/">some link text 2.1</a></li>
                  <li><a href="/some/link/url/2.2/">some link text 2.2</a></li>
                  <li><a href="/some/link/url/2.3/">some link text 2.3</a></li>
                </ul>
              </li>
              <li class="main-li">
                <a href="/some/link/url/3/">some link text 3</a>
                <ul class="sub-ul">
                  <li><a href="/some/link/url/3.1/">some link text 3.1</a></li>
                  <li><a href="/some/link/url/3.2/">some link text 3.2</a></li>
                  <li><a href="/some/link/url/3.3/">some link text 3.3</a></li>
                </ul>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="content">
        <h1>AMPHTML mobile navigation demo</h1>
        <p>See a fully functional dropdown mobile navigation in action, that comes with absolutly no JavaScript / jQuery and is fully built on CSS and 100% AMP HTML compliant and AMP validating</p>
      </div>
    </div>
   </body>
</html>

10,564

Apalabrados

I'm the webmaster of apalabrados.co.

Updated on June 04, 2022

Comments

Apalabrados almost 2 years
I'm facing to implementing AMP within a mobile page and have little issues invoking custom javascript loaded via amp-iframe.

The question is that I have I need to open/close a sidebar menu which just call a javascript function in an a tag:
```
<a href="#" onclick="w3_open()" class="my-menu">☰</a>
```
As AMP specification, onclick is not allowed, so my question is: How can I call a javascript function?

I only load a javascript file with very basic functions. No external calls and so on.
- Stephen Ostermiller over 5 years
  
  Possible duplicate of Running JavaScript in AMP