Skip to content

Commit d445afc

Browse files
majornistamajornista
committed
Add openOnMouseover setting, and toggleButtonClass for responsive layout
To normalize behavior of top navigation links on desktop and mobile, the default behavior will be for the menu to remain closed on hover. Click should toggle the menu regardless of whether the link has a valid `href`. With `openOnMouseover: true`, hover will open the menu as before and with the menu open, clicking a top-level navigation item with a valid `href` should open the url. Add toggleButtonClass to specify a button that should toggle the menu in a responsive layout on mobile devices. Incorporate media queries for responsive layout breakpoints.
1 parent 84b7461 commit d445afc

File tree

4 files changed

+480
-150
lines changed

4 files changed

+480
-150
lines changed

‎css/main.css

+19-6
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ body
2525

2626
html
2727
{
28-
font-size: 13px;
28+
font-size: 0.8125em;
2929
line-height: 1.5;
3030
}
3131

@@ -36,6 +36,10 @@ body
3636
cursor: default;
3737
}
3838

39+
pre {
40+
overflow: auto;
41+
}
42+
3943
code,
4044
pre
4145
{
@@ -58,10 +62,9 @@ h2
5862

5963
.LayoutGrid
6064
{
61-
width: 900px;
62-
padding-left: 10px;
63-
padding-right: 10px;
64-
padding-bottom: 10px;
65+
max-width: 900px;
66+
min-width: 300px;
67+
padding: 0 10px 10px;
6568
}
6669

6770
.LayoutCenter
@@ -93,7 +96,7 @@ h2
9396

9497
:link{
9598
color: #225FD7;
96-
text-decoration: none;
99+
text-decoration: underline;
97100
}
98101

99102
:link:focus {
@@ -110,3 +113,13 @@ h2
110113
:link:hover {
111114
outline: 0;
112115
}
116+
117+
.sr-only {
118+
width: 1px;
119+
height: 1px;
120+
margin: 0 -1px -1px 0;
121+
overflow: hidden;
122+
border: 0;
123+
padding: 0;
124+
position: absolute;
125+
}

‎css/megamenu.css

+221-13
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,20 @@
11
/*
22
Copyright © 2013 Adobe Systems Incorporated.
3-
43
Licensed under the Apache License, Version 2.0 (the “License”);
54
you may not use this file except in compliance with the License.
65
You may obtain a copy of the License at
7-
86
http://www.apache.org/licenses/LICENSE-2.0
9-
107
Unless required by applicable law or agreed to in writing, software
118
distributed under the License is distributed on an “AS IS” BASIS,
129
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
1310
See the License for the specific language governing permissions and
1411
limitations under the License.
1512
*/
1613

14+
.megamenu {
15+
position: relative;
16+
}
17+
1718
.accessible-megamenu {
1819
position: relative;
1920
display:block;
@@ -40,9 +41,10 @@ limitations under the License.
4041
margin: 0;
4142
padding: 0;
4243
line-height: inherit;
44+
border-bottom: 0;
4345
}
4446

45-
.accessible-megamenu .accessible-megamenu-top-nav-item {
47+
.accessible-megamenu > .accessible-megamenu-top-nav-item {
4648
position: relative;
4749
display: block;
4850
box-sizing: border-box;
@@ -63,7 +65,7 @@ limitations under the License.
6365
-moz-outline-radius: 3px;
6466
}
6567

66-
.accessible-megamenu .accessible-megamenu-top-nav-item a[aria-expanded] {
68+
.accessible-megamenu > .accessible-megamenu-top-nav-item a[aria-expanded] {
6769
position: relative;
6870
display: block;
6971
line-height: 3em;
@@ -77,15 +79,15 @@ limitations under the License.
7779
}
7880

7981

80-
.accessible-megamenu .accessible-megamenu-top-nav-item a[aria-expanded]:hover,
81-
.accessible-megamenu .accessible-megamenu-top-nav-item a[aria-expanded]:focus {
82+
.accessible-megamenu > .accessible-megamenu-top-nav-item a[aria-expanded]:hover,
83+
.accessible-megamenu > .accessible-megamenu-top-nav-item a[aria-expanded]:focus {
8284
color: #333 !important;
8385
outline-offset: -1px;
8486
}
8587

86-
.accessible-megamenu .accessible-megamenu-top-nav-item a[aria-expanded]:hover,
87-
.accessible-megamenu .accessible-megamenu-top-nav-item a[aria-expanded]:focus,
88-
.accessible-megamenu .accessible-megamenu-top-nav-item a[aria-expanded].open {
88+
.accessible-megamenu > .accessible-megamenu-top-nav-item a[aria-expanded]:hover,
89+
.accessible-megamenu > .accessible-megamenu-top-nav-item a[aria-expanded]:focus,
90+
.accessible-megamenu > .accessible-megamenu-top-nav-item a[aria-expanded].open {
8991
margin-left: 0;
9092
background: #f5f8fa none;
9193
background: -webkit-gradient(linear,left top,left bottom,from(#f5f8fa),to(#e3e5e5));
@@ -95,16 +97,16 @@ limitations under the License.
9597
z-index: 1002;
9698
}
9799

98-
.accessible-megamenu .accessible-megamenu-top-nav-item a[aria-expanded].open {
100+
.accessible-megamenu > .accessible-megamenu-top-nav-item a[aria-expanded].open {
99101
background: #f5f8fa none;
100102
padding-bottom: 2px;
101103
}
102104

103-
.accessible-megamenu .accessible-megamenu-top-nav-item:first-child a[aria-expanded] {
105+
.accessible-megamenu > .accessible-megamenu-top-nav-item:first-child a[aria-expanded] {
104106
border-bottom-left-radius: 3px;
105107
}
106108

107-
.accessible-megamenu .accessible-megamenu-top-nav-item:first-child a[aria-expanded].open {
109+
.accessible-megamenu > .accessible-megamenu-top-nav-item:first-child a[aria-expanded].open {
108110
border-bottom-left-radius: 0px;
109111
border-left: 1px solid #b3b3b3;
110112
border-left-color: rgba(0,0,0,0.3);
@@ -264,6 +266,18 @@ limitations under the License.
264266
text-decoration: underline;
265267
}
266268

269+
.accessible-megamenu .accessible-megamenu-panel > h2 > a {
270+
font-weight: bold;
271+
color: #454545;
272+
font-size: 1.5em;
273+
margin-bottom: 0;
274+
margin-top: .8em;
275+
padding-bottom: 0;
276+
line-height: 1.4em;
277+
}
278+
279+
.accessible-megamenu .accessible-megamenu-panel > h2 > a:hover,
280+
.accessible-megamenu .accessible-megamenu-panel > h2 > a:focus,
267281
.accessible-megamenu .accessible-megamenu-panel > ol > li > h3 > a:hover,
268282
.accessible-megamenu .accessible-megamenu-panel > ol > li > h3 > a:focus {
269283
color: #333;
@@ -275,3 +289,197 @@ limitations under the License.
275289
border-top-color: rgba(0,0,0, 0.3);
276290
border-bottom-color: #fff;
277291
}
292+
293+
/* hides redundant header links in panel when megamenu is not initialized */
294+
.accessible-megamenu:not(.js-accessible-megamenu) .accessible-megamenu-panel > h2 {
295+
display: none;
296+
}
297+
298+
.accessible-megamenu-toggle {
299+
display: none;
300+
background: none;
301+
border: 0;
302+
padding: 0;
303+
position: absolute;
304+
z-index: 1;
305+
top: 3px;
306+
right: 1em;
307+
width: 33px;
308+
height: 33px;
309+
}
310+
311+
.accessible-megamenu-toggle > span:not(.sr-only) {
312+
display: block;
313+
width: 33px;
314+
height: 4px;
315+
margin-bottom: 5px;
316+
position: relative;
317+
318+
background: #000;
319+
border-radius: 3px;
320+
321+
z-index: 1;
322+
323+
transform-origin: 0 0;
324+
325+
transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
326+
background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
327+
margin 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
328+
opacity 0.55s ease;
329+
}
330+
331+
.accessible-megamenu-toggle > span {
332+
margin-top: 5px;
333+
}
334+
335+
.accessible-megamenu-toggle > span:nth-last-child(1) {
336+
transform-origin: 0% 100%;
337+
}
338+
339+
/*
340+
* Transform all the slices of hamburger
341+
* into a crossmark.
342+
*/
343+
.accessible-megamenu-toggle[aria-expanded=true] > span
344+
{
345+
margin-top: 0;
346+
opacity: 1;
347+
transform: rotate(45deg) translate(4px, -3px);
348+
background: #000;
349+
border-radius: 0;
350+
}
351+
352+
/*
353+
* But, hide the middle one.
354+
*/
355+
.accessible-megamenu-toggle[aria-expanded=true] > span:nth-last-child(2)
356+
{
357+
opacity: 0;
358+
transform: rotate(0deg) scale(0.2, 0.2);
359+
}
360+
361+
/*
362+
* the last one should go the other direction.
363+
*/
364+
.accessible-megamenu-toggle[aria-expanded=true] > span:nth-last-child(1)
365+
{
366+
transform: rotate(-45deg) translate(0px, 7px);
367+
}
368+
369+
@media (max-width: 920px) {
370+
.accessible-megamenu > .accessible-megamenu-top-nav-item {
371+
position: static;
372+
}
373+
374+
.accessible-megamenu .accessible-megamenu-panel.cols-4,
375+
.accessible-megamenu .accessible-megamenu-panel.cols-4b,
376+
.accessible-megamenu .accessible-megamenu-panel.cols-3,
377+
.accessible-megamenu .accessible-megamenu-panel.cols-1 {
378+
width: auto;
379+
left: 0;
380+
right: 0;
381+
}
382+
383+
.accessible-megamenu .accessible-megamenu-panel.open {
384+
max-height: inherit
385+
}
386+
387+
.accessible-megamenu .accessible-megamenu-panel.cols-4 > ol > li,
388+
.accessible-megamenu .accessible-megamenu-panel.cols-4b > ol > li,
389+
.accessible-megamenu .accessible-megamenu-panel.cols-3 > ol > li {
390+
width: 44%;
391+
}
392+
393+
.accessible-megamenu .accessible-megamenu-panel.cols-1 > ol > li {
394+
width: 100%;
395+
}
396+
397+
.accessible-megamenu .accessible-megamenu-panel.cols-3 > ol > li {
398+
min-height: 256px;
399+
}
400+
401+
.accessible-megamenu .accessible-megamenu-panel > ol > li {
402+
float: left;
403+
display: block;
404+
margin-right: 1em;
405+
margin-bottom: 1em;
406+
}
407+
408+
.accessible-megamenu .accessible-megamenu-panel.cols-4 > ol > li:nth-of-type(3),
409+
.accessible-megamenu .accessible-megamenu-panel.cols-4b > ol > li:nth-of-type(3),
410+
.accessible-megamenu .accessible-megamenu-panel.cols-3 > ol > li:nth-of-type(3) {
411+
padding-left: 0;
412+
border-left: none;
413+
box-shadow: none;
414+
}
415+
}
416+
417+
@media (max-width: 434px) {
418+
.accessible-megamenu-toggle {
419+
display: block;
420+
z-index: 3;
421+
}
422+
423+
.accessible-megamenu-toggle ~ .accessible-megamenu > .accessible-megamenu-top-nav-item {
424+
height: 0;
425+
overflow: hidden;
426+
visibility: collapse;
427+
}
428+
429+
.accessible-megamenu-toggle[aria-expanded=true] ~ .accessible-megamenu > .accessible-megamenu-top-nav-item {
430+
height: auto;
431+
overflow: visible;
432+
visibility: visible;
433+
}
434+
435+
.accessible-megamenu {
436+
height: auto;
437+
padding-top: 3.077em;
438+
z-index: 2;
439+
}
440+
441+
.accessible-megamenu > .accessible-megamenu-top-nav-item {
442+
border-right: 0;
443+
float: none;
444+
width: 100%;
445+
height: auto;
446+
}
447+
448+
.accessible-megamenu > .accessible-megamenu-top-nav-item a[aria-expanded] {
449+
box-shadow: none;
450+
}
451+
452+
.accessible-megamenu .accessible-megamenu-panel,
453+
.accessible-megamenu .accessible-megamenu-panel.open {
454+
position: relative;
455+
top: 0;
456+
border: 0;
457+
box-shadow: none;
458+
padding-bottom: 0;
459+
}
460+
461+
.accessible-megamenu .accessible-megamenu-panel.open {
462+
padding-bottom: 0.769em;
463+
max-height: 350px;
464+
overflow: auto;
465+
}
466+
467+
468+
}
469+
470+
@media (max-width: 414px) {
471+
.accessible-megamenu .accessible-megamenu-panel.cols-4 > ol > li,
472+
.accessible-megamenu .accessible-megamenu-panel.cols-4b > ol > li,
473+
.accessible-megamenu .accessible-megamenu-panel.cols-3 > ol > li,
474+
.accessible-megamenu .accessible-megamenu-panel.cols-1 > ol > li {
475+
width: 100%;
476+
}
477+
478+
.accessible-megamenu .accessible-megamenu-panel.cols-4 > ol > li,
479+
.accessible-megamenu .accessible-megamenu-panel.cols-4b > ol > li,
480+
.accessible-megamenu .accessible-megamenu-panel.cols-3 > ol > li {
481+
padding-left: 0;
482+
border-left: none;
483+
box-shadow: none;
484+
}
485+
}

0 commit comments

Comments
 (0)