How to create a responsive hamburger menu in AMP HTML

How to create a responsive hamburger menu in AMP HTML

amp menu submenu
amp ul li
amp css framework
amp radio button
amp-img not showing
powered by amp
amp compatibility
amp website builder

I'm trying to create an AMP HTML website (see 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 ?

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

Navigating your site, Most mobile websites include a site navigation menu. In this tutorial, we'll try out the following examples for . <header class="headerbar"> <a href="​homepage.html"> <amp-img And add these style rules to your inline CSS: Our sidebar will be hidden, but when the user taps the hamburger icon, the menu will appear  First, we will hide the hamburger menu icon by attaching display: none to #hamnav label and #hamburger – Since we do not need it on the big screen. Next, we set #hamitems to display: flex. Lastly, set the width of the menu items #hamitems a, and add some cosmetics.

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


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


#slide-in-menu {
  transform: translateX(-100%);
  transition: transform .2s ease-in-out;
  ... additional required styles ...
#slide-in-menu:target {
  transform: translateX(0);

How to create a responsive hamburger menu in AMP HTML, I'm trying to create an AMP HTML website (see But i can't find anywhere how you are supposed to create a responsive hamburger  How to create hamburger responsive menu with HTML, CSS, JavaScript. Learn Programming fundamentals w/ this free audio book F

This is not currently possible without major hacks.

Follow along in the feature request bug:

Accelerated mobile pages: build a mobile navigation in AMP HTML , AMP HTML: How to build Accelerated Mobile Pages with user friendly dropdown navigation menu, fully compliant with AMP HTML Specifications with CSS only, and then the CSS to show it when hovering over the visible hamburger nav  Today I’m going to show you how to create a responsive menu with HTML, CSS and jQuery. I’m going to go over how to style the menu, using media queries and how to make the hamburger button toggle the menu. Structuring The HTML. The element nav is the housing of the entire menu and the class of menu will be the starting point for all CSS

You can do this with the :focus pseudo class. Take a look at for a live example ( 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">
        <li><a href="/news/local/#navlink=ampnav">Local News</a></li>
        <li><a href="/sports/#navlink=ampnav">Sports</a></li>
<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;

How To Create a Mobile Navigation Menu, Step 1) Add HTML: Example. <!-- Load an icon library to show a hamburger menu (bars) on small screens --> Tip: To create a responsive navigation bar, that works on all devices, read our How To - Responsive Top Navigation tutorial. That’s all the HTML we’ll be writing for this responsive menu. Now, we’re going to move on to writing the CSS and media queries for the menu so that we can make it look pretty and responsive. Take a look at the code below: The CSS. The CSS is the fun part. This is where we turn the basic looking list into an interactive responsive menu

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">

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.

Responsive Dropdown Navigation Bar – Tania Rascia, For my own projects, I chose to make a customizable responsive dropdown navbar with an animated hamburger menu. The navigation is built from it at any point. We'll hide it by setting a click function to the entire html tag. Responsive Hamburger Mega Menu allows for the addition of responsiveness to your website’s menu. Mega menus are really useful when a site has a lot of contents to link in the navigation bar. This masterpiece was designed by Mahesh, it allows you to add images to your navbar also.

AMP Menu Components, Create AMP sites without coding. It's free! The zip contains 100+ AMP components plus AMP website builder to adjust the template w/o coding, re-​arrange or add  Include the main stylesheet flyout-menu.css in the head of the document. <link rel="stylesheet" href="flyout-menu.css"> Create a hamburger trigger to toggle the responsive nav. <input type="checkbox" class="menu-trigger"> Create a multi-level menu from nested html lists as these.

Add Navigation Menu In AMP, Add Navigation Menu In AMP. How to Create an HTML Dropdown Menu | Learn HTML and Duration: 1:04 Posted: Nov 15, 2016 Icon Bar Menu Icon Accordion Tabs Vertical Tabs Tab Headers Full Page Tabs Hover Tabs Top Navigation Responsive Topnav Navbar with Icons Search Menu Search Bar Fixed Sidebar Side Navigation Responsive Sidebar Fullscreen Navigation Off-Canvas Menu Hover Sidenav Buttons Sidebar with Icons Horizontal Scroll Menu Vertical Menu Bottom Navigation Responsive Bottom Nav Bottom Border Nav Links Right Aligned Menu Links Centered Menu Link Equal Width Menu Links Fixed Menu Slide Down Bar on Scroll Hide

How to activate links in a CSS-only hamburger menu? - html, Have this CSS-only hamburger menu set up in JSFiddle hamburger menu in AMP HTML: How to create a responsive hamburger menu in AMP HTML #John  Hamburger menu are often used in responsive web design to depict an expandable list of menu. It is possible to create this three line menu icon with only CSS, and we will see how in this post. Tap on Image for demo on CodePen