Hy Folks, Today we will learn how to add an amp sidebar to your AMP Pages. It is an awesome feature of AMP without using javascript. You already know AMP is a Google product and very lightweight and better for the performance of the website that's why lots of companies using these features. because it can make an awesome User Interface and make a better user experience.
amp-sidebar components give us a way to display all the Section which is important in our site. You can show the section in your sidebar.
So let's Create the AMP Sidebar.
Note- Please do follow All the Steps.
Before creating the sidebar you need a menu icon or symbol which will indicate your sidebar.
In my case, I am using ☰ it for showing my sidebar you can choose whatever is you like.
Watch Video Click here
Step 1 -
Required Script
<script async custom-element="amp-sidebar" src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.js"></script>
The above script will add to the head section of your AMP HTML page.
Download Source Code - ЁЯСЗ
Step 2 -
After the body tag, you need to add an icon that will indicate to your sidebar. so I am adding the icon and add a class attribute with some CSS. so you can add CSS according to your requirements.
<body>
<header>
<div class='menu'>☰</div>
<div class="site-name">Hello Folks</div>
</header>
After adding the menu icon your header looks like this ЁЯСЗЁЯП╗
Step 3 -
<amp-sidebar id='side-bar' layout='nodisplay'>
<nav>
<ul>
<li><a href=#>Example 1</a></li>
<li><a href=#>Example 2</a></li>
<li><a href=#>Example 3</a></li>
<li><a href=#>Example 4</a></li>
</ul>
</nav>
</amp-sidebar>
* layout : which has value nodisplay that means the sidebar will hide bydefault.
Note : If you want to show your sidebar from the right you just have add one more attribute side='right'.
Step 4 -
These have some attribute which is must for the clicking on the menu icon.
- role='button'
- tabindex='0'
- on='tap:side-bar.open'
we have given some value to attributes, so let's have a look into this
role : value button ( mean this div will perform like a button)
tabindex : 0
on : tap:side-bar.open
a tap is an event in AMP. here we have used this because we want to click on the menu that's why we used it. after tap: you define the id of your amp-sidebar. you can see in step3 there we have added the id with the same name side-bar and open is amp inbuild function. so whenever if you want to do some action like open the div or close the div on tap. you can use open and close. you have to add after id with .open
after adding the above attributes your div looks like this ЁЯСЗЁЯП╗
<div role='button' tabindex='0' on='tap:side-bar.open' class='menu'>☰</div>
and when you click on the Menu icon amp-sidebar will open as you can see on the below image.
This video will help you -
Step 5 -
Final Step after opening the Sidebar we have to add a close button in the amp-sidebar to close the sidebar.
so it's just simple In step 3 we have already created the amp-sidebar so you have to add a div to close the sidebar below the <nav> tag.
<amp-sidebar id='side-bar' layout='nodisplay'>
<nav>
<div role='button' tabindex="0" on='tap:side-bar.close'>X</div>
<ul>
<li><a href=#>Example 1</a></li>
<li><a href=#>Example 2</a></li>
<li><a href=#>Example 3</a></li>
<li><a href=#>Example 4</a></li>
</ul>
</nav>
</amp-sidebar>
As you can see above we have added a div with some attributes which we have already used to open the sidebar. here we will use close to close the sidebar as you can see in the below image.
When you will click on the Cross button the sidebar will close.
Your final AMP HTML page should look like this.ЁЯСЗ
Copy the below Final HTML and Paste it into your Page.
<!DOCTYPE html>
<html amp>
<head>
<title>Hy i am AMP page</title>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<title>Hello, AMPs</title>
<link rel="canonical" href="http://localhost/Tutorials/AMP/amp_erro.html">
<meta name="viewport" content="width=device-width">
<script async custom-element="amp-sidebar" src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.js"></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>
<style amp-custom> body { width: auto; margin: 0; padding: 0; } header { background: Tomato; color: white; font-size: 2em; text-align: center; } h1 { margin: 0; padding: 0.5em; background: white; box-shadow: 0px 3px 5px grey; } p { padding: 0.5em; margin: 0.5em; } .carousel_dots{ text-align: center; } .current { background: #6e6e6e; } button { margin: 0 3px; border: solid 1px #ccc; height: 8px; border-radius: 100%; padding: 0 3px;}.headerbar { height: 50px; position: fixed; z-index: 999; top: 0; width: 100%; display: flex; align-items: center; }.site-name { margin: auto; }
.menu {
padding-right: 320px;
}
.sidebar {
padding: 10px;
margin: 0;
}
.sidebar > li {
list-style: none;
margin-bottom:10px;
}
.sidebar a {
text-decoration: none;
}
.close-sidebar {
font-size: 1.5em;
padding-left: 5px;
}
</style>
</head>
<body>
<header>
<div role='button' on='tap:side-bar.open' class='menu'>☰</div>
<div class="site-name">Hello Folks</div>
</header>
<amp-sidebar id="side-bar" layout="nodisplay">
<nav>
<div role="button" tabindex="0" on="tap:side-bar.close">X</div>
<ul>
<li><a href=#>Example 1</a></li>
<li><a href=#>Example 2</a></li>
<li><a href=#>Example 3</a></li>
<li><a href=#>Example 4</a></li>
</ul>
</nav>
</amp-sidebar>
<article>
<h1>You are Watching AMP Serires </h1>
<h1>Today we will learn how to Add SideBar in AMP Pages </h1>
</article>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis venenatis, metus a tristique aliquet, enim nibh efficitur sem, ut iaculis urna justo eu diam. Nullam cursus sapien et sodales posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse potenti. Donec vitae ornare risus. Maecenas eleifend ante vel dui laoreet, et porttitor libero rutrum. Nam arcu mi, ullamcorper at risus et, pulvinar ultrices erat. In pellentesque sem vel purus auctor, ut venenatis tellus tristique. Phasellus molestie diam orci, nec gravida turpis bibendum ut. Sed sagittis aliquet lorem sed dictum
</body>
</html>
FAQ -
Q. AMP course for beginners?
A. AMP course is available on youtube click here
Q. What is AMP and AMP introduction?
A. AMP is an open-source framework for reading more click here
Q. How to fix the AMP error?
A. You can find AMP error and resolve them using 3 methods click here
Q. How add an amp-carousel?
A. amp-carousel is a very attractive thing for any site for see more click here
Yeah! You have learned ЁЯШК
I hope you understood this and like this article. if you like it so, please give feedback in the comment section.
If you have any query, feel free to ask me ЁЯШК
If any mistakes I made here, so please let me know and improve me.
Recommended Post
- String Function in PHP
- How to Submit Registration and Login Form in PHP?
- How to Get All Google play store apps List using PHP Scraper?
- How to pass a variable from the command line using PHP?
- How to Submit Registration and Login Form in PHP?
- Introduction PHP ?
- How to pass variable from command line using PHP?
- How to get meta tags in 2 easy way in PHP
- How to Reset DropDownList Selection Using jQuery
Post a Comment
Please do not enter any spam link in the comment section.