Icon Flyout / slidern ähnlich wie bei meiner Navigation

[einsiedler]

Bedeutet also das der Button eine ID benötigt?

Damit man ihn per Skip-Link anspringen kann, ja.

GUT. Danke.

Der Esel-Icon wird nun sanft geslidet. Nun habe ich noch folgende Zeile hinzugefügt:

.flyout-box [aria-expanded="false"] ~ .flyout-content {
		visibility: hidden;
}

Was jetzt speziell NUR für die TAB-Funktion wichtig ist, das dieser Inhalt eben nicht "mitgetabbt" wird wenn er unsichtbar ist.

Finde ich ein wenig blöd wenn das icon zu ihrer Urposition zurückslidert das der Inhalt sofort "weg" ist. Wenn es eine bessere Möglichkeit "gäbe" wäre ich froh, ansonsten gewöhne ich mich daran.

Das PROBLEM bleibt jetzt nur: Das HAUPTMENÜ

Dieser slidet nun NICHT aus. Woran liegt es.

Kann es sein das die ID "toggle" nur EINMAL verwendet werden darf?

Und genau das funktioniert bisher nur für den Icon.

Wären eventuell zwei UNTERSCHIEDLICHE ID`s angebracht.

Meinetwegen: Icon-toggle und Menue-toggle oder so?

Was mache ich aber nun beim js?

document.addEventListener('DOMContentLoaded', function () {

		flyoutExtension();
	
function flyoutExtension () {
	const menu = document.querySelector('nav ul');
	menu.insertAdjacentHTML('beforebegin', ``);
	menu.classList.add('menu');

	const toggle = document.querySelector('#icon-toggle');
	toggle.addEventListener('click', function() {
		const currentState = toggle.getAttribute('aria-expanded');
		const newState = currentState === 'true' ? 'false' : 'true';
		toggle.setAttribute('aria-expanded', newState);
		const isExpanded = toggle.getAttribute('aria-expanded') === 'true';
        menu.style.display = isExpanded ? 'block' : 'none';
	});

const toggle = document.querySelector('#menue-toggle');
	toggle.addEventListener('click', function() {
		const currentState = toggle.getAttribute('aria-expanded');
		const newState = currentState === 'true' ? 'false' : 'true';
		toggle.setAttribute('aria-expanded', newState);
		const isExpanded = toggle.getAttribute('aria-expanded') === 'true';
        menu.style.display = isExpanded ? 'block' : 'none';
	});
	
}
 const cssRules = ``;

	const stylesheet = document.createElement('style');
	stylesheet.textContent = cssRules;
	document.querySelector('html > head').appendChild(stylesheet);		

});

Nehme stark an das das falsch ist. oder doch nicht?

liegt es am JS?

Mit der Bitte um Hilfe.

der einsiedelnde