nicht angemeldet Felix Riesterer
Gunnar Bittersmann
Felix Riesterer
JürgenB
Gunnar Bittersmann
JürgenB
Der Martin
Rolf B
Ich verstehe nicht wie ich Target für eine responsive Toggle-Navigation verwenden kann und was dabei im Hintergrund passiert. Kann mir jemand das anhand meines Codebeispieles erklären ?
Matthias Scharwies<nav>
<div class="logo">test_nav</div>
<div class="nav_links">
<ul>
<li><a href="#">test</a></li>
<li><a href="#">test</a></li>
</ul>
</div>
<a class="button" href="#">
<span class="bars"></span>
<span class="bars"></span>
<span class="bars"></span>
</a>
</nav>
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
nav {
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
background-color: #191919;
color: #ccc;
}
.logo {
margin: .7rem;
}
.nav_links {
height: 100%;
}
.nav_links ul {
display: flex;
margin: 0;
padding: 0;
}
.nav_links li a {
display: block;
text-decoration: none;
padding: 1rem;
}
.nav_links li {
list-style: none;
}
.button {
position: absolute;
display: none;
top: 1rem;
right: 1rem;
flex-direction: column;
justify-content: space-between;
width: 30px;
height: 21px;
}
.bars {
height: 3px;
width: 100%;
background-color: #ccc;
}
/*responsive Elemente*/
@media only screen and (max-width: 800px) {
nav {
flex-direction: column;
align-items: flex-start;
}
.button {
display: flex;
}
.nav_links {
display: none;
}
}
Liebe(r) ShareThePain,
Kann mir jemand das anhand meines Codebeispieles erklären ?
nö, denn da finde ich nichts, was irgendwie mit "Target" zu tun hätte.
Liebe Grüße
Felix Riesterer
Ich meine wie von den Beispiel ausgehend eine Toggle-Navigation mit Target realisiert werden kann. Die weiteren erforderlichen Schritte sind mir nicht geläufig.
Liebe(r) ShareThePain,
Ich meine wie von den Beispiel ausgehend eine Toggle-Navigation mit Target realisiert werden kann. Die weiteren erforderlichen Schritte sind mir nicht geläufig.
welche Beispiele meinst Du da? Von Deinem Code ausgehend wird mir nicht klar, was Du willst.
Und warum bestehst Du darauf, dass das irgendetwas mit "Target" zu tun hätte? Was meinst Du mit Target genau? Eine amerikanische Supermarktkette?
Liebe Grüße
Felix Riesterer
Servus!
Liebe(r) ShareThePain,
Ich meine wie von den Beispiel ausgehend eine Toggle-Navigation mit Target realisiert werden kann. Die weiteren erforderlichen Schritte sind mir nicht geläufig.
welche Beispiele meinst Du da? Von Deinem Code ausgehend wird mir nicht klar, was Du willst.
Ich glaube, dass er den :target-Selektor meint. Wir hatten da mal ein Beispiel für eine Single-Page-Webseite, die wir aus gutem Grund depubliziert hatten.
Warum? Ein mehrfaches Klicken auf interne Links versaut die Browser-Historie und ein Klick auf die Zurück-Taste bringt einen zum vorherigen Zustand und nicht zur letzten Seite.
Eine Toggle-Navigation haben wir hier (noch) nicht anzubieten.
Ich würde die Variante mit JavaScript empfehlen:
Herzliche Grüße
Matthias Scharwies
Hallo,
welche Beispiele meinst Du da? Von Deinem Code ausgehend wird mir nicht klar, was Du willst.
Ich glaube, dass er den :target-Selektor meint. Wir hatten da mal ein Beispiel für eine Single-Page-Webseite, die wir aus gutem Grund depubliziert hatten.
aus welchem guten Grund? Mir fällt eigentlich keiner ein.
Ich verwende das zum Beispiel firmenintern gern als schlanke Alternative zu Powerpoint.
Warum? Ein mehrfaches Klicken auf interne Links versaut die Browser-Historie
Nein. Jeder Klick auf einen (internen) Link hinterlässt einen Eintrag in der Browser History. Das ist auch gut so.
und ein Klick auf die Zurück-Taste bringt einen zum vorherigen Zustand und nicht zur letzten Seite.
Das ist aber vor allem in einem One-Pager in Verbindung mit :target genau das erwartete Verhalten: Bring mich dorthin zurück, wo ich mit dem letzten Link abgebogen bin.
Live long and pros healthy,
Martin
Lieber Matthias,
Ich glaube, dass er den :target-Selektor meint.
diese Vermutung hatte ich auch schon. Aber dass er das nicht genauer benennen kann zeugt für mich davon, dass an der Stelle weiterführende Hinweise noch keinen Sinn haben, da ich davon ausgehen muss, dass er diese noch nicht gebrauchen kann. Er schrieb ja auf meine Provokation hin:
"Ich habe angefangen eins responsive Toggle-Navigation zu coden welche ich nur mit CSS realisieren möchte."
Da war also entweder ein Unwille, das genauer zu formulieren (wozu sollten dann aber wir hier?), oder ein Unverständnis hinter der Technik (z.B. wie man den :target-Selektor einsetzen kann).
Gunnar hat ja gleich geschrieben, dass dieser Weg ein Irrweg ist. Aber das war an der Stelle wohl noch nicht einzusehen, weil der Überblick über die vorliegende Technik (oder die Absicht sie so einzusetzen) fehlte.
Liebe Grüße
Felix Riesterer
@@ShareThePain
Ich verstehe nicht wie ich Target für eine responsive Toggle-Navigation verwenden kann
Gar nicht.
(Und falls hier noch jemand mit einer solchen „Lösung“ aufschlagen sollte, dann ist das gewiss keine Lösung, weil nicht von allen bedienbar.)
<a class="button" href="#"> <span class="bars"></span> <span class="bars"></span> <span class="bars"></span> </a>
Ein sicheres Zeichen, dass ein a-Element hier falsch ist. Links führen zu anderen Stellen im Web (oder auf der aktuellen Seite).
Für Schaltflächen, die Aktionen auf der Seite auslösen sollen (bspw. das Öffnen/Schließen eines Menüs), ist button zu verwenden.
Drei spans, um ein Hamburger-Icon zusammenzubauen?? Nicht wirklich, oder?
Verwende SVG oder ein Zeichen wie ≡ U+2261. Aber mit barrierefreier Beschriftung:
<button aria-label="Menü">≡</button>
😷 LLAP
Wie kann ich dann sonst eine Toggle-Navigation nur mit CSS realisieren ?
„nicht wirklich“
Geht das auch weniger polemisch angesichts der Tatsache, dass ich das schlichtweg nicht gewusst habe ?
Liebe(r) ShareThePain,
Geht das auch weniger polemisch angesichts der Tatsache, dass ich das schlichtweg nicht gewusst habe ?
die Polemik hast Du selbst provoziert.
Liebe Grüße
Felix Riesterer
Ich habe die Polemik provoziert indem ich einen Fehler gemacht habe ? Interessante Verhaltensweise anderen gegenüber.
Mit :target ist offensichtlich die CSS-Klasse gemeint. Vielleicht ist ja doch jemand daran interessiert mir zu helfen.
Ich habe angefangen eins responsive Toggle-Navigation zu coden welche ich nur mit CSS realisieren möchte. Das obige Codebeispiel ist das was ich bereits habe. Jetzt weiß ich nicht wie es weiter geht. Aus irgendeinem Grund bereitet mir dieses Thema Probleme. Kann mir jemand dabei helfen den Code zu vervollständigen und mir dabei zu erklären wie das ganze funktioniert ?
Es gibt zwar viele Tutorial doch diese sind für mich nicht nachvollziehbar und oder ohne schlüssige Erklärungen.
Ich habe angefangen eins responsive Toggle-Navigation zu coden welche ich nur mit CSS realisieren möchte.
das haben schon viele versucht, ohne Erfolg, mich eingeschlossen. Warum willst du auf JavaScript verzichten?
Die „Zugängliche Dropdown Navigation“ aus dem Wiki hat Matthias ja schon verlinkt.
Gruß
Jürgen
@@ShareThePain
Mit :target ist offensichtlich die CSS-Klasse gemeint.
Pseudoklasse, um genau zu sein.
Ich habe angefangen eins responsive Toggle-Navigation zu coden welche ich nur mit CSS realisieren möchte.
Schlag dir das aus dem Kopf.
Vielleicht wird das in naher oder ferner Zukunft mal ohne JavaScript möglich sein. Dann aber ganz sicher ohne :target. Aber noch nicht heute …
Das obige Codebeispiel ist das was ich bereits habe. Jetzt weiß ich nicht wie es weiter geht.
Gar nicht. Du bist in einer Sackgasse; ga geht’s nicht weiter.
Du willst sowas in der Art?
Auch das von @Matthias Scharwies gezeigte Tutorial sieht gar nicht so schlecht aus, auch wenn das Beispiel noch einige Fehler hat.
😷 LLAP
Hallo,
Auch das von @Matthias Scharwies gezeigte Tutorial sieht gar nicht so schlecht aus, auch wenn das Beispiel noch einige Fehler hat.
magst du mir die Fehler zeigen? Dann kann ich’s korrigieren.
Gruß
Jürgen
Hallo,
Ich habe die Polemik provoziert indem ich einen Fehler gemacht habe ? Interessante Verhaltensweise anderen gegenüber.
nun ja, das ist hier ganz ähnlich wie im echten Leben.
Mit :target ist offensichtlich die CSS-Klasse gemeint.
So offensichtlich ist das nicht. Es hätte auch das target im Javascript-Eventhandling sein können. Schließlich hast du keine Kontext- oder Hintergrundinformationen gegeben.
Vielleicht ist ja doch jemand daran interessiert mir zu helfen.
Sogar einige, so wie's aussieht.
Kann mir jemand dabei helfen den Code zu vervollständigen und mir dabei zu erklären wie das ganze funktioniert ?
Oh, und nebenbei bemerkt: Du plenkst.
Live long and pros healthy,
Martin
@@Der Martin
Oh, und nebenbei bemerkt: Du plenkst.
Dafür sind aber die richtig gesetzten Anführungszeichen lobend zu erwähnen. 😉
😷 LLAP
@Der Martin Empfindest du das kritisieren meiner Interpunktion als adäquat und vor Allem als relevant im Rahmen der eigentlichen Fragestellung ?
Das pedantische fokussieren auf geringfügige Interpunktionsfehler ist aus psychiatrischer Sicht eine Ersatzhandlung. Was sagst das aus ?
Danke an Rolf der sich tatsächlich sachlich mit meinem Beitrag auseinandergesetzt hat.
Ich für meinen Teil werde in einem anderen Forum nach Hilfe suchen, das frei ist von derartig narzisstischer Lyrik.
n'Abend,
@Der Martin Empfindest du das kritisieren meiner Interpunktion als adäquat und vor Allem als relevant im Rahmen der eigentlichen Fragestellung ?
nachdem ich alles gesagt habe, was ich zum eigentlichen Thema sagen kann - ja.
Das pedantische fokussieren auf geringfügige Interpunktionsfehler ist aus psychiatrischer Sicht eine Ersatzhandlung. Was sagst das aus ?
Für mich: Dass mir auch Kleinigkeiten wichtig sind. Ist das okay? Ich finde schon.
Für dich: Dass du auch, nachdem man dich auf Fehler hinweist, immer noch an diesen Fehlern festhältst. Ist das okay? Ich finde nein, es ist lernresistent.
Ich für meinen Teil werde in einem anderen Forum nach Hilfe suchen, das frei ist von derartig narzisstischer Lyrik.
Das steht dir natürlich frei.
Live long and pros healthy,
Martin
@@ShareThePain
Das pedantische fokussieren auf geringfügige Interpunktionsfehler
Ganz ehrlich: Für mich ist das Nebenbei-Erwähnen kein „pedantisches Fokussieren“.
Und dir ist vor lauter Gram darüber entgangen, dass ich Den Martin wegen seiner ständigen Schreibfehler in meiner Antwort auch aufgezogen habe?
😷 LLAP
Hi,
Und dir ist vor lauter Gram darüber entgangen, dass ich Den Martin wegen seiner ständigen Schreibfehler in meiner Antwort auch aufgezogen habe?
das sind keine Schreibfehler - das ist eine persönliche Überzeugung. 😉
Live long and pros healthy,
Martin
Und was hat das mit dem eigentlichen Thema zu tun ? Geringe Flexibilität im Denken, geringes Selbstwertgefühl in Folge von Perfektionismus gepaart mit Narzissmus.
Warum schreibst du „Nachdem“ klein und warum verwendest du Alltagssprache in einem Text ?
Wäre das pedantisch dich darauf hinzuweisen ? Ja, das wäre es. Es wäre unangemessen weil diese Kleinigkeit in keinerlei Kontext zum Thema steht.
@Gunnaer Ich bin neu hier und kannte seine Eigenheiten noch nicht.
Eigentlich wollte ich mir erklären lassen wie eine responsive Navigation funktioniert :)
Hallo,
Und was hat das mit dem eigentlichen Thema zu tun ?
nichts, aber es ist ein Markenzeichen dieses Forums, dass du hier auch Antworten auf die Fragen bekommst, die du noch gar nicht gestellt hast und vielleicht auch gar nicht stellen wolltest.
Warum schreibst du „Nachdem“ klein
Weil es normal und üblich ist, nach einem Komma (in der Anrede) klein weiterzuschreiben.
und warum verwendest du Alltagssprache in einem Text ?
Weil das meine normale Sprache ist.
Wäre das pedantisch dich darauf hinzuweisen ? Ja, das wäre es.
Ja, vielleicht. Aber das sind Punkte, die mir bewusst sind und die durchaus Absicht sind.
Es wäre unangemessen weil diese Kleinigkeit in keinerlei Kontext zum Thema steht.
Nö, es ist keineswegs unangemessen. Nur fehl am Platze.
Live long and pros healthy,
Martin
Hallo ShareThePain,
Eigentlich wollte ich mir erklären lassen wie eine responsive Navigation funktioniert :)
ja, das wäre das Hauptanliegen. Es wäre schön, wenn ihr alle eure Nebenkriegsschauplätze befrieden könntet.
Was die Kollegen nicht klargestellt haben: „Responsiv“ ist nicht das einzige Buzzword, das einer guten Navigation angetackert werden muss. „Zugänglich“ ist das zweite. Dazu gehört das richtige Setzen und Umschalten der aria-Attribute. Und das ist derzeit nur mit JavaScript machbar.
Gunnar hatte Dir hier was dazu verlinkt. Hier ist der Link nochmal. Leider ist das Script nicht modular zur plug-and-play Wiederverwendung gekapselt. Keine Ahnung, ob das einfach möglich ist. Ich nehme an, dass Du deshalb eine CSS-only Lösung suchst, weil Du in JavaScript nicht fit genug bist.
Matthias hatte Dir als Alternative einen Artikel in unserem Wiki genannt. Der arbeitet mit den details und summary Elementen, braucht aber auch JavaScript.
Rolf
Ja genau :) Ich kenne mich mit JavaScript überhaupt nicht aus und da ich nicht gerne Codes verwende welche ich nicht verstehe habe ich nach einer HTML5&CSS3 Lösung gesucht. Scheint als bleibt mir nichts anderes übrig als es zu lernen.
Ist JavaScript schwer zu lernen beziehungsweise zu verstehen und gibt es Literatur die du mir empfehlen könntest ?
Servus!
Ja genau :) Ich kenne mich mit JavaScript überhaupt nicht aus und da ich nicht gerne Codes verwende welche ich nicht verstehe habe ich nach einer HTML5&CSS3 Lösung gesucht.
Das ist eine gute Einstellung!
Scheint als bleibt mir nichts anderes übrig als es zu lernen.
JavaScript gehört einfach dazu.
Mehr dazu: HTML/Tutorials/Trennung von Inhalt, Präsentation und Verhalten
Ist JavaScript schwer zu lernen beziehungsweise zu verstehen und gibt es Literatur die du mir empfehlen könntest ?
Head First HTML5 Programmierung
Rezension: Head First HTML5 Programming / HTML5 von Kopf bis Fuß (Du siehst HTML und JavaScript gehören engzusammen)
oder einfach unsere Tutorials:
Herzliche Grüße
Matthias Scharwies
@@ShareThePain
Wäre das pedantisch dich darauf hinzuweisen ? Ja, das wäre es.
Ich würde hier unterscheiden zwischen zufälligen Fehlern (Tippfehlern) und systematischen Fehlern (Sachen, die jemand immer wieder gleich falsch schreibt).
Wenn bei zufälligen Fehlern was Kurioses rauskommt, kann man mal einen Scherz drüber machen (Beispiel). Ansonsten sind sie keiner Rede wert.
Anders bei systematischen Fehlern. Ich hatte eine Zeitlang ein bestimmtes Wort immer wieder falsch geschrieben, bis mich jemand (möglich, dass es Der Martin war) darauf hinwies – worüber ich dankbar war.
Ich bin neu hier und kannte seine Eigenheiten noch nicht.
Das ist weniger eine Eigenheit von Dem Martin als eine Eigenheit dieses Forums.
Wenn du das akzeptierst und dich daran gewöhnst, kannst du hier viel lernen – auch über Dinge, nach denen du niemals gefragt hättest.
Eigentlich wollte ich mir erklären lassen wie eine responsive Navigation funktioniert :)
Was genau meinst du eigentlich mit „responsiver Navigation“?
Sichtbare Navigationspunkte bei „viel Platz“, Hamburger-Menü bei „wenig Platz“? Achtung: Das ist nicht der Weisheit letzter Schluss. Das Beispiel hat noch den Fehler, dass das Hamburger-Menü beim Raustabben (Bedienung mit Tab-Taste) nicht schließt bzw. dass kein focus trap implementiert ist, sodass man gar nicht raustabben kann.
Da steht bei dem zuvor Gezeigtem schon mehr Gehirnschmalz drin.
😷 LLAP
@@Der Martin
das sind keine Schreibfehler - das ist eine persönliche Überzeugung. 😉
Mit dem Argument könnte jemand genausogut der persönlichen Überzeugung sein, vor ein Fragezeichen gehöre ein Leerzeichen. 🤨
Ganze Völkerscharen sind dieser Überzeugung. Im Französischen ist ein (nicht umbrechendes!) Leerzeichen vor ? (!, ») richtig; im Deutschen nicht.
BTW, auch ein Bindestrich zwischen Leerzeichen ist ein Schreibfehler – da gehört ein Gedankenstrich hin.
😷 LLAP
Moin,
das sind keine Schreibfehler - das ist eine persönliche Überzeugung. 😉
Mit dem Argument könnte jemand genausogut der persönlichen Überzeugung sein, vor ein Fragezeichen gehöre ein Leerzeichen. 🤨
ja, und doch ist das ein kleiner Unterschied. Ich habe in den späten 80ern oder frühen 90ern irgendwann für mich beschlossen, Interpunktionszeichen nur aus dem ASCII-Bereich zu verwenden. Damals war das auch kaum anders möglich, denn mehr als ASCII war auf vielen Systemen nicht verfügbar. Und dabei bin ich einfach bis heute geblieben.
Und ja, das ist eine persönliche "Macke", zu der ich auch stehe. Ebenso wie die, bei Zahlen grundsätzlich einen Punkt als Dezimaltrennzeichen zu verwenden[1]. Auch in DE.
Ganze Völkerscharen sind dieser Überzeugung. Im Französischen ist ein (nicht umbrechendes!) Leerzeichen vor ? (!, ») richtig; im Deutschen nicht.
Ich weiß. Französisch hat sowieso einige Eigentümlichkeiten. Zum Beispiel auch, dass die Guillemets (also das, was die Franzosen als Anführungszeichen verwenden) nicht nach innen, sondern nach außen zeigen.
BTW, auch ein Bindestrich zwischen Leerzeichen ist ein Schreibfehler – da gehört ein Gedankenstrich hin.
Bei eingeschränktem Zeichenvorrat (wie es z.B. bei traditionellen Schreibmaschinen der Fall war, oder wenn eben nur ASCII zur Verfügung steht), wird ein Bindestrich gerade dadurch zum Gedankenstrich, dass er zwischen zwei Leerzeichen steht.
Deswegen fällt es mir auch immer unangenehm auf, wenn Leute eigentlich einen Bindestrich setzen wollen (etwa bei Komposita), diesen dann aber mit Leerzeichen einrahmen. Denn dann verbindet er nicht, sondern betont eher die Trennung.
Live long and pros healthy,
Martin
Was übrigens in der Mittel- und Oberstufe (80er Jahre) auch meine Mathelehrer angesichts der zunehmenden Populartät von Computern widerspruchslos akzeptiert haben. ↩︎
@@Der Martin
Ebenso wie die [Macke], bei Zahlen grundsätzlich einen Punkt als Dezimaltrennzeichen zu verwenden.
Die Macke kenn ich.
Französisch hat sowieso einige Eigentümlichkeiten. Zum Beispiel auch, dass die Guillemets (also das, was die Franzosen als Anführungszeichen verwenden) nicht nach innen, sondern nach außen zeigen.
Das ist auch im Deutschen so – wenn es in der Schweiz geschrieben wird. Dann allerdings ohne Leerzeichen dazwischen.
Bei eingeschränktem Zeichenvorrat (wie es z.B. bei traditionellen Schreibmaschinen der Fall war, oder wenn eben nur ASCII zur Verfügung steht)
Bei dicktengleichen Schriften (Schreibmaschine) ist kaum ein Unterschied zwischen Bindestrich und Gedankenstrich. Nur verwenden wir heute kaum dicktengleiche Schriften für Fließtext, und bei Proportionalschriften sieht ein als Gedankenstrich missbrauchter Bindestrich halt falsch aus, weil zu kurz.
Und „wenn eben nur ASCII zur Verfügung steht“ ist ein Fall, der im Jahr 2021 nirgendwo mehr vorkommen sollte.
😷 LLAP
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