change menu label when opened
This commit is contained in:
parent
8d25a26642
commit
96353dc14c
@ -8,8 +8,8 @@
|
|||||||
</a>
|
</a>
|
||||||
<button class="menu-toggle" onclick="menuToggle(this)" title="ouvrir / fermer le menu">
|
<button class="menu-toggle" onclick="menuToggle(this)" title="ouvrir / fermer le menu">
|
||||||
<svg id="icon-show" aria-hidden="true" width="32" height="32" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13 10h12M6 16h19m-15 6h15" stroke="#111" stroke-width="2" stroke-linecap="round"/></svg>
|
<svg id="icon-show" aria-hidden="true" width="32" height="32" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13 10h12M6 16h19m-15 6h15" stroke="#111" stroke-width="2" stroke-linecap="round"/></svg>
|
||||||
<svg id="icon-close" aria-hidden="true" width="32" height="32" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M25 7L6 24m19 0L6 7" stroke="#111" stroke-width="2" stroke-linecap="round"/></svg>
|
<svg id="icon-close" aria-hidden="true" width="32" height="32" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M25.5 7l-19 17m19 0L6.5 7" stroke="#111" stroke-width="2" stroke-linecap="round"/></svg>
|
||||||
<span>menu</span>
|
<span class="menu-toggle__label">menu</span>
|
||||||
</button>
|
</button>
|
||||||
{% set ariaLabel = 'navigation' %}
|
{% set ariaLabel = 'navigation' %}
|
||||||
{% include "partials/components/nav.njk" %}
|
{% include "partials/components/nav.njk" %}
|
||||||
|
@ -4,8 +4,10 @@ function menuToggle(elm) {
|
|||||||
if (menu.classList.contains('show')) {
|
if (menu.classList.contains('show')) {
|
||||||
elm.querySelector('#icon-show').style.display = 'none';
|
elm.querySelector('#icon-show').style.display = 'none';
|
||||||
elm.querySelector('#icon-close').style.display = 'inline';
|
elm.querySelector('#icon-close').style.display = 'inline';
|
||||||
|
elm.querySelector('.menu-toggle__label').textContent = 'fermer';
|
||||||
} else {
|
} else {
|
||||||
elm.querySelector('#icon-show').style.display = 'inline';
|
elm.querySelector('#icon-show').style.display = 'inline';
|
||||||
elm.querySelector('#icon-close').style.display = 'none';
|
elm.querySelector('#icon-close').style.display = 'none';
|
||||||
|
elm.querySelector('.menu-toggle__label').textContent = 'menu';
|
||||||
}
|
}
|
||||||
}
|
}
|
@ -51,6 +51,7 @@
|
|||||||
+ .menu-toggle {
|
+ .menu-toggle {
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
background-color: var(--color-white);
|
background-color: var(--color-white);
|
||||||
border: 0;
|
border: 0;
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
|
Loading…
Reference in New Issue
Block a user