web-dev-qa-db-fra.com

Comment créer un menu hamburger réactif au format AMP HTML

J'essaie de créer un site Web AMP HTML (voir https://www.ampproject.org ) Mais je ne trouve nulle part comment vous êtes censé créer un menu hamburger réactif? Javascript n'est pas autorisé et il n'y a pas de composants AMP disponibles pour cela?

amp-html
12
Erwin Beckers

AMP prend maintenant en charge le menu à l’aide du composant amp-sidebar .

11
Ivey

J'ai accompli cela en utilisant une pseudoclasse :target. 

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);
}
6
somecallmejosh

Ce n'est actuellement pas possible sans piratage majeur.

Suivez le bogue de demande de fonctionnalité: https://github.com/ampproject/amphtml/issues/827

1
Malte Ubl

Vous pouvez le faire avec la pseudo classe: focus. Jetez un coup d'œil à https://fresnobee.relaymedia.com/amp/news/local/education/article61889207.html pour un exemple en direct (www.washingtonpost.com le fait également de cette façon). Ou vous pouvez attendre que la balise <amp-sidebar> soit mise en ligne. 

Le code ressemble à 

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

et le 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
John Pettitt

Ivey a déjà mentionné amp-sidebar, à partir duquel tout est probablement simple pour la plupart des concepteurs de sites Web, mais il convient de mentionner que le projet AMP contient également possède un tutoriel à propos de la partie "hamburger".

Attention, il utilise un symbole bagua qui n'existe pas dans toutes les polices. Mieux vaut utiliser une image:

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

En outre, avant de le mettre en œuvre, il peut être utile de vérifier que le menu des hamburgers est une solution appropriée à chaque cas particulier, car il présente certains inconvénients. Il existe de nombreux articles en ligne sur ses avantages et inconvénients et sur le moment de l’éviter.

0
Skippy le Grand Gourou