Skip to content

Commit 9bca496

Browse files
wesleycolewesleycole
committed
adding the mobile menu component
1 parent e5c3741 commit 9bca496

24 files changed

+1203
-0
lines changed

‎_component/mobile-menu/component.html

+57
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
<div class="SiteContainer">
2+
3+
<!--
4+
We keep our mobile menu as the top most element
5+
to make it easier to keep off canvas
6+
-->
7+
<nav class="Nav Nav--mobile" aria-hidden="true">
8+
9+
<ul id="menu-main-menu" class="menu">
10+
<li id="menu-item-22" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-22">
11+
<a href="https://objectiv.co/work/" itemprop="url">Work</a>
12+
</li>
13+
<li id="menu-item-21" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-21">
14+
<a href="https://objectiv.co/services/" itemprop="url">Services</a>
15+
</li>
16+
<li id="menu-item-23" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-23">
17+
<a href="https://objectiv.co/our-story/" itemprop="url">Our Story</a>
18+
</li>
19+
<li id="menu-item-3617" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-3617">
20+
<a href="https://store.objectiv.co" itemprop="url">Plugins</a>
21+
</li>
22+
<li id="menu-item-20" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-20">
23+
<a href="https://objectiv.co/blog/" itemprop="url">Blog</a>
24+
</li>
25+
<li id="menu-item-19" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-19">
26+
<a href="https://objectiv.co/contact/" itemprop="url">Contact</a>
27+
</li>
28+
</ul>
29+
30+
</nav>
31+
32+
<div class="SiteHeader" role="banner" itemscope itemtype="http://schema.org/WPHeader">
33+
34+
<h1 class="SiteTitle" itemscope itemtype="http://schema.org/Organization">
35+
<a itemprop="url" href="#" rel="home">
36+
<img itemprop="logo" class="Logo" src="https://placehold.it/140x40?text=LOGO" height="42" width="140" alt="">
37+
<!--
38+
Visually hide this text.
39+
WCAG 2.0: “image alt text cannot be the primary text of a link"
40+
-->
41+
<span class="screen-reader-text">Objectiv</span>
42+
</a>
43+
</h1>
44+
45+
<button class="NavToggle" aria-expanded="false">
46+
<div class="NavToggle-icon">
47+
<span></span>
48+
<span></span>
49+
<span></span>
50+
<span></span>
51+
</div>
52+
<span class="screen-reader-text">Primary Menu</span>
53+
</button>
54+
55+
</div>
56+
57+
</div>

‎_component/mobile-menu/css/component.css

+136
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,136 @@
1+
body {
2+
margin: 0;
3+
padding: 0;
4+
}
5+
6+
.screen-reader-text {
7+
clip: rect(1px, 1px, 1px, 1px);
8+
position: absolute !important;
9+
height: 1px;
10+
width: 1px;
11+
overflow: hidden;
12+
}
13+
14+
.SiteContainer {
15+
position: relative;
16+
right: 0;
17+
transition: all 0.5s ease-in-out;
18+
}
19+
20+
.SiteContainer.Nav--is-visible {
21+
right: 300px;
22+
}
23+
24+
.SiteHeader {
25+
align-items: center;
26+
background: #555;
27+
display: flex;
28+
padding: 10px;
29+
}
30+
31+
.SiteTitle {
32+
margin: 0;
33+
}
34+
35+
.Logo {
36+
display: block;
37+
}
38+
39+
.NavToggle {
40+
background: none;
41+
border: none;
42+
color: #fff;
43+
font-size: 18px;
44+
margin-left: auto;
45+
}
46+
47+
.NavToggle-icon {
48+
height: 12px;
49+
position: relative;
50+
transform: rotate(0deg);
51+
transition: all 0.25s ease-in-out;
52+
width: 20px;
53+
}
54+
55+
.NavToggle-icon span {
56+
display: block;
57+
position: absolute;
58+
height: 2px;
59+
width: 100%;
60+
background: #fff;
61+
border-radius: 0;
62+
opacity: 1;
63+
left: 0;
64+
transform: rotate(0deg);
65+
transition: all 0.25s ease-in-out;
66+
}
67+
68+
.NavToggle-icon span:nth-child(1) {
69+
top: 0px;
70+
}
71+
72+
.NavToggle-icon span:nth-child(2),
73+
.NavToggle-icon span:nth-child(3) {
74+
top: 5px;
75+
}
76+
77+
.NavToggle-icon span:nth-child(4) {
78+
top: 10px;
79+
}
80+
81+
.NavToggle.Nav--is-visible .NavToggle-icon span:nth-child(1) {
82+
opacity: 0;
83+
}
84+
85+
.NavToggle.Nav--is-visible .NavToggle-icon span:nth-child(2) {
86+
transform: rotate(45deg);
87+
}
88+
89+
.NavToggle.Nav--is-visible .NavToggle-icon span:nth-child(3) {
90+
transform: rotate(-45deg);
91+
}
92+
93+
.NavToggle.Nav--is-visible .NavToggle-icon span:nth-child(4) {
94+
left: 50%;
95+
top: 18px;
96+
width: 0%;
97+
}
98+
99+
.Nav {
100+
transition: all 0.5s ease-in-out;
101+
}
102+
103+
.Nav .menu {
104+
margin: 0;
105+
padding: 15px 0;
106+
}
107+
108+
.Nav .menu .menu-item {
109+
list-style: none;
110+
}
111+
112+
.Nav .menu .menu-item > a {
113+
color: #fff;
114+
display: block;
115+
padding: 10px 20px;
116+
text-decoration: none;
117+
}
118+
119+
.Nav--mobile {
120+
background-color: #2d2d2d;
121+
height: 100%;
122+
overflow: auto;
123+
position: fixed;
124+
right: -300px;
125+
top: 0;
126+
width: 300px;
127+
z-index: 2000;
128+
}
129+
130+
.Nav--mobile.Nav--is-visible {
131+
right: 0;
132+
}
133+
134+
.SiteContainer.Nav--is-visible {
135+
right: 300px;
136+
}

‎_component/mobile-menu/css/component.scss

Whitespace-only changes.

‎_component/mobile-menu/example.html

+71
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
<!DOCTYPE html>
2+
<html lang="en-US" class="no-js">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Accordion</title>
6+
<link rel="stylesheet" href="css/component.css" />
7+
</head>
8+
<body>
9+
10+
<div class="SiteContainer">
11+
12+
<!--
13+
We keep our mobile menu as the top most element
14+
to make it easier to keep off canvas
15+
-->
16+
<nav class="Nav Nav--mobile" aria-hidden="true">
17+
18+
<ul id="menu-main-menu" class="menu">
19+
<li id="menu-item-22" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-22">
20+
<a href="https://objectiv.co/work/" itemprop="url">Work</a>
21+
</li>
22+
<li id="menu-item-21" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-21">
23+
<a href="https://objectiv.co/services/" itemprop="url">Services</a>
24+
</li>
25+
<li id="menu-item-23" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-23">
26+
<a href="https://objectiv.co/our-story/" itemprop="url">Our Story</a>
27+
</li>
28+
<li id="menu-item-3617" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-3617">
29+
<a href="https://store.objectiv.co" itemprop="url">Plugins</a>
30+
</li>
31+
<li id="menu-item-20" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-20">
32+
<a href="https://objectiv.co/blog/" itemprop="url">Blog</a>
33+
</li>
34+
<li id="menu-item-19" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-19">
35+
<a href="https://objectiv.co/contact/" itemprop="url">Contact</a>
36+
</li>
37+
</ul>
38+
39+
</nav>
40+
41+
<div class="SiteHeader" role="banner" itemscope itemtype="http://schema.org/WPHeader">
42+
43+
<h1 class="SiteTitle" itemscope itemtype="http://schema.org/Organization">
44+
<a itemprop="url" href="#" rel="home">
45+
<img itemprop="logo" class="Logo" src="https://placehold.it/140x40?text=LOGO" height="42" width="140" alt="">
46+
<!--
47+
Visually hide this text.
48+
WCAG 2.0: “image alt text cannot be the primary text of a link"
49+
-->
50+
<span class="screen-reader-text">Objectiv</span>
51+
</a>
52+
</h1>
53+
54+
<button class="NavToggle" aria-expanded="false">
55+
<div class="NavToggle-icon">
56+
<span></span>
57+
<span></span>
58+
<span></span>
59+
<span></span>
60+
</div>
61+
<span class="screen-reader-text">Primary Menu</span>
62+
</button>
63+
64+
</div>
65+
66+
</div>
67+
68+
<script src="js/component.js"></script>
69+
<script src="js/component-usage.js"></script>
70+
</body>
71+
</html>

‎_component/mobile-menu/index.md

+37
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
---
2+
title: Mobile Menu
3+
layout: component
4+
path_slug: mobile-menu
5+
category: navigation
6+
iframe_height: large
7+
---
8+
This implementation uses `classList` which is not fully supported in all browsers (stupid IE). If you need it, you should pull in the the [polyfill](https://developer.mozilla.org/en-US/docs/Web/API/Element/classList).
9+
10+
<iframe {% if page.iframe_height %}class="h-{{ page.iframe_height }}"{% endif %} src="{{ site.baseurl }}/component/{{ page.path_slug }}/example.html"></iframe>
11+
12+
## Markup
13+
```html
14+
{% include_relative component.html %}
15+
```
16+
17+
## Styles
18+
19+
### CSS
20+
```css
21+
{% include_relative css/component.css %}
22+
```
23+
24+
### Sass
25+
```scss
26+
{% include_relative css/component.scss %}
27+
```
28+
29+
## Javascript
30+
### Plugin
31+
```js
32+
{% include_relative js/component.js %}
33+
```
34+
### Usage
35+
```js
36+
{% include_relative js/component-usage.js %}
37+
```

‎_component/mobile-menu/js/component-usage.js

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
Objectiv.mobileMenu({
2+
container: '.SiteContainer',
3+
menu: '.Nav--mobile',
4+
toggle: '.NavToggle'
5+
});

‎_component/mobile-menu/js/component.js

+40
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
/**
2+
* Objectiv Mobile Menu
3+
*/
4+
(function() {
5+
'use strict';
6+
7+
if ('object' !== typeof window.Objectiv) {
8+
window.Objectiv = {};
9+
}
10+
11+
window.Objectiv.mobileMenu = function(options) {
12+
if ('undefined' === typeof options.menu)
13+
return false;
14+
15+
var container = document.querySelector(options.container),
16+
menu = document.querySelector(options.menu),
17+
toggle = document.querySelector(options.toggle);
18+
19+
if (!container || !menu || !toggle) return;
20+
21+
function toggleMenu() {
22+
container.classList.toggle('Nav--is-visible');
23+
menu.classList.toggle('Nav--is-visible');
24+
toggle.classList.toggle('Nav--is-visible');
25+
26+
if (toggle.classList.contains('Nav--is-visible')) {
27+
toggle.setAttribute('aria-expanded', true);
28+
menu.setAttribute('aria-hidden', false);
29+
} else {
30+
toggle.setAttribute('aria-expanded', false);
31+
menu.setAttribute('aria-hidden', true);
32+
}
33+
}
34+
35+
toggle.addEventListener('click', function(e) {
36+
e.preventDefault();
37+
toggleMenu();
38+
});
39+
}
40+
})();

‎_site/component/accordion/index.html

+10
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,8 @@ <h4>UI</h4>
4949

5050

5151

52+
53+
5254
<li class="ComponentList-item"><a href="/component-library/component/tabs/index.html">Tabs</a></li>
5355

5456

@@ -72,6 +74,10 @@ <h4>Navigation</h4>
7274

7375

7476

77+
<li class="ComponentList-item"><a href="/component-library/component/mobile-menu/index.html">Mobile Menu</a></li>
78+
79+
80+
7581

7682

7783

@@ -103,6 +109,8 @@ <h4>Content</h4>
103109

104110

105111

112+
113+
106114
<li class="ComponentList-item"><a href="/component-library/component/person/index.html">Person</a></li>
107115

108116

@@ -143,6 +151,8 @@ <h4>Twig</h4>
143151

144152

145153

154+
155+
146156
</ul>
147157
</div>
148158

0 commit comments

Comments
 (0)