ampstart
ampstart copied to clipboard
ampproject
How to use RESPONSIVE MENUBAR
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?
I copied and pasted more code from AMP Start, but the result is the same. Here is the new source code:
<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>
<title>Hello, AMPs</title>
<link rel="canonical" href="https://amp.dev/documentation/guides-and-tutorials/start/create/basic_markup/">
<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": "Open-source framework for publishing content",
"datePublished": "2015-10-07T12:02:41Z",
"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>
<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>