|
1 | | -<nav id="navigation" class="navigation"> |
2 | | - <ol class="navigation--items"> |
3 | | - {% assign groups = (site.pages | sort: "menu_group" | group_by: "menu_group") %} |
4 | | - {% for group in groups %} |
5 | | - {% assign pages = (group.items | sort: "menu_sort") %} |
6 | | - {% for page in pages %} |
7 | | - {% if page.menu_group > 0 %} |
8 | | - <li data-menu-group="{{ page.menu_group }}"> |
9 | | - <a class="page-link" href="{% if page.external_url %}{{ page.external_url }}{% else %}{{ page.url | prepend: site.baseurl }}{% endif %}">{{ page.title }}</a> |
| 1 | +<nav id="navigation" class="navigation" aria-label="Primary"> |
| 2 | + <ul class="navigation--items"> |
| 3 | + {% for item in site.data.navigation %} |
| 4 | + {% if item.children %} |
| 5 | + {% assign submenu_id = 'submenu-' | append: forloop.index %} |
| 6 | + <li class="navigation--item has-submenu"> |
| 7 | + <button |
| 8 | + type="button" |
| 9 | + class="navigation--submenu-toggle" |
| 10 | + aria-expanded="false" |
| 11 | + aria-haspopup="true" |
| 12 | + aria-controls="{{ submenu_id }}" |
| 13 | + > |
| 14 | + {{ item.title }} |
| 15 | + <span class="navigation--caret" aria-hidden="true">▾</span> |
| 16 | + </button> |
| 17 | + <ul id="{{ submenu_id }}" class="navigation--submenu"> |
| 18 | + {% for child in item.children %} |
| 19 | + <li> |
| 20 | + <a class="page-link" href="{% if child.url contains '://' %}{{ child.url }}{% else %}{{ child.url | relative_url }}{% endif %}">{{ child.title }}</a> |
| 21 | + </li> |
| 22 | + {% endfor %} |
| 23 | + </ul> |
10 | 24 | </li> |
11 | | - {% endif %} |
12 | | - {% endfor %} |
| 25 | + {% else %} |
| 26 | + <li class="navigation--item"> |
| 27 | + <a class="page-link" href="{% if item.url contains '://' %}{{ item.url }}{% else %}{{ item.url | relative_url }}{% endif %}">{{ item.title }}</a> |
| 28 | + </li> |
| 29 | + {% endif %} |
13 | 30 | {% endfor %} |
14 | | - </ol> |
| 31 | + </ul> |
15 | 32 | <a href="#header" class="navigation--close"><span class="sr-only">Back to content</span></a> |
16 | 33 | </nav> |
17 | 34 |
|
18 | 35 | <script> |
19 | 36 | (function (window, document) { |
| 37 | + var nav = document.getElementById('navigation'); |
| 38 | + if (!nav) return; |
| 39 | + |
20 | 40 | var close_button = document.getElementsByClassName('navigation--close')[0]; |
21 | | - close_button.addEventListener('click', function go_back (event) { |
22 | | - window.history.back(); |
| 41 | + if (close_button) { |
| 42 | + close_button.addEventListener('click', function () { |
| 43 | + window.history.back(); |
| 44 | + }); |
| 45 | + } |
| 46 | + |
| 47 | + var toggles = nav.querySelectorAll('.navigation--submenu-toggle'); |
| 48 | + |
| 49 | + function close_all (except) { |
| 50 | + for (var i = 0; i < toggles.length; i++) { |
| 51 | + if (toggles[i] !== except) { |
| 52 | + toggles[i].setAttribute('aria-expanded', 'false'); |
| 53 | + } |
| 54 | + } |
| 55 | + } |
| 56 | + |
| 57 | + for (var i = 0; i < toggles.length; i++) { |
| 58 | + toggles[i].addEventListener('click', function (event) { |
| 59 | + event.stopPropagation(); |
| 60 | + var expanded = this.getAttribute('aria-expanded') === 'true'; |
| 61 | + close_all(this); |
| 62 | + this.setAttribute('aria-expanded', expanded ? 'false' : 'true'); |
| 63 | + }); |
| 64 | + } |
| 65 | + |
| 66 | + document.addEventListener('click', function (event) { |
| 67 | + if (!nav.contains(event.target)) close_all(null); |
| 68 | + }); |
| 69 | + |
| 70 | + document.addEventListener('keydown', function (event) { |
| 71 | + if (event.key === 'Escape' || event.key === 'Esc') close_all(null); |
23 | 72 | }); |
24 | 73 | })(window, document); |
25 | 74 | </script> |
0 commit comments