A sidebar is a very common feature in web pages being very simple but bit lengthy to code in HTML CSS. In AMP HTML we use the amp-sidebar component to add a sidebar to a page.A sidebar provides access to meta contents It can be revealed by a button click.
Required Script: Importing the amp-sidebar component into the header.
HTML
< script async custom-element = "amp-sidebar"
</ script >
|
Attributes:
- side: Specifies which side of the page the sidebar should pop up from left or right. Its default value is left.
- layout: Specifies the layout of the sidebar, always set to nodisplay.
- toolbar: This attribute is used on child <nav toolbar=””> and accepts a media query to show in the sidebar.
- data-close-button-aria-label: Species if an aria-label for the buttons.
Example:
HTML
<!doctype html> < html ⚡>
< head >
< meta charset = "utf-8" >
< title >Google AMP amp-sidebar</ title >
< script async src =
</ script >
<!--Import the `amp-sidebar` component.-->
< script async custom-element = "amp-sidebar"
</ script >
< script async custom-element = "amp-fit-text"
</ script >
< link rel = "canonical" href =
< meta name = "viewport" content =
"width=device-width,minimum-scale=1,initial-scale=1" >
< 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 >
< style amp-custom>
.btn {
margin-top: 50px;
margin-left: 50px
}
</ style >
</ head >
< body >
< amp-sidebar id = "sidebar"
class = "sample-sidebar"
layout = "nodisplay" side = "right" >
< h3 >Sidebar</ h3 >
< button on = "tap:sidebar.close"
class = "btn" >Close sidebar
</ button >
< button on = "tap:sidebar.toggle"
class = "btn" >Toggle sidebar
</ button >
</ amp-sidebar >
< button on = "tap:sidebar.toggle"
class = "btn" >Toggle sidebar
</ button >
< button on = "tap:sidebar.open"
class = "btn" >Open sidebar
</ button >
</ body >
</ html >
|
Output:
Article Tags :