Δημιουργήστε ένα μενού ολίσθησης

Sep 17, 2025

πως να

Ένας πολύ καλός τρόπος για να βελτιώσετε το εμπειρία χρήστη στον ιστότοπό σας είναι να προσθέσετε ένα μενού ολίσθησης. Δημιουργεί έναν εντυπωσιακό τρόπο για τους χρήστες να βρουν ό, τι θέλουν - οπουδήποτε μπορεί να βρίσκονται στη σελίδα - και σημαίνει ότι δεν χρειάζεται να μετακινηθούν πίσω στο Top Nav.

Αγαπάμε ιδιαίτερα το μενού Slide-Out στο χώρο για Καλλυντικά σαλόνι παγωτού , σχεδιασμένο από Hiroka hasegawa (Εάν βλέπετε ιστότοπους που σας αρέσει, φροντίστε να τα αποθηκεύσετε αποθήκευση σύννεφων για έμπνευση). Διαβάστε παρακάτω για να μάθετε πώς να αναπαράγετε αυτήν την επίδραση ολίσθησης στην ιστοσελίδα σας. Πρόκειται να δημιουργήσετε έναν ιστότοπο που κάνει μια εντύπωση; Το σωστό web hosting υπηρεσία ή οικοδόμος ιστότοπου θα κάνει ακριβώς αυτό.

01. Έναρξη εγγράφων

Το πρώτο βήμα είναι να ορίσετε το έγγραφο σελίδας. Αυτό αποτελείται από ένα δοχείο HTML που αντιπροσωπεύει την ιστοσελίδα, η οποία περιέχει το τμήμα κεφαλής και του σώματος. Ενώ το τμήμα κεφαλής χρησιμοποιείται για τη φόρτωση των εξωτερικών πόρων CSS και JavaScript, το τμήμα σώματος χρησιμοποιείται για την αποθήκευση του ορατού περιεχομένου σελίδας που δημιουργήθηκε στο βήμα # 2.

 & lt;! DOCTYPE HTML & GT;
& lt; html & gt;
& lt; κεφάλι & gt;
& lt; τίτλος & gt; slide out menue & lt; / τίτλος & gt;
& lt; link rel = "stylesheet" type = "text / css" media = "οθόνη" href = "styles.css" / & gt;
& lt; script src = "code.js" & gt; / script & gt;
& lt; / head & gt;
& lt; body & gt;
*** Βήμα 2 εδώ
& lt; / Body & GT;
& lt; / html & gt;

02. Περιεχόμενο σελίδας

Το περιεχόμενο της σελίδας αποτελείται από έναν τίτλο τίτλου, μαζί με ένα δοχείο πλοήγησης. Αυτή η πλοήγηση αποθηκεύει μια σειρά συνδέσμων και έχει αντιστοιχιστεί ένα χαρακτηριστικό "δράσης". Είναι αυτό το χαρακτηριστικό που θα χρησιμοποιηθεί από το JavaScript και το CSS για να εφαρμόσει το στυλ και τη λειτουργικότητα στο δοχείο και τα στοιχεία του.

 & LT; H1 & GT; SLIDE OUT MENU & LT; / H1 & GT;
& lt; nav δεδομένων-δράση = "expand" & gt;
  & lt; span & gt; & amp; # 9776; / lt; / span & gt;
  & lt; ένα href = "#" & gt; σελίδα 1 & lt; / a & gt;
  & lt; ένα href = "#" & gt; / a & gt;
  & lt; ένα href = "#" & gt; / a & gt;
& lt; / nav & gt;

03. Έναρξη CSS

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

 html, σώμα {
  Οθόνη: μπλοκ;
  Πλάτος: 100%.
  Ύψος: 100%.
  Ιστορικό: # 000;
  Χρώμα: #FFF; }

04. Ρύθμιση πλοήγησης

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

 NAV {
  Οθόνη: μπλοκ;
  Θέση: Σταθερή.
  Κουτί-μέγεθος: Σύνορα.
  Κορυφή: 0;
  Αριστερά: -100VW;
  Z-Δείκτης: 9999;
  Padding: .5em 1em .5em 1em ;;
  Πλάτος: 100VW;
  Ύψος: 100VH;
  Κείμενο-Ευθυγράμμιση: Κέντρο;
  Ιστορικό: κόκκινο?
  Μετάβαση: Όλα τα 1s; }

05. Ανοίξτε και εικονίδιο

Η αριστερή θέση της πλοήγησης ρυθμίζεται στο μηδέν όταν έχει εφαρμοστεί μια «ανοικτή» κλάση, ενεργοποιώντας την κινούμενη μετάβαση που ορίζεται στο προηγούμενο βήμα. Το πρώτο παιδί της πλοήγησης είναι το εικονίδιο Expand, το οποίο χρησιμοποιεί σταθερή θέση ώστε να παραμένει ορατά στο κέντρο της αριστερής πλευράς της οθόνης.

 NAV.OPEN {
  Αριστερά: 0;
}
NAV *: πρώτο παιδί {
  Θέση: Σταθερή.
  Padding: 1em;
  Δρομέας: δείκτης?
  Αριστερά: 0;
  Κορυφή: 50VH;
  σαφής: και οι δύο. }

06. Σύνδεσμοι πλοήγησης

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

 NAV A {
  Οθόνη: μπλοκ;
  Μέγεθος γραμματοσειράς: 4em;
  Χρώμα: # 000;
  Font-Οικογένεια: Arial;
  Κείμενο-διακόσμηση: Κανένα;
  Περιθώριο: .2em;
}

07. Ακρόαση JavaScript

Δημιουργήστε ένα νέο αρχείο που ονομάζεται 'Code.js'. Αυτό το βήμα περιμένει μέχρι να φορτωθεί η σελίδα, κατά την οποία αναζητά το πρώτο παιδί όλων των πλοίων με το χαρακτηριστικό "Δράση" που έχει οριστεί σε "Expand". Αυτό το πρώτο παιδί, που είναι το ανοιχτό εικονίδιο, έχει εφαρμοστεί ένας ακροατής εκδήλωσης κλικ, πάνω στο οποίο εναλλάσσει το στοιχείο που έχει ή δεν έχει εφαρμοστεί μια «ανοιχτή» τάξη.

 window.addeventListener ("φορτίο", λειτουργία () {
  var nodes = document.queryselectorall ('nav [data-action = "exping"] *: πρώτο παιδί);
  για (var i = 0, i & lt; nodes.length, i ++) {
  κόμβοι [i].adeventListener ("κλικ", λειτουργία () {
  αν (αυτό.parentnode.classname == "ανοιχτό") αυτό.ParentNode.classname = "";
  αλλιώς αυτό το .parentnode.classname = "ανοιχτό".
  });
  }
});
***

Το άρθρο αυτό δημοσιεύθηκε αρχικά σε εξέταση 274 του δημιουργικού σχεδιασμού Web Design Web Design. Αγοράστε τεύχος 274 εδώ ή Εγγραφείτε στο Web Designer εδώ .

Σχετικά Άρθρα:

Κορυφαίες τάσεις πλοήγησης ιστού
10 Κανόνες της μεγάλης εμπειρίας των χρηστών
Προσθέστε οπτικές συνθήκες στον ιστότοπό σας

Δημιουργήστε ένα μενού ολίσθησης

01. Έναρξη εγγράφων

02. Περιεχόμενο σελίδας

03. Έναρξη CSS

04. Ρύθμιση πλοήγησης

05. Ανοίξτε και εικονίδιο

06. Σύνδεσμοι πλοήγησης

07. Ακρόαση JavaScript

πως να - Τα πιο δημοφιλή άρθρα

Πώς να χρησιμοποιήσετε σκίτσο βαρύτητας

Πώς να δημιουργήσετε αντικείμενα κειμένου και εικόνων στο CSS

Δημιουργήστε μια εικόνα πολλαπλών έκθεσης με το Adobe CC

Πώς να δημιουργήσετε μια εφαρμογή ταμπλό με αντιδράσει

cache στην αναμνηστική απόδοση του BBC

Πώς να κάνετε τη δική σας Αγία Γραφή

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

Ενισχύστε τα διαγράμματα D3.Js με βαθμίδες SVG

Κατηγορίες