Wir sind kurz davor, die Homepage des Snippets-Bereichs der Website zu erstellen. Sofort fangen wir an, Dinge zu optimieren und mehr Dinge in Form zu bringen.
Wir haben eine seltsame Erfahrung gemacht, bei der das absolut positionierte Pseudoelement nicht auf einen negativen linken Rand reagierte, sondern mit einem positiven rechten Rand in Ordnung war. Wer wusste.
Dann machen wir eine "aktive" Klasse für das linke Menü der Snippet-Kategorien. Sie durchsuchen jeweils nur einen von ihnen (rechts sehen Sie eine Liste verwandter Schnipsel). Angenommen, "HTML" ist aktiv und Sie klicken auf "CSS". Rechts wird eine neue Liste mit nur CSS-bezogenen Snippets angezeigt. Es muss ein Styling vorhanden sein, um zu zeigen, welches aktiv ist. Das Ändern des Z-Index für eine aktive Klasse reicht aus, um für uns zu arbeiten (damit sie über dem Schatten liegt).
Für die Liste auf der rechten Seite ist es vorübergehend, die Links anzuzeigen: blockieren - aber es ist fast zu viel anklickbarer Bereich. Es scheint seltsam, das zu denken, aber ich denke, es ist wahr. Sie möchten nicht, dass versehentliche Klicks sehr weit vom Text des Links entfernt sind, um diesen Link zu aktivieren. Es wäre überraschend und komisch. Die Links selbst können also Inline-Blocks sein, sodass sie etwas aufgefüllt werden können, aber nicht die gesamte Breite ausfüllen, wie es das Listenelement ist, in dem sie sich befinden.
Für die Links selbst entscheiden wir, dass das Färben des Titels der Snippets in der Farbe der Kategorie, zu der sie gehören, zu stark ist. Stattdessen sind die Links grau, aber die Rollover-Farbe kann diese spezielle Farbe annehmen.
Wir entscheiden auch, dass die Liste mit einer geraden Spalte für den Moment funktioniert, aber wenn das Scrollen zu lächerlich wird, können wir vielleicht eines Tages in zwei Spalten aufteilen und sie verkürzen.