How to use RESPONSIVE MENUBAR #880
Description
I copied and pasted the code from AMP Start, but got the following:
Here is the code of the page:
<html ⚡>
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script custom-element="amp-sidebar" src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.js" async></script>
<script custom-element="amp-accordion" src="https://cdn.ampproject.org/v0/amp-accordion-0.1.js" async></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>
</head>
<body>
<header class="ampstart-headerbar fixed flex justify-start items-center top-0 left-0 right-0 pl2 pr4">
<div role="button" on="tap:header-sidebar.toggle" tabindex="0" class="ampstart-navbar-trigger md-hide lg-hide pr2">☰</div>
<amp-img src="../img/components/sidebar-example-logo.png" width="110" height="33" layout="fixed" class="my0 mx-auto" alt="Example logo image"></amp-img>
<nav class="ampstart-headerbar-nav ampstart-nav xs-hide sm-hide">
<ul class="list-reset center m0 p0 flex justify-center nowrap">
<li class="ampstart-nav-item ampstart-nav-dropdown relative">
<!-- Start Dropdown -->
<amp-accordion layout="container" disable-session-states="" class="ampstart-dropdown absolute top-0 left-0 right-0 bottom-0">
<section>
<header>Fashion</header>
<ul class="ampstart-dropdown-items list-reset m0 p0">
<li class="ampstart-dropdown-item">
<a href="#" class="text-decoration-none">Styling Tips</a>
</li>
<li class="ampstart-dropdown-item">
<a href="#" class="text-decoration-none">Designers</a>
</li>
</ul>
</section>
</amp-accordion>
<!-- End Dropdown -->
</li>
<li class="ampstart-nav-item ">
<a href="#" class="text-decoration-none block">Travel</a>
</li>
<li class="ampstart-nav-item ampstart-nav-dropdown relative">
<!-- Start Dropdown -->
<amp-accordion layout="container" disable-session-states="" class="ampstart-dropdown absolute top-0 left-0 right-0 bottom-0">
<section>
<header>Food</header>
<ul class="ampstart-dropdown-items list-reset m0 p0">
<li class="ampstart-dropdown-item"><a href="#" class="text-decoration-none">Recipes</a></li>
<li class="ampstart-dropdown-item"><a href="#" class="text-decoration-none">Hosting Tips</a></li>
</ul>
</section>
</amp-accordion>
<!-- End Dropdown -->
</li>
<li class="ampstart-nav-item ">
<a href="#" class="text-decoration-none block">Beauty</a>
</li>
<li class="ampstart-nav-item ">
<a href="#" class="text-decoration-none block">Shop</a>
</li>
</ul>
</nav>
</header>
</body>
</html>
Am I missing anything?