1 | body {
|
2 | color: #333; |
3 | } |
4 | |
5 | .pure-img-responsive {
|
6 | max-width: 100%; |
7 | height: auto; |
8 | } |
9 | |
10 | /* |
11 | Add transition to containers so they can push in and out. |
12 | */ |
13 | #layout, |
14 | #menu, |
15 | .menu-link {
|
16 | -webkit-transition: all 0.2s ease-out; |
17 | -moz-transition: all 0.2s ease-out; |
18 | -ms-transition: all 0.2s ease-out; |
19 | -o-transition: all 0.2s ease-out; |
20 | transition: all 0.2s ease-out; |
21 | } |
22 | |
23 | /* |
24 | This is the parent `<div>` that contains the menu and the content area. |
25 | */ |
26 | #layout {
|
27 | position: relative; |
28 | left: 0; |
29 | padding-left: 0; |
30 | } |
31 | #layout.active #menu {
|
32 | left: 150px; |
33 | width: 150px; |
34 | } |
35 | |
36 | #layout.active .menu-link {
|
37 | left: 150px; |
38 | } |
39 | /* |
40 | The content `<div>` is where all your content goes. |
41 | */ |
42 | .content {
|
43 | margin: 0 auto; |
44 | padding: 0 2em; |
45 | max-width: 800px; |
46 | margin-bottom: 50px; |
47 | line-height: 1.6em; |
48 | } |
49 | |
50 | h1 a {
|
51 | color: inherit; |
52 | text-decoration: none; |
53 | } |
54 | |
55 | .header {
|
56 | margin: 0; |
57 | color: #333; |
58 | text-align: center; |
59 | padding: 2.5em 2em 0; |
60 | border-bottom: 1px solid #eee; |
61 | } |
62 | .header h1 {
|
63 | margin: 0.2em 0; |
64 | font-size: 3em; |
65 | font-weight: 500; |
66 | } |
67 | .header h2 {
|
68 | font-weight: 500; |
69 | color: #333; |
70 | padding: 0; |
71 | margin-top: 0; |
72 | } |
73 | |
74 | .content h2 {
|
75 | margin: 50px 0 20px 0; |
76 | font-weight: 600; |
77 | color: #333; |
78 | } |
79 | |
80 | |
81 | |
82 | /* |
83 | The `#menu` `<div>` is the parent `<div>` that contains the `.pure-menu` that |
84 | appears on the left side of the page. |
85 | */ |
86 | |
87 | #menu {
|
88 | margin-left: -150px; /* "#menu" width */ |
89 | width: 150px; |
90 | position: fixed; |
91 | top: 0; |
92 | left: 0; |
93 | bottom: 0; |
94 | z-index: 1000; /* so the menu or its navicon stays above all content */ |
95 | background: #191818; |
96 | overflow-y: auto; |
97 | -webkit-overflow-scrolling: touch; |
98 | } |
99 | /* |
100 | All anchors inside the menu should be styled like this. |
101 | */ |
102 | #menu a {
|
103 | color: #999; |
104 | border: none; |
105 | padding: 0.6em 0 0.6em 0.6em; |
106 | } |
107 | |
108 | /* |
109 | Remove all background/borders, since we are applying them to #menu. |
110 | */ |
111 | #menu .pure-menu, |
112 | #menu .pure-menu ul {
|
113 | border: none; |
114 | background: transparent; |
115 | } |
116 | |
117 | /* |
118 | Add that light border to separate items into groups. |
119 | */ |
120 | #menu .pure-menu ul, |
121 | #menu .pure-menu .menu-item-divided {
|
122 | border-top: 1px solid #333; |
123 | } |
124 | /* |
125 | Change color of the anchor links on hover/focus. |
126 | */ |
127 | #menu .pure-menu li a:hover, |
128 | #menu .pure-menu li a:focus {
|
129 | background: #333; |
130 | } |
131 | |
132 | /* |
133 | This styles the selected menu item `<li>`. |
134 | */ |
135 | #menu .pure-menu-selected, |
136 | #menu .pure-menu-heading {
|
137 | background: #1f8dd6; |
138 | } |
139 | /* |
140 | This styles a link within a selected menu item `<li>`. |
141 | */ |
142 | #menu .pure-menu-selected a {
|
143 | color: #fff; |
144 | } |
145 | |
146 | /* |
147 | This styles the menu heading. |
148 | */ |
149 | #menu .pure-menu-heading {
|
150 | font-size: 110%; |
151 | color: #fff; |
152 | margin: 0; |
153 | } |
154 | |
155 | /* -- Dynamic Button For Responsive Menu -------------------------------------*/ |
156 | |
157 | /* |
158 | The button to open/close the Menu is custom-made and not part of Pure. Here's |
159 | how it works: |
160 | */ |
161 | |
162 | /* |
163 | `.menu-link` represents the responsive menu toggle that shows/hides on |
164 | small screens. |
165 | */ |
166 | .menu-link {
|
167 | position: fixed; |
168 | display: block; /* show this only on small screens */ |
169 | top: 0; |
170 | left: 0; /* "#menu width" */ |
171 | background: #000; |
172 | background: rgba(0,0,0,0.7); |
173 | font-size: 10px; /* change this value to increase/decrease button size */ |
174 | z-index: 10; |
175 | width: 2em; |
176 | height: auto; |
177 | padding: 2.1em 1.6em; |
178 | } |
179 | |
180 | .menu-link:hover, |
181 | .menu-link:focus {
|
182 | background: #000; |
183 | } |
184 | |
185 | .menu-link span {
|
186 | position: relative; |
187 | display: block; |
188 | } |
189 | |
190 | .menu-link span, |
191 | .menu-link span:before, |
192 | .menu-link span:after {
|
193 | background-color: #fff; |
194 | width: 100%; |
195 | height: 0.2em; |
196 | } |
197 | |
198 | .menu-link span:before, |
199 | .menu-link span:after {
|
200 | position: absolute; |
201 | margin-top: -0.6em; |
202 | content: " "; |
203 | } |
204 | |
205 | .menu-link span:after {
|
206 | margin-top: 0.6em; |
207 | } |
208 | |
209 | .floating-image {
|
210 | float: right; |
211 | margin-right: 20px; |
212 | margin-top: 20px; |
213 | } |
214 | |
215 | |
216 | /* -- Responsive Styles (Media Queries) ------------------------------------- */ |
217 | |
218 | /* |
219 | Hides the menu at `48em`, but modify this based on your app's needs. |
220 | */ |
221 | @media (min-width: 48em) {
|
222 | |
223 | .header, |
224 | .content {
|
225 | padding-left: 2em; |
226 | padding-right: 2em; |
227 | } |
228 | |
229 | #layout {
|
230 | padding-left: 150px; /* left col width "#menu" */ |
231 | left: 0; |
232 | } |
233 | #menu {
|
234 | left: 150px; |
235 | } |
236 | |
237 | .menu-link {
|
238 | position: fixed; |
239 | left: 150px; |
240 | display: none; |
241 | } |
242 | |
243 | #layout.active .menu-link {
|
244 | left: 150px; |
245 | } |
246 | } |
247 | |
248 | @media (max-width: 48em) {
|
249 | /* Only apply this when the window is small. Otherwise, the following |
250 | case results in extra padding on the left: |
251 | * Make the window small. |
252 | * Tap the menu to trigger the active state. |
253 | * Make the window large again. |
254 | */ |
255 | #layout.active {
|
256 | position: relative; |
257 | left: 150px; |
258 | } |
259 | |
260 | .floating-image img {
|
261 | width: 48px; |
262 | height: 48px; |
263 | } |
264 | } |
265 | |
266 | pre {
|
267 | font-weight: bold; |
268 | } |
269 | |
270 | td {
|
271 | padding: 3px; |
272 | } |
Travelled to 7 computer(s): bhatertpkbcr, gwrvuhgaqvyk, mqqgnosmbjvj, pyentgdyhuwx, pzhvpgtvlbxg, tvejysmllsmz, vouqrxazstgt
No comments. add comment
| Snippet ID: | #1020396 |
| Snippet name: | side-menu.css |
| Eternal ID of this version: | #1020396/6 |
| Text MD5: | 69ddbbca7ec0044705e8ab08bb1ff09d |
| Author: | stefan |
| Category: | css |
| Type: | Document |
| Public (visible to everyone): | Yes |
| Archived (hidden from active list): | No |
| Created/modified: | 2018-12-19 21:54:09 |
| Source code size: | 5558 bytes / 272 lines |
| Pitched / IR pitched: | No / No |
| Views / Downloads: | 243 / 4171 |
| Version history: | 5 change(s) |
| Referenced in: | [show references] |