Πώς να δημιουργήσετε μια γραμμή μενού αλλαγής μεγέθους

Τελευταία μερικές ιστοσελίδες, όπως Αυτή είναι η ταξιαρχία και Ολοι εσείς , έχουν ξεκινήσει με ένα δυναμικό και κινούμενο μενού που αλλάζει μέγεθος κατά την κύλιση προς τα κάτω. Ελαχιστοποίηση της κύριας πλοήγησης για μεγαλύτερη χωρητικότητα του περιεχομένου. Σε αυτό το σεμινάριο, θα σας εξηγήσω πώς μπορείτε να δημιουργήσετε αυτό το μενού μόνοι σας με HTML5, CSS3 και λίγα jQuery.

Αυτό το είδος μενού είναι εξαιρετικό εάν θέλετε να εστιάσετε ιδιαίτερα στο περιεχόμενό σας σε ολόκληρο τον ιστότοπο και σας δίνει επίσης τη δυνατότητα να δημιουργήσετε μια μεγαλύτερη και πιο επίπονη πλοήγηση στην πρώτη επίσκεψη ενός χρήστη σε έναν ιστότοπο. Μπορείτε να δείξετε καλύτερα την επωνυμία ή το λογότυπο του ιστότοπού σας, εξαιρετική για την παραπάνω αναλυτική προβολή. και αφού εμπλακεί ο χρήστης σε μια επίσκεψη, μια μικρότερη και ελαχιστοποιημένη έκδοση αποκρύπτεται απαλά ώστε να επιτρέπει στον χρήστη να εστιάζει κυρίως στο περιεχόμενό σας.

Υπάρχουν διάφοροι τρόποι να το κάνετε αυτό. Σε αυτό το σεμινάριο, θα σας εξηγήσω πώς να δημιουργήσετε μια σταθερή γραμμή με πλήρες πλάτος, που αλλάζει σε ύψος μαζί με το λογότυπο, δημιουργώντας μια απλή ελαχιστοποιημένη έκδοση του αρχικού. Εάν προτιμάτε, μπορείτε επίσης να αντικαταστήσετε την εικόνα του λογότυπου με μια άλλη παραλλαγή του λογότυπου σας, όπως τα αρχικά ή ένα εικονίδιο, αλλά να έχετε κατά νου ότι η συνέπεια είναι πραγματικά σημαντική εδώ, ώστε ο χρήστης να κατανοεί πώς άλλαξε το στοιχείο και ότι ο κύριος σκοπός του εξακολουθεί να είναι η αρχική. πλοήγηση στον ιστότοπο.

Πριν ξεκινήσουμε, μπορείτε ελέγξτε το demo ή κατεβάστε την πηγή από εδώ .

Δημιουργία της βασικής δομής σε HTML

Θα ξεκινήσουμε δημιουργώντας τον βασικό κώδικα HTML που θα χρειαστούμε. Θα επιμείνουμε σε μια πραγματικά απλή δομή HTML5 για το σημείο εκκίνησης.

Τώρα που έχει γίνει ο αρχικός μας κώδικας HTML, θα προσθέσουμε τον κώδικα για το μενού καθώς και μερικές άλλες λεπτομέρειες στο κεφάλι του αρχείου HTML.

  
  Ας πάρουμε αυτό το μενού μικρό! 
  Τέλος της γραμμής. 

In our : προσθέσαμε τη μετα-ετικέτα για τον δημιουργό για τον προσδιορισμό του δημιουργού αρχείων. μετά από αυτό το διάσημο reset.css του Eric Meyer που θα επαναφέρει σχεδόν κάθε στοιχείο στο αρχείο HTML σας, δίνοντάς σας ένα πιο καθαρό και ευκολότερο έγγραφο για να δουλέψετε. Και από τη στιγμή που θα χρησιμοποιήσουμε το jQuery αργότερα, στην τελική γραμμή του κεφαλιού μας το εισάγουμε μέσω του jQuery CDN.

Έχω συνδέσει τα περισσότερα αρχεία για να διατηρήσω το έγγραφο όσο πιο απλά γίνεται, αλλά έχετε κατά νου ότι αν προτιμάτε μπορείτε να κάνετε λήψη των τελευταίων εκδόσεων όλων αυτών των αρχείων και να τα χρησιμοποιήσετε τοπικά στο αρχείο HTML και αυτό θα αποτρέψει τυχόν προβλήματα συμβατότητας έκδοσης ή αλλαγές στα αρχεία αυτά στο μέλλον.

Στο δικό μας ετικέτα, χρησιμοποιήσαμε την προεπιλεγμένη HTML5