Είμαστε πολύ κοντά στο να ολοκληρώσουμε την κατασκευή της αρχικής σελίδας της περιοχής Snippets του ιστότοπου. Αμέσως, αρχίζουμε να τροποποιούμε τα πράγματα και να παίρνουμε περισσότερα πράγματα σε σχήμα.
Έχουμε μια παράξενη εμπειρία όπου το απολύτως τοποθετημένο ψευδο στοιχείο δεν ανταποκρίθηκε σε ένα αρνητικό αριστερό περιθώριο, αλλά ήταν εντάξει με ένα θετικό δεξί περιθώριο. Οι οποίοι γνώριζαν.
Στη συνέχεια προχωράμε στη δημιουργία μιας «ενεργής» τάξης για το αριστερό μενού κατηγοριών αποσπάσματος. Περιηγείστε μόνο ένα από αυτά κάθε φορά (βλέπετε μια λίστα σχετικών αποσπασμάτων στα δεξιά). Ας πούμε ότι το "HTML" είναι ενεργό και κάνετε κλικ στο "CSS", μια νέα λίστα με μόνο αποσπάσματα που σχετίζονται με το CSS εμφανίζεται στα δεξιά. Πρέπει να υπάρχει κάποιο στυλ για να δείξει ποιο είναι ενεργό. Η αλλαγή του ευρετηρίου z σε μια ενεργή τάξη είναι αρκετή για να δουλέψει για εμάς (κάνοντάς την να κάθεται πάνω από τη σκιά)
Για τη λίστα στα δεξιά, είναι προσωρινό να κάνετε τους συνδέσμους να εμφανίζονται: μπλοκ - αλλά σχεδόν είναι πολύ μεγάλη περιοχή με δυνατότητα κλικ. Φαίνεται περίεργο να το πιστεύουμε αυτό, αλλά νομίζω ότι είναι αλήθεια. Δεν θέλετε τυχαία κλικ πολύ μακριά από το κείμενο του ίδιου του συνδέσμου για να ενεργοποιήσετε αυτόν τον σύνδεσμο. Θα ήταν εκπληκτικό και περίεργο. Έτσι, οι ίδιοι οι σύνδεσμοι μπορούν να είναι inline-block, ώστε να μπορούν να έχουν κάποια επένδυση, αλλά δεν γεμίζουν το πλήρες πλάτος όπως το στοιχείο λίστας που βρίσκονται.
Για τους ίδιους τους συνδέσμους, αποφασίζουμε ότι ο χρωματισμός του τίτλου των αποσπασμάτων στο χρώμα της κατηγορίας στην οποία ανήκει είναι πολύ δυνατός. Αντ 'αυτού, οι σύνδεσμοι θα είναι γκρι, αλλά το χρώμα ανατροπής μπορεί να πάρει αυτό το ειδικό χρώμα.
Αποφασίσαμε επίσης ότι η ευθεία λίστα με μία στήλη λειτουργεί προς το παρόν, αλλά αν η κύλιση έγινε πολύ γελοία ίσως κάποια μέρα μπορούμε να χωρίσουμε σε δύο στήλες και να την συντομεύσουμε.