This repository has been archived by the owner on Oct 22, 2019. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 505
/
amp-sidebar.html
204 lines (177 loc) · 8.87 KB
/
amp-sidebar.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
<!---
{
"experiments": ["amp-sidebar toolbar"],
"preview": "default"
}
--->
<!--
## Introduction
A sidebar provides a way to display meta content intended for temporary access (navigation links, buttons, menus, etc.). The sidebar can be revealed by a button tap while the main content remains visually underneath. However, optional attributes that accept media queries can be used to display meta content in other parts of the site. Child `<nav toolbar="(media query)" toolbar-target="elementID">` will create `toolbar` elements that allow for content within the sidebar to be displayed on other parts of the main content.
**You must be able to resize your browser window in order to notice the effects of** `toolbar` **elements. In this example,** `toolbar` **elements are best viewed by resiving your window from mobile to desktop.**
-->
<!-- -->
<!doctype html>
<html ⚡>
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<!-- ## Setup -->
<!--
Import the `amp-sidebar` component.
-->
<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="<%host%>/components/amp-sidebar/">
<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;
margin-left: 10px;
margin-right: 10px;
list-style: none;
}
.previewOnly {
font-weight: bold;
}
#sidebar-right nav.amp-sidebar-toolbar-target-shown {
display: none;
}
</style>
</head>
<body>
<!-- ## Basic Usage -->
<!--
The `amp-sidebar` should be a direct child of the `<body>`. It must have a layout of `nodisplay`. The`amp-sidebar` may not contain any AMP Elements except for `amp-accordion`, `amp-img` and `amp-fit-text`. `amp-fit-text` expands or shrinks its font size to fit the content within the space given to in the menu.
-->
<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>
<!-- ## Sidebar Actions -->
<!--
Click to toggle the sidebar.
-->
<button on="tap:sidebar.toggle" class="ampstart-btn caps m2">Toggle sidebar</button>
<!--
Click to open the sidebar.
-->
<button on="tap:sidebar.open" class="ampstart-btn caps m2">Open sidebar</button>
<!--
Click to close the sidebar.
-->
<button on="tap:sidebar.close" class="ampstart-btn caps m2">Close sidebar</button>
<p class="previewOnly m2">
Please resize the browser window to view the responsiveness for amp-sidebar's toolbar.
</p>
<!-- ## Toolbar (experimental) -->
<!--
`toolbar` enables elements within the `amp-sidebar` to be displayed on other parts of the `<body>`. This is useful for responsive design, including navigation bars, social footers, etc.
`toolbar` elements have their own requirements:
- The sidebar may implement toolbars by adding `nav` elements with the `toolbar` attribute and `toolbar-target` attribute.
- The `nav` element must be a child of `<amp-sidebar>` and follow this format: `<nav toolbar="(media-query)" toolbar-target="elementID">`.
- The `nav` containing the toolbar attribute must only contain a single `<ul>` element, that contains `<li>` elements.
- The `<li>` elements may contain any valid HTML elements (supported by AMP), or any of the AMP elements that `<amp-sidebar>` supports.
- Toolbar behavior is only applied while the `toolbar` attribute media-query is valid. Also, an element with the `toolbar-target` attribute id must exist on the page for the toolbar to be applied.
-->
<div>
<amp-sidebar id="sidebar-left" layout="nodisplay" side="left">
<amp-img class="amp-close-image" src="/img/ic_close_black_18dp_2x.png" width="20" height="20" alt="close sidebar" on="tap:sidebar-left.close" role="button" tabindex="0"></amp-img>
<nav toolbar="(min-width: 784px)" toolbar-target="target-element-left">
<ul>
<li><a href="/">Home</a></li>
<li> Nav item 1</li>
</ul>
</nav>
<ul>
<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-left.toggle" class="ampstart-btn caps m2">Toggle sidebar</button>
<div id="target-element-left">
</div>
</div>
<!-- ## Styling Toolbar (experimental) -->
<!--
The `toolbar` element within the `<amp-sidebar>` element, will have classes applied to the element depending if the `toolbar-target` element is shown or hidden. This is useful for applying different styles on the `toolbar` element and the `toolbar-target` element. The classes are `amp-sidebar-toolbar-target-shown`, and `amp-sidebar-toolbar-target-hidden`.
The class `amp-sidebar-toolbar-target-shown` is applied to the `toolbar` element when the `toolbar-target` element is shown. The class `amp-sidebar-toolbar-target-hidden` is applied to the `toolbar` element when the `toolbar-target` element is hidden.
```html
<style amp-custom="">
.amp-sidebar-toolbar-target-shown {
display: none;
}
</style>
```
-->
<div>
<amp-sidebar id="sidebar-right" 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-left.close" role="button" tabindex="0"></amp-img>
<nav toolbar="(min-width: 784px)" toolbar-target="target-element-right">
<ul>
<li><a href="/">Home</a></li>
<li> Nav item 1</li>
</ul>
</nav>
<ul>
<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-right.toggle" class="ampstart-btn caps m2">Toggle sidebar</button>
<div id="target-element-right">
</div>
</div>
</body>
</html>