amp-sidebar
Bilah sisi menyediakan cara untuk menampilkan konten target untuk akses sementara (menu navigasi, tombol, menu, dll.). Bilah sisi dapat diungkapkan oleh tombol sementara konten utama tetap secara visual di bawah ini.
1 Kode pembuka
<!doctype html>
<html ⚡>
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
2 Disposisi
Masukkan yang berikut ini scripts tepat setelah pembukaan <head>
<script async custom-element="amp-sidebar" src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.js"></script>
<script async custom-element="amp-fit-text" src="https://cdn.ampproject.org/v0/amp-fit-text-0.1.js"></script>
3 Masukkan gaya berikut tepat sebelum </head>
<style amp-custom>
amp-sidebar {
width: 250px;
padding-right: 10px;
}
.amp-sidebar-image {
line-height: 100px;
vertical-align:middle;
}
.amp-close-image {
top: 15px;
left: 225px;
cursor: pointer;
}
li {
margin-bottom: 20px;
list-style: none;
}
button {
margin-left: 20px;
}
</style>
4 Penggunaan dasar
Hanya ada satu sidebar amp dalam dokumen AMP. Bilah samping amp harus menjadi elemen sekunder langsung dari <body>. Harus memiliki desain nodisplay.
Amp-sidebar mungkin tidak mengandung elemen AMP kecuali untuk amp-accordion, amp-img Dan amp-fit-text
amp-fit-text memperluas atau menyusutkan ukuran font-nya agar sesuai dengan konten dalam ruang yang ditentukan dalam menu.
Codenya
<amp-sidebar id='sidebar'
layout="nodisplay"
side="right">
<amp-img class='amp-close-image'
src="/img/ic_close_black_18dp_2x.png"
width="20"
height="20"
alt="close sidebar"
on="tap:sidebar.close"
role="button"
tabindex="0"></amp-img>
<ul>
<li>
<a href="/">Home</a>
</li>
<li> Nav item 1</li>
<li>
<amp-fit-text width="220"
height="20"
layout="responsive"
max-font-size="24">
Nav item 2 - <amp-fit-text>
</amp-fit-text>
</li>
<li>
<amp-fit-text width="220"
height="20"
layout="responsive"
max-font-size="24">
Nav item 3 - <amp-fit-text> longer text
</amp-fit-text>
</li>
<li> Nav item 4 - Image
<amp-img class='amp-sidebar-image'
src="/img/favicon.png"
width="20"
height="20"
alt="an image"></amp-img>
</li>
<li> Nav item 5</li>
<li> Nav item 6</li>
</ul>
</amp-sidebar>
5 Tindakan sidebar
Klik untuk mengaktifkan bilah samping.
Codenya
<button on='tap:sidebar.toggle'>Toggle sidebar</button>
Haga clic para abrir la barra latKlik untuk membuka bilah sisieral.
Codenya
<button on='tap:sidebar.open'>Open sidebar</button>
Klik untuk menutup bilah samping.
Codenya
<button on='tap:sidebar.close'>Close sidebar</button>
Full struktur kode lengkap
<!doctype html>
<html ⚡>
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-sidebar" src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.js"></script>
<script async custom-element="amp-fit-text" src="https://cdn.ampproject.org/v0/amp-fit-text-0.1.js"></script>
<link rel="canonical" href="http://amphtmlejemplos.blogspot.com/2016/12/como-insertar-una-barra-lateral-en-amp-html.html">
<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>
amp-sidebar {
width: 250px;
padding-right: 10px;
}
.amp-sidebar-image {
line-height: 100px;
vertical-align:middle;
}
.amp-close-image {
top: 15px;
left: 225px;
cursor: pointer;
}
li {
margin-bottom: 20px;
list-style: none;
}
button {
margin-left: 20px;
}
</style>
</head>
<body>
<amp-sidebar id='sidebar'
layout="nodisplay"
side="right">
<amp-img class='amp-close-image'
src="/img/ic_close_black_18dp_2x.png"
width="20"
height="20"
alt="close sidebar"
on="tap:sidebar.close"
role="button"
tabindex="0"></amp-img>
<ul>
<li>
<a href="/">Home</a>
</li>
<li> Nav item 1</li>
<li>
<amp-fit-text width="220"
height="20"
layout="responsive"
max-font-size="24">
Nav item 2 - <amp-fit-text>
</amp-fit-text>
</li>
<li>
<amp-fit-text width="220"
height="20"
layout="responsive"
max-font-size="24">
Nav item 3 - <amp-fit-text> longer text
</amp-fit-text>
</li>
<li> Nav item 4 - Image
<amp-img class='amp-sidebar-image'
src="/img/favicon.png"
width="20"
height="20"
alt="an image"></amp-img>
</li>
<li> Nav item 5</li>
<li> Nav item 6</li>
</ul>
</amp-sidebar>
<button on='tap:sidebar.toggle'>Toggle sidebar</button>
<button on='tap:sidebar.open'>Open sidebar</button>
<button on='tap:sidebar.close'>Close sidebar</button>
</body>
</html>