13

I'm trying to create an AMP HTML website (see https://www.ampproject.org) But i can't find anywhere how you are supposed to create a responsive hamburger menu ? Javascript is not allowed and there are no AMP Components available for it ?

2
  • 3
    Are you trying to build a multi-page website using AMP? It's not the use-case I think AMP is designed for. The examples I'm seeing/building are 'pages' rather than 'websites' - they are simplified views of individual articles from a non-AMP website.
    – MatCarey
    Dec 8, 2015 at 11:39
  • @MatCarey So how can we make amp pages redundant? Do we have to make individual pages for all product to make amp details page? Jul 25, 2017 at 6:28

5 Answers 5

11

AMP now has support for menu using the amp-sidebar component.

7

I have accomplished this with the use of a :target pseudoclass.

HTML

<nav id="slide-in-menu">
  ...nav menu content...
</nav>
<section class="content-section">
  <a href="#slide-in-menu">Hamburger Icon</a>
</section>

CSS

#slide-in-menu {
  transform: translateX(-100%);
  transition: transform .2s ease-in-out;
  ... additional required styles ...
}
#slide-in-menu:target {
  transform: translateX(0);
}
1
  • This is how I would have done it as well, especially since the :focus pseudo-class doesn't really work on some desktop browsers due to a sort of causality paradox that seems to occur (at least in Chrome). :target is much more effective and it works well for carousels too, as I've explored here.
    – AM Douglas
    May 1, 2016 at 2:29
1

This is not currently possible without major hacks.

Follow along in the feature request bug: https://github.com/ampproject/amphtml/issues/827

1

You can do this with the :focus pseudo class. Take a look at https://fresnobee.relaymedia.com/amp/news/local/education/article61889207.html for a live example (www.washingtonpost.com also does it this way). Or you could wait for the <amp-sidebar> tag to go live.

The code looks like

<a id="burger" tabindex="0">&#9776;</a>
<div id="burgerCancel" tabindex="0">&#9776;</div>
<div id="burgerMenu">
    <ul>
        <li><a href="/news/local/#navlink=ampnav">Local News</a></li>
        <li><a href="/sports/#navlink=ampnav">Sports</a></li>
    </ul>
</div>
<button id="burgerMask"></button>

and the css

#burger:focus ~ #burgerMenu {
  transform: translateY(0px); /* or whatever other way you want it to appear */
}

#burgerMask {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: #000;
z-index: 998;
border: 0;
opacity: 0;
transition: opacity 250ms cubic-bezier(0, .67,0,.67);
pointer-events: none; /*this is important */
}


#burger:focus ~ #burgerMask {
    pointer-events: auto;
    opacity: 0.7;
    display: block;
}
1
  • The live example is not working, when you click the menu item, the menu just closes and doesn't go to the url, the code in the example does the same thing. Did you ever get this code to work correctly? Sep 21, 2016 at 20:19
0

Ivey has already mentioned amp-sidebar, from which everything is probably straightforward for most webdesigners, but it's worth mentioning that the AMP project also has a tutorial about the actual "hamburger" part.

Beware that it uses a bagua symbol that does not exist in every font. Better use a picture :

<div role="button" on="tap:sidebar.toggle" tabindex="0" class="hamburger">
  <amp-img src="/images/logo_menu.svg" height="50" width="50">
</div>

In addition, before implementing it one may want to check that the hamburger menu is an appropriate solution for each particular case, since it has some downsides. There are a number of articles online about its pros and cons and when to avoid it.

Not the answer you're looking for? Browse other questions tagged or ask your own question.