Skip to content

Commit eb2d5e4

Browse files
author
Alban Bailly
committed
mobile nav
1 parent 1676f98 commit eb2d5e4

File tree

7 files changed

+228
-86
lines changed

7 files changed

+228
-86
lines changed

‎themes/linode-hugo-base-theme/layouts/partials/2_molecules/nav.html

Lines changed: 16 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,17 @@
1+
<a
2+
href="#main-menu-toggle"
3+
role="button"
4+
class="nav-close"
5+
aria-expanded="false"
6+
aria-controls="main-menu"
7+
aria-label="Close main menu"
8+
>
9+
<span class="visually-hidden">Close main menu</span>
10+
<img src='{{ "/img/menu.svg" | relURL }}' />
11+
</a>
12+
13+
<ul>
114
{{ range .Site.Menus.main }}
2-
<a class="mx-2" href="{{ .URL }}">{{ .Name }}</a>
3-
{{ end }}
15+
<li><a class="mx-2" href="{{ .URL }}">{{ .Name }}</a></li>
16+
{{ end }}
17+
</ul>

‎themes/linode-hugo-base-theme/layouts/partials/3_organisms/header.html

Lines changed: 33 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,33 @@
1-
<div class="logo"><a href="/">{{ partial "1_atoms/logo.html" }}</a></div>
2-
<nav class="nav">{{ partial "2_molecules/nav.html" . }}</nav>
1+
<div class="logo">
2+
<a href="/">{{ partial "1_atoms/logo.html" }}</a>
3+
</div>
4+
5+
<a
6+
href="#main-menu"
7+
role="button"
8+
class="nav-toggle"
9+
aria-expanded="false"
10+
aria-controls="main-menu"
11+
aria-label="Open main menu"
12+
>
13+
<span class="visually-hidden">Open main menu</span>
14+
<img src='{{ "/img/menu.svg" | relURL }}' />
15+
</a>
16+
17+
<nav
18+
id="main-menu"
19+
role="navigation"
20+
class="main-nav"
21+
aria-expanded="false"
22+
>
23+
24+
{{ partial "2_molecules/nav.html" . }}
25+
26+
</nav>
27+
<a
28+
href="#main-menu-toggle"
29+
class="backdrop"
30+
tabindex="-1"
31+
aria-hidden="true" hidden
32+
>
33+
</a>

‎themes/linode-hugo-base-theme/srcCSS/components/0_utilities/utilities.css

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
.visually-hidden {
2+
position: absolute;
3+
width: 1px;
4+
height: 1px;
5+
padding: 0;
6+
margin: -1px;
7+
overflow: hidden;
8+
clip: rect(0,0,0,0);
9+
border: 0;
10+
}

‎themes/linode-hugo-base-theme/srcCSS/components/2_molecules/nav.css

Lines changed: 106 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,111 @@
1-
.nav a {
1+
.main-nav a {
22
@apply text-l-nav-grey;
33
}
44

5-
.nav a:last-child {
5+
.main-nav a:last-child {
66
margin-right: 0;
77
}
8+
9+
.nav-toggle,
10+
.nav-close {
11+
width: 30px;
12+
display: inline-block;
13+
}
14+
15+
.main-nav {
16+
position: absolute;
17+
left: -200px;
18+
top: 0;
19+
height: 100%;
20+
overflow-y: scroll;
21+
overflow-x: visible;
22+
transition: left 0.3s ease,
23+
box-shadow 0.3s ease;
24+
z-index: 999;
25+
}
26+
27+
.main-nav ul {
28+
list-style: none;
29+
margin: 0;
30+
padding: 2.5em 0 0;
31+
/* Hide shadow w/ -8px while 'closed' */
32+
-webkit-box-shadow: -8px 0 8px rgba(0,0,0,.5);
33+
-moz-box-shadow: -8px 0 8px rgba(0,0,0,.5);
34+
box-shadow: -8px 0 8px rgba(0,0,0,.5);
35+
min-height: 100%;
36+
width: 200px;
37+
background: #1a1a1a;
38+
}
39+
40+
.main-nav:target,
41+
.main-nav[aria-expanded="true"] {
42+
left: 0;
43+
outline: none;
44+
-moz-box-shadow: 3px 0 12px rgba(0,0,0,.25);
45+
-webkit-box-shadow: 3px 0 12px rgba(0,0,0,.25);
46+
box-shadow: 3px 0 12px rgba(0,0,0,.25);
47+
}
48+
49+
.main-nav:target .menu-close,
50+
.main-nav[aria-expanded="true"] .menu-close {
51+
z-index: 1001;
52+
}
53+
54+
.main-nav:target ul,
55+
.main-nav[aria-expanded="true"] ul {
56+
position: relative;
57+
z-index: 1000;
58+
}
59+
60+
.main-nav:target + .backdrop,
61+
.main-nav[aria-expanded="true"] + .backdrop {
62+
position: absolute;
63+
display: block;
64+
content: "";
65+
left: 0;
66+
top: 0;
67+
width: 100%;
68+
height: 100%;
69+
z-index: 998;
70+
background: #000;
71+
background: rgba(0,0,0,.85);
72+
cursor: default;
73+
}
74+
75+
.main-nav,
76+
.main-nav:target + .backdrop,
77+
.main-nav[aria-expanded="true"] + .backdrop {
78+
position: fixed;
79+
}
80+
81+
/*
82+
Larger screen styling
83+
Horizontal menu
84+
*/
85+
@media (min-width: 768px) {
86+
.nav-toggle,
87+
.nav-close {
88+
display: none;
89+
}
90+
91+
/* Undo positioning of off-canvas menu */
92+
.main-nav {
93+
position: relative;
94+
left: auto;
95+
top: auto;
96+
height: auto;
97+
}
98+
99+
.main-nav ul {
100+
display: flex;
101+
102+
/* Undo off-canvas styling */
103+
padding: 0;
104+
-webkit-box-shadow: none;
105+
-moz-box-shadow: none;
106+
box-shadow: none;
107+
height: auto;
108+
width: auto;
109+
background: none;
110+
}
111+
}

‎themes/linode-hugo-base-theme/static/assets/css/main.css

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)