Hello,
The rendering isn't exactly like the one on the site, especially on small screens, because I had to redo all the code and I don't have enough time to fine-tune it. But I've tried to get close.
main_menu_head.html
:
Code: Select all
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Figtree:ital@0;1&display=swap" rel="stylesheet">
{% INCLUDECSS 'main_menu.css' %}
{% INCLUDEJS 'main_menu.js' %}
main_menu_.html
:
Code: Select all
<nav class="main-menu-wrap" aria-label="Main menu">
<button id="menu_toggle_button" class="toggle-button" aria-expanded="false" aria-controls="main_navlinks" aria-label="Open the menu">
<svg class="svg-open" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" focusable="false"><rect x="4" y="7.5" width="16" height="1.5"></rect><rect x="4" y="15" width="16" height="1.5"></rect></svg>
<svg class="svg-close" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" focusable="false"><path d="M13 11.8l6.1-6.3-1-1-6.1 6.2-6.1-6.2-1 1 6.1 6.3-6.5 6.7 1 1 6.5-6.6 6.5 6.6 1-1z"></path></svg>
</button>
<ul id="main_navlinks" class="main-menu-list main-navlinks">
<li>
<a href="https://dawnofthenightingales.com/"><span>Home</span></a>
</li>
<li class="has-child">
<a><span>About</span></a>
<button aria-label="About submenu" class="submenu-toggle" aria-expanded="false" aria-controls="about_submenu">
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none" aria-hidden="true" focusable="false"><path d="M1.50002 4L6.00002 8L10.5 4" stroke-width="1.5"></path></svg>
</button>
<ul id="about_submenu" class="main-menu-sub-list">
<li><a href="https://dawnofthenightingales.com/nightingales/">Nightingales</a></li>
<li><a href="https://dawnofthenightingales.com/aboutmecfs/">ME/CFS</a></li>
<li><a href="https://dawnofthenightingales.com/aboutfibro/">Fibro</a></li>
</ul>
</li>
<li class="has-child">
<a><span>Support</span></a>
<button aria-label="Support submenu" class="submenu-toggle" aria-expanded="false" aria-controls="support_submenu">
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none" aria-hidden="true" focusable="false"><path d="M1.50002 4L6.00002 8L10.5 4" stroke-width="1.5"></path></svg>
</button>
<ul id="support_submenu" class="main-menu-sub-list">
<li><a href="https://dawnofthenightingales.com/mecfssupport/">ME/CFS</a></li>
<li><a href="https://dawnofthenightingales.com/fibrosupport/">Fibro</a></li>
<li><a href="https://dawnofthenightingales.com/carerssupport/">Carers</a></li>
<li><a href="https://dawnofthenightingales.com/financialsupport/">Financial</a></li>
<li><a href="https://dawnofthenightingales.com/aidsandgadgets/">Aids and Gadgets</a></li>
<li><a href="https://dawnofthenightingales.com/carerhomehelp/">Carer/Home Help</a></li>
<li><a href="https://dawnofthenightingales.com/mentalhealth/">Mental Health</a></li>
</ul>
</li>
<li>
<a href="https://dawnofthenightingales.com/blog/">
<span>Blog</span>
</a>
</li>
<li>
<a href="https://dawnofthenightingales.com/events/">
<span>Events</span>
</a>
</li>
<li class="has-child">
<a><span>Extras</span></a>
<button aria-label="Extras submenu" class="submenu-toggle" aria-expanded="false" aria-controls="extras_submenu">
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none" aria-hidden="true" focusable="false"><path d="M1.50002 4L6.00002 8L10.5 4" stroke-width="1.5"></path></svg>
</button>
<ul id="extras_submenu" class="main-menu-sub-list">
<li><a href="https://dawnofthenightingales.com/downloads/">Downloads</a></li>
</ul>
</li>
<li>
<a href="{{ U_INDEX }}" aria-current="page">
<span>Forum</span>
</a>
</li>
</ul>
<ul class="main-menu-list social-navlinks">
<li>
<a href="https://www.facebook.com/groups/dawnofthenightingales/">
<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"><path d="M12 2C6.5 2 2 6.5 2 12c0 5 3.7 9.1 8.4 9.9v-7H7.9V12h2.5V9.8c0-2.5 1.5-3.9 3.8-3.9 1.1 0 2.2.2 2.2.2v2.5h-1.3c-1.2 0-1.6.8-1.6 1.6V12h2.8l-.4 2.9h-2.3v7C18.3 21.1 22 17 22 12c0-5.5-4.5-10-10-10z"></path></svg>
<span class="sr-only">Facebook Group</span>
</a>
</li>
</ul>
</nav>
main_menu.css
:
Code: Select all
.main-menu-wrap {
color: #202220;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 24px;
justify-content: center;
line-height: 1.7;
padding: 8px 20px 20px;
}
.main-menu-wrap a {
color: inherit;
text-decoration: none;
}
.toggle-button {
display: none;
}
.toggle-button:focus-visible,
.submenu-toggle:focus-visible {
outline: 2px solid #0060df;
}
.main-menu-list > li {
align-items: center;
display: flex;
position: relative;
}
/*
Main menu
--------------------------------------------------------------------------- */
.main-navlinks {
display: flex;
font-family: "Figtree", sans-serif;
font-optical-sizing: auto;
font-weight: 400;
font-size: 18px;
font-style: normal;
gap: 32px;
}
/*
Sub menus
--------------------------------------------------------------------------- */
.main-menu-list .has-child > ul > li > a {
padding: .5em 1em;
}
.main-menu-list .submenu-toggle {
align-self: center;
background-color: inherit;
border: none;
color: currentColor;
cursor: pointer;
display: inline-block;
font-size: inherit;
height: .6em;
line-height: 0;
margin-left: .25em;
padding: 0;
width: .6em;
}
.main-menu-list .submenu-toggle svg {
display: inline-block;
stroke: currentColor;
height: inherit;
margin-top: .075em;
width: inherit;
}
.main-menu-sub-list {
background-color: #fff;
border: 1px solid rgba(0, 0, 0, 0.15);
align-items: normal;
display: flex;
flex-direction: column;
height: 0;
opacity: 0;
overflow: hidden;
position: absolute;
top: 100%;
transition: opacity .1s linear;
visibility: hidden;
width: 0;
z-index: 2;
list-style: none;
left: auto;
right: 0;
}
.main-menu-list .has-child:hover > ul,
.main-menu-list .submenu-toggle:hover + ul,
.is-open {
height: auto;
min-width: 200px;
opacity: 1;
overflow: visible;
visibility: visible;
width: auto;
}
/*
Social links
--------------------------------------------------------------------------- */
.social-navlinks {
font-size: 24px;
gap: 20px;
}
.social-navlinks a {
align-items: center;
display: flex;
line-height: 0;
transition: transform .1s ease;
}
.social-navlinks a:hover {
transform: scale(1.1);
}
.social-navlinks a svg {
height: 1em;
width: 1em;
}
/*
Media queries
--------------------------------------------------------------------------- */
@media (max-width: 700px) {
.main-menu-wrap {
padding-top: 20px;
}
.main-menu-wrap:has(.is-open) {
background-color: #fff0e9;
}
.toggle-button {
display: flex;
}
.main-navlinks {
display: none;
}
.main-navlinks.is-open {
display: flex;
width: 100%;
flex-direction: column;
gap: 24px;
font-size: 24px;
padding-top: calc(2rem + 24px);
animation: menu-animation .1s ease-out;
}
.main-navlinks.is-open > li {
flex-direction: column;
align-items: start;
}
.toggle-button .svg-close {
display: none;
}
.toggle-button[aria-expanded="true"] {
position: absolute;
top: 0.5rem;
right: 0.5rem;
z-index: 1000;
}
.toggle-button[aria-expanded="true"] .svg-close {
display: initial;
}
.toggle-button[aria-expanded="true"] .svg-open {
display: none;
}
.is-open .has-child > a {
color: #6c6c6c;
}
.main-menu-list .has-child > ul {
position: static;
background-color: inherit;
padding-left: 10vw;
border: 0;
visibility: visible;
width: auto;
opacity: 1;
height: auto;
}
.main-menu-list .has-child > ul > li > a {
padding: 0.5em 0;
}
.main-menu-list .submenu-toggle {
display: none;
}
.is-open + .social-navlinks {
display: none;
}
}
/*
Keyframes
--------------------------------------------------------------------------- */
@keyframes menu-animation {
from {
opacity: 0;
transform: translateY(.5em)
}
to {
opacity: 1;
transform: translateY(0)
}
}
main_menu.js
:
Code: Select all
(function ($) {
const $mainMenuButton = $('#menu_toggle_button');
const $mainMenuList = $('#' + $mainMenuButton.attr('aria-controls'));
const $subMenuButtons = $('.submenu-toggle');
const $subMenuLists = $('.main-menu-sub-list');
// Toggle state of a menu
function toggleMenu($button, $menu) {
const isOpen = $menu.hasClass('is-open');
$button.attr('aria-expanded', !isOpen);
$menu.toggleClass('is-open');
if ($button.is($mainMenuButton)) {
$mainMenuButton.attr('aria-label', isOpen ? 'Open the menu' : 'Close the menu');
}
}
// Init sub-menu status based on viewport size
function initMenuState() {
const isMobileView = window.matchMedia("(max-width: 700px)").matches;
$subMenuLists.toggleClass('is-open', isMobileView);
$subMenuButtons.attr('aria-expanded', isMobileView);
}
// Main menu handler
$mainMenuButton.on('click', function () {
toggleMenu($(this), $mainMenuList);
});
// Sub-menu handler
$subMenuButtons.on('click', function (e) {
e.preventDefault();
const $thisButton = $(this);
const $thisMenu = $('#' + $thisButton.attr('aria-controls'));
if (!window.matchMedia("(max-width: 700px)").matches) {
// Close other sub-menus if not in mobile view
$subMenuLists.not($thisMenu).removeClass('is-open');
$subMenuButtons.not($thisButton).attr('aria-expanded', 'false');
}
toggleMenu($thisButton, $thisMenu);
});
// Keyboard interaction for closing menus
$(document).on('keydown', function (e) {
if (e.key === "Escape") {
// Close main menu
if ($mainMenuList.hasClass('is-open')) {
$mainMenuButton.trigger('focus');
toggleMenu($mainMenuButton, $mainMenuList);
}
// Close sub-menu
$subMenuLists.filter('.is-open').each(function () {
const $thisSubList = $(this);
const $thisSubButton = $('[aria-controls="' + $thisSubList.attr('id') + '"]');
$thisSubButton.trigger('focus');
toggleMenu($thisSubButton, $thisSubList);
});
}
});
// Update aria attributes on resize
$(window).on('resize', initMenuState);
// Init menu state on loading
initMenuState();
})(jQuery);