Problem beim Erstellen eines Footers mit Copyright, Impressum und Datenschutz

[Gunnar Bittersmann]

@@Michael53

Dieses Navigationsmenü hab ich von einem Video nachgebaut

Bau es lieber von einem Tutorial nach, das ich zu meinem verlinkten Beispiel geschrieben habe. Allerdings musst du dazu in die Zukunft reisen – ich hoffe, in nicht allzu ferne. 😉

und es funktioniert auch so wie es soll.

Für dich mag es das (gegenwärtig noch) tun. Für andere – insb. Nutzer, die auf Screenreader angewiesen sind – funktioniert es nicht. Die wissen ja nichts von dem Font-Awesome-Icon, und ein entsprechender Text fehlt. Außerdem wird die Schaltfläche nicht als Button, sondern als Checkbox angesagt, was zu Verwirrung führen dürfte.

Ich hab da einfach keine Ahnung wie man das am besten umsetzen kann.

So wie in meinem gezeigten Beispiel. Bei dir wäre das so:

<nav>
  <button>
		<i class="fas fa-ellipsis-h"></i>
		<span class="visually-hidden">Menü öffnen/schließen</span>
  </button>
	<ul class="menu">
		<li><a href="index.html">Home</a></li>
		<li><a href="#">Über mich</a></li>
		<li><a href="fotos.html">Fotos</a></li>
		<li><a href="#">Panoramen</a></li>
		<li><a href="#">Videos</a></li>
		<li><a href="#">Kontakt</a></li>
	</ul>
</nav>

(Die fehlenden li hab ich korrigiert, die Verwendung des Iconfonts nicht.)

Das JavaScript solltest du von mir übernehmen können. Die Stile für .visually-hidden (Element wird nicht visuell angezeigt, aber vom Screenreader vorgelesen) findest du auch in jenem Pen:

.visually-hidden
{
	position: absolute !important;
	clip: rect(1px, 1px, 1px, 1px);
	padding: 0 !important;
	border: 0 !important;
	height: 1px !important;
	width: 1px !important;
	overflow: hidden;
	white-space: nowrap;
}

Statt „Menü öffnen/schließen“ könnte auch einfach nur „Menü“ reichen. Wenn du zwei getrennte Buttons „Menü öffnen“ und „Menü schließen“ haben willst, brauchst du ein zusätzliches div, in welches du die ul und den Schließen-Button hineinpackt, und müsstest das JavaScript evtl. etwas anpassen.

Wenn du das Menü auch auf großen Viewport nicht ausklappen willst (warum eigentlich nicht?), die media queries weglassen.

LLAP 🖖