nicht angemeldet
Menü-Manipulation via CSS
0 
Rolf B
0 1 Rolf B
0 
Gunnar Bittersmann
Menü-Manipulation via CSS
Hallo zusammen,
ich stehe vor dem folgenden Problem. Es wird eine Navigation automatisch und zur Laufzeit als liste (<li></li>) generiert und via CSS wie folgt dargestellt :
<ul>
<li>Home</li>
<li>Erste Seite</li>
<li>Zweite Seite</li>
<li>Dritte Seite</li>
<li>Vierte Seite</li>
<li>Fünfte Seite</li>
<li>Sechste Seite</li>
</ul>
Home > Erste Seite > Zweite Seite > Dritte Seite > Vierte Seite > Fünfte Seite > Sechste Seite
Nun muss die Navigation ab einer gewissen Länge ungefähr Mittig verkürzt und durch drei Punkten ersetzt werden.
Home > Erste Seite > ... > Fünfte Seite > Sechste Seite
Wenn man dann über die drei Punkten fährt, müssen die bereits verkürzten Navigationselemente als Menü aufklappen. Ist das via CSS möglich? Hat jemand eine Idee dazu?
Danke im Voraus
-
Hallo Beginner,
das könnte mit der Pseudoklasse :hover auf dem ul-Element lösbar sein. Aber es ist nur eine Scheinlösung, denn nun beginnt die große weite Welt jenseits des "Desktop-mit-Maus" Tellerrands.
- Du musst darauf achten, dass die "..." Verkürzung vor einem Screenreader versteckt wird
- Ist deine "..." Verkürzung responsiv? Versteckt sie auf schmalen Viewports genug, und zeigt sie auf breiten Viewports alles, was geht? Dieses Problem hast Du auch auf Desktops, wenn Du schmale und breite Fenster erzeugst. Was passiert, wenn Du das Fenster verbreiterst (oder ein Smartphone von Portrait auf Landscape-Format drehst), dann muss sich die ... Verkürzung anpassen.
- Was machst Du mit unbemausten Anwendern?
- Bei Tastaturanwendern hilft Dir ggf. in aktuellen Browsern die Pseudoklasse :focus-within weiter.
- Bei Touchscreen-Anwendern wird es schwieriger. Wie klappen die die 3 Punkte auf?
Ich denke, dafür brauchst Du eine fette Prise JavaScript. Willst Du Dir das antun? Hier stellen wir eine zugängliche Dropdown-Navigation vor. Das ist nicht genau das, was du suchst (weil Du ja <li> in ein Dropdown verschieben willst), aber zumindest eine Kostprobe, was auf Dich zukommen könnte.
Rolf
--
sumpsi - posui - obstruxi-
Hallo Rolf,
danke.
Ist deine "..." Verkürzung responsiv?
Die Länge soll ja aufgrund der Verkürzung fast immer gleich, z.B. 200px, bleiben. Das heißt, man sieht immer nur den ersten und den letzten zwei Einträge. Der Rest verbirgt sich hinter dem "..." als Untermenü.
Versteckt sie auf schmalen Viewports genug, und zeigt sie auf breiten Viewports alles, was geht?
Bei weniger als z.B. 200px soll alles angezeigt werden.
Was passiert, wenn Du das Fenster verbreiterst (oder ein Smartphone von Portrait auf Landscape-Format drehst), dann muss sich die ... Verkürzung anpassen.
Die Anwendung ist nicht für Smartphones konzipiert und wird hauptsächlich auf dem Desktop oder höchstens Touchscreen bedient.
Aber du hast vollkommen Recht. Das Ganze ist nicht leicht zu realisieren und man muss entweder auf irgendwelche Bibliotheken von Drittanbietern nehmen oder halt Javacript einsetzen, womit ich meine Probleme habe.
Gruß
-
Hallo Beginner,
200px ist kein Maß, auf das man sich verlassen kann. Man misst möglichst in em (das ist ein Maß, das auf die verwendete font-size Bezug nimmt) oder rem (der em-Wert des :root-Elements, also zumeist das <html> Element, was normalerweise die Default-font-size des Browsers hat).
Der Anwender kann einen anderen Default-Font einstellen oder - mangels guter Sehkraft - den Text zoomen. Maße in em und rem passen sich daran an. Serverseitig weißt Du ohnehin nicht, welches Bildschirmmaß deine Anwender*innen haben, deswegen muss sowas am Client gesteuert werden. Mit JavaScript oder @media Abfragen.
Responsives Design und Bedienbarkeit sind Hürden, die dem Einsteiger im Webdesign gestellt sind und die man nicht verweigern sollte. Ein Reiter, dessen Pferd an einer Hürde verweigert, wird disqualifiziert. Eine Webseite, die diese Hürden verweigert, disqualifiziert sich selnst. Und beides sind Themen, die man von Anfang an einplanen muss und die sich im Nachhinein kaum noch einbauen lassen.
Wenn Du in einem betrieblichen Umfeld unterwegs bist, wo gemanagte Geräte verwendet werden, kannst Du je nach Betrieb den Kreis der genutzten Displays eingrenzen und möglicherweise auch auf bestimmte Bedienbarkeitsanforderungen verzichten. Aber du musst Dir bewusst sein, dass Du damit diskriminierst. Das kann Dich böse in
den A...die Ferse beißen, wenn der Schwerbehindertenbeirat einschreitet. Sofern es sowas bei euch gibt.In einer Anwendung für Freunde kann man ggf. auch noch sagen: geht nur so (lies: krieg ich nicht anders hin), nehmt euren Desktop.
Im Wilden Weiten Web ist mindestens die Hälfte der User mit einem Smartphone unterwegs.
Rolf
--
sumpsi - posui - obstruxi
-
-
@@Beginner
Home > Erste Seite > Zweite Seite > Dritte Seite > Vierte Seite > Fünfte Seite > Sechste SeiteEs handelt sich um eine Breadcrumb-Navigation?
Nun muss die Navigation ab einer gewissen Länge ungefähr Mittig verkürzt und durch drei Punkten ersetzt werden.
Warum muss das? Warum soll die Navigation nicht vollständig angezeigt werden, ggfs. mehrzeilig?
„Kein Platz“ ist kein Argument. Platz ist auf Webseiten immer vorhanden.
Ist das via CSS möglich?
So, wie du das beschreibst, wohl nicht.
Hat jemand eine Idee dazu?
Ja. Keine Auslassungspunkte, sondern eine horizontal scrollbare Navigation.
Bei einer Breadcrumb-Navigation sollte der letzte Menüpunkt initial im Blick sein. Der Trick mit
direction: rtlwie bei den Klimastreifen wollte mir hier nicht gelingen, also mit JavaScript nachgeholfen: horizontal scrollbare Breadcrumb-NavigationWenn man will, kann man den ersten Menüpunkt („Home“) fixieren. (Nur so als Prototyp; bei dem Gradienten müsste noch nachgearbeitet werden.)
Da der Link zur Startseite aber oft schon anderweitig vorhanden ist (Logo), ist die Fixierung wohl nicht vonnöten.
🖖 Живіть довго і процвітайте
--
„Im Vergleich mit Elon Musk bei Twitter ist ein Elefant im Porzellanladen eine Ballerina.“
— @Grantscheam auf Twitter-
Hallo Gunnar,
entweder bin ich kaputt, oder es ist Codepen UND deine Beispiele (Browser: Edge 106 - sorry, gemanagtes Gerät mit quartalsweisen Updates).
- Codepen überlagert Editor-Inhalte mit Zeilennummern, wenn man die Fensterbreite verändert und er zwischen Ansichten umschaltet
- Was soll man in den Navigationsdemos verschieben können? Bei mir rührt sich da gar nichts 🤷.
Abgesehen davon ist deine Navigation diskriminierend. Sie schließt die Bevölkerung vom Rest der lokalen Gruppe aus! Von Andromeda oder Triangulum will ich ja nicht reden, und von Hangay schon gar nicht, aber zumindest die Milchstraßenuntergruppe (z.B. Fornax, Amringhar oder Kyranghar sollten doch wohl drin sein) 😉.
Mausige Grüße
Rolf--
sumpsi - posui - obstruxi-
@@Rolf B
entweder bin ich kaputt, oder es ist Codepen UND deine Beispiele (Browser: Edge 106 - sorry, gemanagtes Gerät mit quartalsweisen Updates).
Funktioniert für mich auch im Edge, sowohl mit Touchpad als auch mit Tastatur.
- Was soll man in den Navigationsdemos NWBKLLZ und eYjELKj verschieben können? Bei mir rührt sich da gar nichts 🤷.
Mausige Grüße
Hm, was ich in Ermangelung einer solchen nicht getestet habe, ist die Bedienung mit Maus. Mal kucken, ob ich in irgendeiner Kiste noch sowas finde. (Wozu braucht man das?)
🖖 Живіть довго і процвітайте
--
„Im Vergleich mit Elon Musk bei Twitter ist ein Elefant im Porzellanladen eine Ballerina.“
— @Grantscheam auf Twitter
-
Hallo,
danke für die Antwort.
Es handelt sich um eine Breadcrumb-Navigation?
Richtig.
Warum soll die Navigation nicht vollständig angezeigt werden, ggfs. mehrzeilig?
Die Navigation kann aufgrund der langen Texte ziemlich lang werden und darunter leidet dann die Übersichtlichkeit, die mit der Breadcrumb-Navigation beabsichtig ist. Mann hat sich für die Navigation auf eine bestimmte Länge geeinigt, die nicht überschritten werden darf.
So, wie du das beschreibst, wohl nicht.
Dafür sind genügend kostenpflichtige Beadcrumbs-Beispiele im Netz vorhanden. Der Code aber leider nicht.
Gruß
-
@@Beginner
Beadcrumbs-Beispiele
Zumindest tasturbedienbar.
Screenreader-tauglich ist das nicht:
- für die Auslassungspunkte fehlt der Alternativtext
- das
li-Element wurde anclickbar gemacht; es wird aber nicht als Button angesagt.
So geht’s richtig:
<li> <button> <span class="visually-hidden">weitere Brotkrümel anzeigen</button> </button> </li>mit den CSS-Regeln für
.visually-hidden. Denclick-Eventhandler dann für den Button undtabindex="0"beimlikommt weg.🖖 Живіть довго і процвітайте
--
„Im Vergleich mit Elon Musk bei Twitter ist ein Elefant im Porzellanladen eine Ballerina.“
— @Grantscheam auf Twitter
-
-