Responsive Navigation mit Flex&Target

[Rolf B]

Hallo ShareThePain,

die Pseudoklasse :target ermöglicht Dir, im CSS auf die ID zu reagieren, die in der URL hinter # angegeben wird (auch Hash-Teil der URL genannt).

Also: Irgendein Link führt auf https://example.com/test.html#chapter_1. In test.html hast Du irgendwo stehen:

<h2 id="chapter_1">
<p>...</p>

Dann kannst Du mit :target im CSS erreichen, dass eine so angesprungene Überschrift hervorgehoben wird:

h2:target {
   background-color: yellow;
}

Man kann das für ein Dropdown-Menü einsetzen missbrauchen:

<nav>
<a href="#menu">≡</a>
<ul id="menu">
<li><a href="...">Item 1</a></li>
<li><a href="...">Item 2</a></li>
<li><a href="...">Item 3</a></li>
</ul>
</nav>

#menu { display: none; }
#menu:target { display: block; }

Aber diese Vorgehensweise ist falsch. Weil das a Element zweckentfremdet wird. Darauf hat Gunnar schon hingewiesen. Das ist kein Link. Da gehört ein Button hin. Man könnte nun einen Button machen, der per JavaScript location.hash auf "#menu" setzt. Aber dann bist Du doch bei JavaScript, und kannst gleich ein anständiges JavaScript-Menü bauen, ohne bei jedem Öffnen des Menüs die Browser-History vollzumüllen.

Rolf