Slide Menu ala AMP Sidebar
by dibalik seo
HTML
<div class='ampsidebar fontroboto p0' id='side-bar'>
<svg aria-label='Close Sidebar' class='amp-close-image' height='20' onclick="myFunction1()" role='button' tabindex='0' viewBox='0 0 24 24' width='20'>
<path d='M19,3H16.3H7.7H5A2,2 0 0,0 3,5V7.7V16.4V19A2,2 0 0,0 5,21H7.7H16.4H19A2,2 0 0,0 21,19V16.3V7.7V5A2,2 0 0,0 19,3M15.6,17L12,13.4L8.4,17L7,15.6L10.6,12L7,8.4L8.4,7L12,10.6L15.6,7L17,8.4L13.4,12L17,15.6L15.6,17Z' fill='#fff'></path>
</svg>
<div class='logo_sidebar fontweight500 displayblock'>
DIBALIK SEO
</div>
<nav>
<ul class='p0 liststyle0'>
<li class='liststyle0 m0 p0'><a class='fontweight500 displayblock' href='#' title='About'>About</a></li>
<li class='liststyle0 m0 p0'><a class='fontweight500 displayblock' href='#' rel='nofollow noopener' title='Contact'>Contact</a></li>
<li class='liststyle0 m0 p0'><a class='fontweight500 displayblock' href='#' title='Privacy'>Privacy</a></li>
<li class='liststyle0 m0 p0'><a class='fontweight500 displayblock' href='#' rel='nofollow noopener' target='_blank' title='Sitemap'>Sitemap</a></li>
<li class='liststyle0 m0 p0'><a class='fontweight500 displayblock' href='#' title='Iklan'>Iklan</a></li>
<li class='liststyle0 m0 p0'><a class='fontweight500 displayblock' href='#' title='Jasa Review'>Jasa Review</a></li>
</ul>
</nav>
<h3 class='follow_sidebar fontroboto fontweight500 displayblock'>follow us</h3>
<ul class='social-follow m0 displayblock'>
<li class='p0'>
<a aria-label='Link to Facebook' class='inline-block p1' href='https://www.facebook.com/#' rel='nofollow noopener' target='_blank'><svg height='30' viewbox='0 0 56 55' width='30' xmlns='http://www.w3.org/2000/svg'><title>Facebook</title><path class='ampstart-icon ampstart-icon-fb' d='M47.5 43c0 1.2-.9 2.1-2.1 2.1h-10V30h5.1l.8-5.9h-5.9v-3.7c0-1.7.5-2.9 3-2.9h3.1v-5.3c-.6 0-2.4-.2-4.6-.2-4.5 0-7.5 2.7-7.5 7.8v4.3h-5.1V30h5.1v15.1H10.7c-1.2 0-2.2-.9-2.2-2.1V8.3c0-1.2 1-2.2 2.2-2.2h34.7c1.2 0 2.1 1 2.1 2.2V43'></path></svg></a>
</li>
<li class='p0'>
<a...CSS
@font-face{font-family:Roboto;font-style:normal;font-weight:500;src:local('Roboto Medium'),local('Roboto-Medium'),url(https://fonts.gstatic.com/s/roboto/v16/RxZJdnzeo3R5zSexge8UUVtXRa8TVwTICgirnJhmVJw.woff2) format('woff2'),url(https://fonts.gstatic.com/s/roboto/v16/RxZJdnzeo3R5zSexge8UUT8E0i7KZn-EPnyo3HZu7kw.woff) format('woff'),url(https://fonts.gstatic.com/s/roboto/v16/RxZJdnzeo3R5zSexge8UUSZ2oysoEQEeKwjgmXLRnTc.ttf) format('truetype')}
.fontroboto{font-family:Roboto,sans-serif}
.fontweight500{font-weight:500;}
.btn-sidebaramp{background-image:url("data:image/svg+xml;charset=utf8,%3csvg viewBox='0 0 25 25' width='34' height='34' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3cg%3e%3cpath style='fill:%23333333' d='M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z'%3e%3c/path%3e%3c/g%3e%3c/svg%3e");background-repeat:no-repeat;background-size:34px 34px;background-position:center center;background-color:transparent;width:48px;height:70px;line-height:70px;border:none;position:absolute;top:0;right:10px;z-index:1001;cursor:pointer}
.ampsidebar{width:300px;background:#00626B}
svg.amp-close-image{position:absolute;top:15px;left:16px;cursor:pointer}
.ampsidebar nav ul{margin-top:30px}
.ampsidebar nav li:first-child{padding-top:0}
.ampsidebar nav li a{font-size:16px;padding:10px 20px;color:#efefef}
.ampsidebar nav li a:hover,.ampsidebar nav li a:visited{color:#fff}
.ampsidebar button{margin-left:20px}
.social-follow,.follow_sidebar,.logo_sidebar{text-align:center}
.logo_sidebar{height:auto;margin:40px auto 0;font-size:24px;color:#fff;letter-spacing:-1px;word-spacing:-5px;line-height:1}
.follow_sidebar{line-height:normal;letter-spacing:normal;text-transform:uppercase;color:#fff;font-size:.94rem;padding-top:1.5rem}
.social-follow{margin:.5rem 0...