Χρησιμοποιώντας το Windows Equalizer
Σήμερα θα δούμε: Οι αληθινοί γνώστες της μουσικής γνωρίζουν ότι για την ποιότητα...
Chercher ΗΛΕΚΤΡΟΝΙΚΑ ΕΙΔΗ. Εάν ο ιστότοπος έχει πολλές ενότητες ή σελίδες, απαιτείται ειδική ικανότητα για την ενσωμάτωση όλων των στοιχείων σε ανάλυση μικρής οθόνης. Πολύ συχνά, η πλοήγηση μετατρέπεται σε ένα σωρό γραμμές ή ένα σωρό κουμπιά στοιβαγμένα το ένα πάνω στο άλλο. ΣΕ αυτό το μάθημαΘα εξετάσουμε έναν τρόπο δημιουργίας πλοήγησης χρησιμοποιώντας το jQuery.
ΕργοΤα παρακάτω στιγμιότυπα οθόνης δείχνουν καταστάσεις με πρότυπα σε οθόνες κινητών συσκευών. Εάν η πλοήγηση έχει 3 ή 4 κουμπιά, τότε η θέση της θα αποθηκευτεί σε μία γραμμή. Αλλά όταν το μενού περιέχει 6 ή περισσότερα στοιχεία, γίνεται ένα άσχημο σωρό.
Ένας συνηθισμένος τρόπος είναι να μετατρέψετε την πλοήγηση σε αναπτυσσόμενο μενού με βάση το επιλεγμένο στοιχείο. Αυτή η λύση έχει το μειονέκτημα ότι δεν είναι δυνατή η διαμόρφωση του στοιχείου επιλογής χρησιμοποιώντας CSS. Οι προσθήκες Javascript όπως το Chosen σάς επιτρέπουν να προσαρμόσετε το μενού ή θα πρέπει να αρκεστείτε στα στυλ συστήματος για την αναπτυσσόμενη λίστα. Ο χρήστης μπορεί επίσης να μπερδευτεί όταν η έκδοση ευρείας οθόνης της δομής του μενού μετατρέπεται σε μια αναπτυσσόμενη λίστα σε μια κινητή συσκευή.
Αλλο δημοφιλής τρόπος- σχηματίστε στοιχεία μενού ως στοιχεία μπλοκ με κάθετη διάταξησημεία. Ωστόσο, αυτή η προσέγγιση παίρνει μεγάλο χώροστον τίτλο. Εάν η πλοήγηση περιέχει πολλά κουμπιά, τότε ο χρήστης θα πρέπει να κάνει κύλιση σε μια μεγάλη λίστα για να φτάσει στις πληροφορίες.
ΚΑΙ τελευταία μέθοδοςπου θα καλύψουμε στο σεμινάριο μας είναι η χρήση του εικονιδίου του μενού για να ενεργοποιήσετε την πλοήγηση. Αυτή η προσέγγιση εξοικονομεί χώρο στη σελίδα (που είναι σημαντικό για μια κινητή συσκευή) και δίνει πλήρης έλεγχοςπάνω από την εμφάνιση χρησιμοποιώντας CSS. Το εικονίδιο μενού και η ίδια η πλοήγηση μπορούν να παρουσιαστούν σύμφωνα με το γενικό στυλ του ιστότοπου.
Σε αυτό το σεμινάριο θα σας δείξουμε πώς να δημιουργήσετε πλοήγηση για τη μικρή οθόνη. Το jQuery θα χρησιμοποιηθεί για την προετοιμασία του εικονιδίου του μενού και την ενεργοποίηση της πλοήγησης. Κανένας πρόσθετες ετικέτεςΔεν απαιτείται HTML για να λειτουργήσει η πλοήγηση.
Το μενού μας θα χρησιμοποιεί μια απλή δομή:
Το μενού απαιτεί κώδικα JavaScript για να λειτουργήσει. Η συνάρτηση προετοιμάζει το στοιχείο στο . Όταν ένας επισκέπτης κάνει κλικ στο στοιχείο #menu-icon, η πλοήγηση σύρεται προς τα έξω.
jQuery(document).ready(function($)( /* Προετοιμάστε το εικονίδιο μενού */ $("#nav-wrap").prepend("Menu"); /* Ενεργοποίηση πλοήγησης */ $("#menu-icon" " ).on("κλικ", function())( $("#nav").slideToggle(); $(this).toggleClass("ενεργό"); ));
Ως αποτέλεσμα του σεναρίου, η δομή του εγγράφου θα αλλάξει:
Μενού
Το demo μας χρησιμοποιεί αρκετά απλό κώδικα CSS. Βασική στιγμήπαρουσιάζεται στο παρακάτω σχήμα. Το στοιχείο #menu-icon έχει αρχικά ιδιότητα εμφάνισης:κανένας. Χρησιμοποιεί ένα ερώτημα πολυμέσων για να αλλάξει το #menu-icon σε display:block εάν το πλάτος της θύρας προβολής είναι μικρότερο από 600 pixel.
Το αποτέλεσμα θα είναι η πλοήγηση με την παρουσιαζόμενη λειτουργικότητα:
Πολλοί άνθρωποι προσπαθούν ήδη να προσαρμόσουν τον ιστότοπό τους για κινητές συσκευές. Χρησιμοποιούν τις νέες δυνατότητες του CSS3 τόσο σε απλούς ιστότοπους όσο και σε πολύ πιο σύνθετους. Ορισμένες δυσκολίες προκύπτουν στη διαδικασία, και μία από τις πιο σημαντικές είναι η συμπεριφορά του μενού του ιστότοπου όταν προβάλλεται σε μικρές οθόνες. Αποφασίζω αυτό το πρόβλημα, όπως αποδείχθηκε, με διάφορους τρόπους. Για μένα είναι το ίδιο αυτή η εργασίαέχει γίνει πρόσφατα ιδιαίτερα επίκαιρο, γι' αυτό παρακολουθώ υλικά στο Διαδίκτυο σχετικά με προσαρμοστικός σχεδιασμός. Και πρόσφατα συνάντησα καλή ανάλυσηυπάρχοντα προσαρμοστικά μοτίβα πλοήγησης.
Δεδομένου ότι έχω σχέση με το προσαρμοστικό πρότυπο HTML5 ανοιχτού κώδικα Simpliste, το αποφάσισα όλες τις υπάρχουσες επιλογές πλοήγησηςδοκιμάστε το στην πράξη. Αλλά εκτός από την απόκτηση της δικής μου εμπειρίας, κατάφερα να δημιουργήσω αρκετά οπτικά παραδείγματα που είναι διαθέσιμα για χρήση από οποιονδήποτε, καθώς και να ετοιμάσω μια περιγραφή της διαδικασίας, με την οποία σας προσκαλώ να εξοικειωθείτε.
Το ίδιο το άρθρο που με ενδιέφερε και με ώθησε στη δράση ονομάζεται Responsive Navigation Patterns. Θα βασιστώ σε αυτό και τα παραδείγματα θα είναι οι σελίδες του προτύπου Simpliste με την υλοποίηση μοτίβων και πλήρης περιγραφήπώς να πετύχετε το ίδιο αποτέλεσμα.
Υπάρχουν διάφορες προσεγγίσεις για την απόκριση πλοήγησης. Ας τα δούμε με τη σειρά.
Αυτή η προσέγγιση χρησιμοποιείται σε θέματα Simpliste.
Οφέλη Πιο εύκολο να επιτευχθούν. Δεν χρειάζεται να χρησιμοποιήσετε Javascript (ή να εξαρτηθείτε από αυτό), δεν απαιτούνται φανταχτεροί ελιγμοί CSS Μειονεκτήματα Το πρόβλημα μπορεί να ξεκινήσει όταν ο αριθμός των στοιχείων του μενού είναι πολύ μεγάλος. Πρώτον, το ύψος του μπλοκ πλοήγησης μπορεί να γίνει τέτοιο ώστε να καλύπτει πλήρως το περιεχόμενο του ιστότοπου στην πρώτη σελίδα και ο χρήστης θα πρέπει να κάνει «κύλιση» προς τα κάτω στον ιστότοπο για να φτάσει στις πληροφορίες που χρειάζεται. Και έτσι σε κάθε σελίδα του ιστότοπου. Δεύτερον, τίθεται το ερώτημα μενού πολλαπλών επιπέδων. Αν απλώς παρατάσσονται το ένα κάτω από το άλλο, τότε επιστρέφουμε στο πρόβλημα του ύψους του μπλοκ πλοήγησης. Τρίτον, εάν δεν έχουν προβλεφθεί όλα εκ των προτέρων, τότε η προσθήκη νέων στοιχείων μενού μπορεί να προκαλέσει δυσάρεστες «μετακομίσεις» και μεταφορές.
Αυτή η μέθοδος δεν είναι τόσο κοινή. Η ουσία του είναι ότι δημιουργείται ένας σύνδεσμος στην κεφαλίδα, η οποία ευρείες οθόνεςκρύβεται και εμφανίζεται, εάν χρειάζεται, ενεργοποιημένη κινητές συσκευές. Αυτός ο σύνδεσμος αγκύρωσης οδηγεί στο μενού, το οποίο βρίσκεται στο υποσέλιδο του ιστότοπου. Σε αυτήν την περίπτωση, το ίδιο το μενού είτε τοποθετείται χρησιμοποιώντας CSS, είτε διπλασιάζεται στην κεφαλίδα και το υποσέλιδο, και στη συνέχεια το μενού στην κεφαλίδα κρύβεται σε χαμηλές αναλύσεις. Μπορείτε να χρησιμοποιήσετε είτε κείμενο είτε κάποιο καθαρό εικονίδιο ως σύνδεσμο.
Πλεονεκτήματα Υπάρχει μόνο ένας σύνδεσμος στην κεφαλίδα, ο οποίος καταλαμβάνει πολύ λίγο χώρο. Δεν υπάρχει εξάρτηση από σενάρια Μειονεκτήματα Θα πρέπει να προσθέσετε πρόσθετο κώδικα CSS είτε για να μετακινήσετε το μενού από το υποσέλιδο στην κορυφή σε επιτραπέζιους υπολογιστές (χρησιμοποιώντας θέση:απόλυτο ή θέση:σταθερό), είτε για να αποκρύψετε το μενού στην κεφαλίδα στο κινητό. συσκευές εάν αντιγράφει το μενού του υποσέλιδου. Επιπλέον, η αίσθηση ενός απότομου «άλματος» κατά την πλοήγηση σε έναν τέτοιο σύνδεσμο μπορεί να αιφνιδιάσει τον χρήστη.
Αυτή η προσέγγιση γίνεται ολοένα και πιο κοινή. Αυτό χρησιμοποιεί Javascript για να επαναλάβει όλα τα στοιχεία του μενού, δημιουργώντας μια λίστα από αυτά. Δηλαδή, η πλοήγηση θα είναι το στοιχείο διεπαφής που υποστηρίζεται λειτουργικό σύστημαεπισκέπτης.
Η διαδικασία συγγραφής ενός σεναρίου για ένα τέτοιο μενού περιγράφηκε λεπτομερώς σε άρθρο στο Smashing Magazine. Αλλά μπορείτε να χρησιμοποιήσετε ένα έτοιμο πρόσθετο jQuery, όπως έκανα στη δική μου λύση.
Πλεονεκτήματα Σιδερώνει συμπαγή. Αναγνωρισμένο ως στοιχείο πλοήγησης και οικείο στον χρήστη. Για τοποθεσίες με πολύπλοκη πλοήγηση και ένθετα μενού, αυτό μπορεί να είναι μια εξαιρετική λύση Μειονεκτήματα Θα είναι δύσκολο να κάνετε ένα στοιχείο διεπαφής λειτουργικού συστήματος για κινητά να φαίνεται όπως θέλετε. Επί διαφορετικές συσκευές εμφάνισηκαι η συμπεριφορά θα είναι ελαφρώς διαφορετική. Εξάρτηση Javascript. Πραγματικά άβολο στην πλοήγηση μεγάλα μεγέθη, όταν όλα τα σημεία παρατάσσονται σε μια μεγάλη, μονότονη σειρά, αν και διατηρείται η ένθεση των επιπέδων.
Αυτή η προσέγγιση είναι επίσης αρκετά δημοφιλής. Ειδικά λαμβάνοντας υπόψη την ευκαιρία να πειραματιστείτε με το σχεδιασμό. Η ουσία του είναι ότι στην έκδοση για κινητά το μενού είναι κρυφό, αλλά παραμένει ένας σύνδεσμος ή ένα κουμπί, κάνοντας κλικ στο οποίο μπορείτε να ανοίξετε την πλοήγηση. Όλα λειτουργούν με χρησιμοποιώντας Javascript. Μπορείτε να συγκρίνετε την προσέγγιση με έναν σύνδεσμο υποσέλιδου, αλλά σε σε αυτήν την περίπτωσητο μενού εμφανίζεται στο ίδιο σημείο όπου ο χρήστης έκανε κλικ στο κουμπί, δηλαδή στο επάνω μέρος της σελίδας. Εναλλακτικά, μπορείτε να αφήσετε μερικούς από τους πιο σημαντικούς συνδέσμους και όταν κάνετε κλικ στο κουμπί, αναπτύξτε τους υπόλοιπους.
Πλεονεκτήματα Μπορείτε να φαίνεστε όπως θέλετε. Ο χρήστης δεν μεταφέρεται πουθενά. Για τα ένθετα μενού, είναι δυνατή η δημιουργία ιεραρχιών που επεκτείνονται όταν κάνετε κλικ στην επιλογή Μειονεκτήματα Εξάρτηση από Javascript. Πιθανά προβλήματαμε απόδοση εάν χρειάζεται να κάνετε κίνηση στο μενού.
Αυτή η επιλογή έχει περιγραφεί ως χωριστή προσέγγιση. Αλλά στην πραγματικότητα είναι περισσότερο μια παραλλαγή ενός αναπτυσσόμενου μενού. Η ουσία του είναι ότι όταν κάνετε κλικ σε έναν σύνδεσμο ή ένα κουμπί, το μενού όχι μόνο ανοίγει, αλλά μετακινείται από την άκρη του παραθύρου του προγράμματος περιήγησης, μετατοπίζοντας έτσι το περιεχόμενο έξω από το παράθυρο.
Δεν ήταν δυνατό να βρεθεί μια έτοιμη λύση, έτσι δημιουργήσαμε τη δική μας.
$(function())( $("body").addClass("js"); $(".link_nav").click(function())($("body").toggleClass("mobile_nav"); )) ;)
Στην πραγματικότητα, όχι πολλά σενάρια.
Η κύρια εργασία γίνεται από το CSS. Κατά την αλλαγή της κλάσης της ετικέτας σώματος αλλάζει η θέση του μενού, το οποίο τοποθετείται χρησιμοποιώντας θέση:σταθερό και το περιεχόμενο παίρνει έμεινε επιπλέον χώρος, δίνοντας τη θέση του στο μενού. Στα προγράμματα περιήγησης Webkit ήταν ακόμη δυνατή η επίτευξη κινούμενων εικόνων μέσω μεταβάσεων CSS, δηλαδή, σε iPhone και Android το μενού θα μετακινηθεί αποτελεσματικά. Και πάλι, μπορείτε να δείτε και να πάρετε τα απαραίτητα στυλ
νέος παίκτης 16 Ιανουαρίου 2017 στις 01:28 Μενού για κινητά για τον ιστότοπο. Πρόσθετο JQuery mmmenu- jQuery
Σε αυτό το άρθρο θα μιλήσουμε για το πώς να δημιουργήσετε ένα μενού για την έκδοση για κινητά του ιστότοπου που θα ταιριάζει στον προσαρμοστικό σχεδιασμό. Θέλω να σας πω για ένα πρόσθετο για το JQuery που ονομάζεται mmenu (μπορείτε να ακολουθήσετε τον σύνδεσμο για να κατεβάσετε το πρόσθετο και να δείτε αμέσως πώς θα μοιάζει το μενού που θα δημιουργήσουμε). Θα χρησιμοποιήσουμε το πρόσθετο επειδή η κατασκευή του δικού σας ποδηλάτου κάθε φορά δεν είναι η καλύτερη πρακτική. Ο τρόπος μας είναι να χρησιμοποιούμε τις βέλτιστες πρακτικές. Ας ξεκινήσουμε.
Σύνδεση. Ο συγγραφέας συμβουλεύει τη χρήση του doctype html 5, λοιπόν, εδώ νομίζω ότι δεν χρειαζόμαστε εναλλακτικές, το χρησιμοποιούμε. Στην περιοχή κεφαλιού του εγγράφου μας, πρέπει να συνδέσουμε το ίδιο το JQuery και δύο αρχεία plugin, συνδέουμε:
Εάν χρειαζόμαστε ένα μενού σε καμβά, τότε πρέπει να συμπεριλάβουμε τα αρχεία jquery.mmenu.oncanvas.min.js και jquery.mmenu.oncanvas.css. Το On-Camvas είναι μια έκδοση του μενού που έχει θέση:απόλυτο; πλάτος:100%; ύψος: 100%, που το τεντώνει για να γεμίσει ολόκληρη την οθόνη.
- Σπίτι
- Σχετικά με εμάς
- Ιστορία
- Η ομάδα
- Η διευθυνση μας
- Επικοινωνία
- Σπίτι
- Σχετικά με εμάς
- Ιστορία
- Η ομάδα
- Η διευθυνση μας
- Επικοινωνία
2. Για να κάνετε το υπομενού πάντα ορατό, πρέπει να προσθέσετε την κλάση "Inset" σε αυτό.
3. Προσθέστε την κλάση "Επιλεγμένα" στο στοιχείο μενού για να το επισημάνετε.
4. Μπορείτε να δημιουργήσετε διαχωριστικά ως εξής
- Δικτυακός τόπος
- Σπίτι
- Σχετικά με εμάς
- Επικοινωνία
Χρησιμοποίησα την κλάση Fixed για να ορίσω θέση:fixed
Για να λειτουργήσει το μενού του κινητού μας, το μόνο που έχουμε να κάνουμε είναι να συνδέσουμε τα παρακάτω κώδικας javascriptστη σελίδα:
$(document).ready(function() ( var $menu = $("#my-menu").mmenu(); var $icon = $("#mmenu-icon"); var API = $menu.data ("mmenu"); $icon.on("click", function() ( API.open(); )); ("is-active"); $100. ; , 100 $icon.on("click", function() (API.open();
Προβλήματα Χρησιμοποιώντας το mmmenu Αντιμετώπισα δύο προβλήματα. Στην αρχή προσπάθησα να τυλίξω όλο το περιεχόμενο του σώματος μέσα ετικέτα div, γιατί αυτό είναι απαραίτητο για να λειτουργήσει το πρόσθετο. Αλλά σε αυτή την περίπτωση, για κάποιο λόγο έκρυβε όλο το περιεχόμενο που τύλιξα. Οπότε το παράτησα. Εάν δεν τυλίξετε τα πάντα στο σώμα σας σε ένα div, τότε το πρόσθετο θα το κάνει για εσάς. Αλλά θα υπάρξουν προβλήματα με τη διπλή εκτέλεση των σεναρίων js και άλλων. Μετά από αυτό, αντιμετώπισα αμέσως το δεύτερο πρόβλημα: το πρόσθετο δεν αναδιπλώνει τίποτα άλλο εκτός από ένα div. Δηλαδή, αν έχετε h1 απευθείας μέσα στο σώμα (σώμα > h1), όπως για παράδειγμα είχα, τότε το mmmenu θα τα παρακάμψει και θα τυλίξει τα div που βρίσκονται πίσω από αυτό. έτσι ώστε απευθείας Μέσα στο σώμα να μένουν μόνο div.Αυτό έκανε τα πάντα να λειτουργούν για μένα. Ελπίζω ότι αυτό το άρθρο ήταν χρήσιμο για εσάς.
Ετικέτες: responsive design, layout, jquery plugins
Πολλοί άνθρωποι προσπαθούν ήδη να προσαρμόσουν τον ιστότοπό τους για κινητές συσκευές. Χρησιμοποιούν τις νέες δυνατότητες του CSS3 τόσο σε απλούς ιστότοπους όσο και σε πολύ πιο σύνθετους. Ορισμένες δυσκολίες προκύπτουν στη διαδικασία και μία από τις πιο σημαντικές είναι η συμπεριφορά του μενού του ιστότοπου όταν προβάλλεται σε μικρές οθόνες. Αυτό το πρόβλημα, όπως αποδείχθηκε, επιλύεται με διάφορους τρόπους. Για μένα, αυτή η εργασία έχει γίνει πρόσφατα ιδιαίτερα σημαντική, επομένως παρακολουθώ τα υλικά στον ιστό που σχετίζονται με την προσαρμοστική σχεδίαση. Και πρόσφατα συνάντησα μια καλή ανάλυση των υπαρχόντων μοτίβων πλοήγησης με απόκριση.
Δεδομένου ότι έχω σχέση με το προσαρμοστικό πρότυπο HTML5 ανοιχτού κώδικα Simpliste, το αποφάσισα όλες τις υπάρχουσες επιλογές πλοήγησηςδοκιμάστε το στην πράξη. Αλλά εκτός από την απόκτηση της δικής μου εμπειρίας, κατάφερα να δημιουργήσω αρκετά οπτικά παραδείγματα που είναι διαθέσιμα για χρήση από οποιονδήποτε, καθώς και να ετοιμάσω μια περιγραφή της διαδικασίας, με την οποία σας προσκαλώ να εξοικειωθείτε.
Το ίδιο το άρθρο που με ενδιέφερε και με ώθησε στη δράση ονομάζεται Responsive Navigation Patterns. Θα βασιστώ σε αυτό και τα παραδείγματα θα είναι οι σελίδες του προτύπου Simpliste με την υλοποίηση μοτίβων και μια πλήρη περιγραφή του τρόπου επίτευξης του ίδιου αποτελέσματος.
Υπάρχουν διάφορες προσεγγίσεις για την απόκριση πλοήγησης. Ας τα δούμε με τη σειρά.
Αυτή η προσέγγιση χρησιμοποιείται σε θέματα Simpliste.
Οφέλη Πιο εύκολο να επιτευχθούν. Δεν χρειάζεται να χρησιμοποιήσετε Javascript (ή να εξαρτηθείτε από αυτό), δεν απαιτούνται φανταχτεροί ελιγμοί CSS Μειονεκτήματα Το πρόβλημα μπορεί να ξεκινήσει όταν ο αριθμός των στοιχείων του μενού είναι πολύ μεγάλος. Πρώτον, το ύψος του μπλοκ πλοήγησης μπορεί να γίνει τέτοιο ώστε να καλύπτει πλήρως το περιεχόμενο του ιστότοπου στην πρώτη σελίδα και ο χρήστης θα πρέπει να κάνει «κύλιση» προς τα κάτω στον ιστότοπο για να φτάσει στις πληροφορίες που χρειάζεται. Και έτσι σε κάθε σελίδα του ιστότοπου. Δεύτερον, τίθεται το θέμα των πολυεπίπεδων μενού. Αν απλώς παρατάσσονται το ένα κάτω από το άλλο, τότε επιστρέφουμε στο πρόβλημα του ύψους του μπλοκ πλοήγησης. Τρίτον, εάν δεν έχουν προβλεφθεί όλα εκ των προτέρων, τότε η προσθήκη νέων στοιχείων μενού μπορεί να προκαλέσει δυσάρεστες «μετακομίσεις» και μεταφορές.
Αυτή η μέθοδος δεν είναι τόσο κοινή. Η ουσία του είναι ότι δημιουργείται ένας σύνδεσμος στην κεφαλίδα, ο οποίος είναι κρυμμένος σε ευρείες οθόνες και εμφανίζεται, εάν είναι απαραίτητο, σε κινητές συσκευές. Αυτός ο σύνδεσμος αγκύρωσης οδηγεί στο μενού, το οποίο βρίσκεται στο υποσέλιδο του ιστότοπου. Σε αυτήν την περίπτωση, το ίδιο το μενού είτε τοποθετείται χρησιμοποιώντας CSS, είτε διπλασιάζεται στην κεφαλίδα και το υποσέλιδο, και στη συνέχεια το μενού στην κεφαλίδα κρύβεται σε χαμηλές αναλύσεις. Μπορείτε να χρησιμοποιήσετε είτε κείμενο είτε κάποιο καθαρό εικονίδιο ως σύνδεσμο.
Πλεονεκτήματα Υπάρχει μόνο ένας σύνδεσμος στην κεφαλίδα, ο οποίος καταλαμβάνει πολύ λίγο χώρο. Δεν υπάρχει εξάρτηση από σενάρια Μειονεκτήματα Θα πρέπει να προσθέσετε πρόσθετο κώδικα CSS είτε για να μετακινήσετε το μενού από το υποσέλιδο στην κορυφή σε επιτραπέζιους υπολογιστές (χρησιμοποιώντας θέση:απόλυτο ή θέση:σταθερό), είτε για να αποκρύψετε το μενού στην κεφαλίδα στο κινητό. συσκευές εάν αντιγράφει το μενού του υποσέλιδου. Επιπλέον, η αίσθηση ενός απότομου «άλματος» κατά την πλοήγηση σε έναν τέτοιο σύνδεσμο μπορεί να αιφνιδιάσει τον χρήστη.
Αυτή η προσέγγιση γίνεται ολοένα και πιο κοινή. Χρησιμοποιεί Javascript, το οποίο «τρέχει» όλα τα στοιχεία του μενού, δημιουργώντας μια λίστα από αυτά. Δηλαδή, η πλοήγηση θα είναι ένα στοιχείο διεπαφής που υποστηρίζεται από το λειτουργικό σύστημα του επισκέπτη.
Η διαδικασία συγγραφής ενός σεναρίου για ένα τέτοιο μενού περιγράφηκε λεπτομερώς σε άρθρο στο Smashing Magazine. Αλλά μπορείτε να χρησιμοποιήσετε ένα έτοιμο πρόσθετο jQuery, όπως έκανα στη δική μου λύση.
Πλεονεκτήματα Σιδερώνει συμπαγή. Αναγνωρισμένο ως στοιχείο πλοήγησης και οικείο στον χρήστη. Για τοποθεσίες με πολύπλοκη πλοήγηση και ένθετα μενού, αυτό μπορεί να είναι μια εξαιρετική λύση Μειονεκτήματα Θα είναι δύσκολο να κάνετε ένα στοιχείο διεπαφής λειτουργικού συστήματος για κινητά να φαίνεται όπως θέλετε. Η εμφάνιση και η συμπεριφορά θα είναι ελαφρώς διαφορετικές σε διαφορετικές συσκευές. Εξάρτηση Javascript. Δεν είναι βολικό κατά την πλοήγηση σε πραγματικά μεγάλα μεγέθη, όταν όλα τα αντικείμενα παρατάσσονται σε μια μεγάλη, μονότονη σειρά, αν και διατηρείται η ένθεση των επιπέδων.
Αυτή η προσέγγιση είναι επίσης αρκετά δημοφιλής. Ειδικά λαμβάνοντας υπόψη την ευκαιρία να πειραματιστείτε με το σχεδιασμό. Η ουσία του είναι ότι στην έκδοση για κινητά το μενού είναι κρυφό, αλλά παραμένει ένας σύνδεσμος ή ένα κουμπί, κάνοντας κλικ στο οποίο μπορείτε να ανοίξετε την πλοήγηση. Όλα λειτουργούν χρησιμοποιώντας Javascript. Μπορείτε να συγκρίνετε την προσέγγιση με έναν σύνδεσμο προς το υποσέλιδο, αλλά σε αυτήν την περίπτωση το μενού εμφανίζεται στο ίδιο σημείο όπου ο χρήστης έκανε κλικ στο κουμπί, δηλαδή στο επάνω μέρος της σελίδας. Εναλλακτικά, μπορείτε να αφήσετε μερικούς από τους πιο σημαντικούς συνδέσμους και όταν κάνετε κλικ στο κουμπί, αναπτύξτε τους υπόλοιπους.
Πλεονεκτήματα Μπορείτε να φαίνεστε όπως θέλετε. Ο χρήστης δεν μεταφέρεται πουθενά. Για τα ένθετα μενού, είναι δυνατή η δημιουργία ιεραρχιών που επεκτείνονται όταν κάνετε κλικ στην επιλογή Μειονεκτήματα Εξάρτηση από Javascript. Πιθανά προβλήματα απόδοσης, εάν χρειάζεται να κάνετε κίνηση στο μενού.
Αυτή η επιλογή έχει περιγραφεί ως ξεχωριστή προσέγγιση. Αλλά στην πραγματικότητα είναι περισσότερο μια παραλλαγή ενός αναπτυσσόμενου μενού. Η ουσία του είναι ότι όταν κάνετε κλικ σε έναν σύνδεσμο ή ένα κουμπί, το μενού όχι μόνο ανοίγει, αλλά μετακινείται από την άκρη του παραθύρου του προγράμματος περιήγησης, μετατοπίζοντας έτσι το περιεχόμενο έξω από το παράθυρο.
Δεν ήταν δυνατό να βρεθεί μια έτοιμη λύση, έτσι δημιουργήσαμε τη δική μας.
$(function())( $("body").addClass("js"); $(".link_nav").click(function())($("body").toggleClass("mobile_nav"); )) ;)
Στην πραγματικότητα, όχι πολλά σενάρια.
Η κύρια εργασία γίνεται από το CSS. Κατά την αλλαγή της κλάσης της ετικέτας σώματος αλλάζει η θέση του μενού, το οποίο τοποθετείται χρησιμοποιώντας θέση:σταθερό και το περιεχόμενο παίρνει έμεινε επιπλέον χώρος, δίνοντας τη θέση του στο μενού. Στα προγράμματα περιήγησης Webkit ήταν ακόμη δυνατή η επίτευξη κινούμενων εικόνων μέσω μεταβάσεων CSS, δηλαδή, σε iPhone και Android το μενού θα μετακινηθεί αποτελεσματικά. Και πάλι, μπορείτε να δείτε και να πάρετε τα απαραίτητα στυλ
Προτείνω προς εξέταση μια τεχνική για τη δημιουργία ενός απλού, πολύ ευέλικτου στις ρυθμίσεις, και επίσης αρκετά αποτελεσματικού, προσαρμοστικού μενού, χρησιμοποιώντας ένα καθαρό σημασιολογική σήμανση, για την υλοποίηση προσαρμοστικού σχεδίου, χωρίς συνδέσεις javascript. Ως αποτέλεσμα, χρησιμοποιώντας το CSS, θα λάβουμε ένα μενού που μπορεί να ευθυγραμμιστεί προς τα αριστερά, δεξιά ή να τοποθετηθεί ακριβώς στο κέντρο, με επισημασμένα ενεργά/τρέχοντα στοιχεία, ένα μενού που μπορεί, όταν αλλάζει το μέγεθος του παραθύρου του προγράμματος περιήγησης, να αναδιατάσσεται γρήγορα σε μια αναπτυσσόμενη, κάθετη γραμμή πλοήγησης που φαίνεται υπέροχη σε οθόνες διάφορες κινητές συσκευές χρηστών (tablet, smartphone, φορητοί υπολογιστές και κινητά τηλέφωνα).
Εξετάσαμε το παράδειγμα και βεβαιωθήκαμε ότι το μενού μας λειτουργεί. Αυτή η μέθοδος είναι γενικά πολύ χρήσιμη όταν χρησιμοποιεί το μενού ένας μεγάλος αριθμός απόσυνδέσεις. Μπορείτε εύκολα να ομαδοποιήσετε όλα τα κουμπιά σε ένα ελκυστικό πλαίσιο που ανοίγει κατά την τοποθέτηση του δείκτη.
Πρώτα απ 'όλα, πρέπει να επισημάνουμε ολόκληρη την κύρια δομή του μενού μας. Δημιουργούμε ένα στοιχείο πλοήγησης, πράγμα που σημαίνει ότι θα ήταν λογικό και ακόμη και πρακτικό να χρησιμοποιήσουμε ένα στοιχείο HTML5, μια ετικέτα με μια κλάση με το ίδιο όνομα που έχει αντιστοιχιστεί σε αυτό, για τα επόμενα Μορφοποίηση CSSστυλ, καθώς και δημιουργία και απόλυτη τοποθέτηση του αναπτυσσόμενου μενού μπάρα πλοήγησης. Η τρέχουσα κλάση οδηγεί στον σύνδεσμο ενεργό / τρέχον μενού, η εμφάνιση του οποίου θα δημιουργηθεί χρησιμοποιώντας css.
- Σπίτι
- Σχετικά με εμάς
- Χαρτοφυλάκιο
- Οι Υπηρεσίες μας
- Επαφές
Όπως μπορείτε να δείτε, το μενού είναι μια απλή μη ταξινομημένη λίστα με ένα συγκεκριμένο ποσόσυνδέσεις. Ο αριθμός των πόντων μπορεί να είναι διαφορετικός, αλλά και πάλι δεν χρειάζεται φασαρία, όλα είναι εντός λογικών ορίων.
Στη συνέχεια, πριν πάμε πολύ μακριά, θέλω να σας υπενθυμίσω και να εξηγήσω σε όσους δεν γνωρίζουν ότι το HTML5 και αιτήματα μέσων ενημέρωσηςΤο ερώτημα δεν υποστηρίζεται από εκδόσεις IE παλαιότερες από 9 (καθόλου έκπληξη). Για να αποφύγετε τους πονοκεφάλους στο μέλλον και να κάνετε τα πάντα σωστά, υπάρχουν ειδικά σενάριακαι, με τη βοήθεια των οποίων μπορούμε να λύσουμε το πρόβλημα συμβατότητας συνδέοντάς τα με σύνεση στο έγγραφο της ενότητας.
Ολα. Τακτοποιήσαμε τη βασική σήμανση, οι τάξεις έχουν καταχωρηθεί και τα δεκανίκια έχουν προστεθεί. Τώρα ας προχωρήσουμε στον καθορισμό των στυλ των στοιχείων μενού, στη διαμόρφωση της εμφάνισης και στο να κάνουμε το μενού μας πραγματικά προσαρμοστικό.
Σετ στυλ Μενού CSSκάτω από τις οθόνες οθόνης επιτραπέζιους υπολογιστές, αρκετά τυπικό, δεν βλέπω το νόημα να μπω σε λεπτομέρειες. Θέλω απλώς να επιστήσω την προσοχή σας στο γεγονός ότι καθόρισα το στοιχείο display:inline-block αντί για το στοιχείο float:left
- .
- πόντοι */ περιθώριο : 0 ;
- στοιχεία */ ) .nav a ( οθόνη : μπλοκ ; padding : 5px 5px 5px 32px ; text-align : left ; ) .nav .current a ( φόντο : κανένα ; χρώμα : #666 ; ) /* όταν τοποθετείτε το δείκτη του ποντικιού πάνω από τα στοιχεία μενού * / .nav ul: αιώρηση (εικόνα φόντου: καμία ; ) .nav ul: αιώρηση li ( οθόνη : μπλοκ ; περιθώριο : 0 0 5 εικονοστοιχεία ; ) .nav ul : τρέχουσα διεύθυνση ( φόντο : url (εικόνες/εικόνα-έλεγχος. png ) χωρίς επανάληψη 10px 7px ) /* ανταποκρινόμενο μενούδεξιά */ .nav .δεξιά ul (αριστερά : αυτόματο ; δεξιά : 0 ; ) /* αποκριτικό μενού στο κέντρο */ .nav .center ul (αριστερά : 50% ; περιθώριο-αριστερά: -90 εικονοστοιχεία ; ) )
- πόντοι */ περιθώριο: 0;
- ) .nav .current ( εμφάνιση: μπλοκ; /* εμφάνιση μόνο ενεργή αυτήν τη στιγμή
στοιχεία */ ) .nav a ( εμφάνιση: μπλοκ; συμπλήρωση: 5 εικονοστοιχεία 5 εικονοστοιχεία 5 εικονοστοιχεία 32 εικονοστοιχεία, στοίχιση κειμένου: αριστερά; ) .nav .current a ( φόντο: κανένα; χρώμα: #666; ) /* όταν τοποθετείτε το δείκτη του ποντικιού πάνω από τα στοιχεία μενού * / .nav ul:hover ( φόντο-εικόνα: καμία; ) .nav ul:hover li ( εμφάνιση: μπλοκ; περιθώριο: 0 0 5 εικονοστοιχεία; ) .nav ul:hover .current ( φόντο: url(εικόνες/εικονίδιο-έλεγχος. png) χωρίς επανάληψη 10 εικονοστοιχεία 7 εικονοστοιχεία; 50% περιθώριο-αριστερά: -90 px;
Μάλλον αυτό είναι όλο! Το υπέροχο, 100% προσαρμοστικό μενού μας είναι έτοιμο, όπως μπορείτε να δείτε κοιτάζοντας ξανά το παράδειγμα. Για μια πιο λεπτομερή μελέτη του υλικού, μπορείτε να κατεβάσετε τις πηγές και ήρεμα, χωρίς περιττή φασαρία, να εμβαθύνετε στο θέμα.
Το μάθημα προετοιμάστηκε με χρήση υλικού
| Μενού /* */ .nav (περιθώριο: 20 εικονοστοιχεία 0;) .nav ul (περιθώριο: 0; συμπλήρωση: 0;) .nav li (περιθώριο: 0 5 εικονοστοιχεία 10 εικονοστοιχεία 0, συμπλήρωση: 0, στυλ λίστας: κανένα, εμφάνιση: ενσωματωμένο μπλοκ ; : #000 ; .nav .current a ( φόντο : #999 ; χρώμα : #fff ; ακτίνα περιγράμματος : 3px ; ) |
/* μενού */ .nav ( περιθώριο: 20 εικονοστοιχεία 0; ) .nav ul ( περιθώριο: 0, συμπλήρωση: 0; ) .nav li ( περιθώριο: 0 5 εικονοστοιχεία 10 εικονοστοιχεία 0, συμπλήρωση: 0, στυλ λίστας: κανένα, εμφάνιση: inline-block, *display:inline; : #000; ) .nav .current a ( φόντο: #999; χρώμα: #fff; ακτίνα περιγράμματος: 3 εικονοστοιχεία; )
Οι ενότητες .nav a:hover και .nav .current a είναι υπεύθυνες για την αλλαγή του χρώματος των συνδέσμων και του φόντου των ενεργών/τρέχοντων στοιχείων μενού, αντίστοιχα. Δεν προσπάθησα να είμαι πολύ έξυπνος σε αυτό το παράδειγμα, έκανα τα πάντα στο πνεύμα του μινιμαλισμού, όταν τοποθετείτε το δείκτη του ποντικιού πάνω στον σύνδεσμο το χρώμα αλλάζει, το κείμενο γίνεται μαύρο χρώμα: #000; και για τα ενεργά στοιχεία που προστέθηκαν φόντο φόντο: #999; , αντικατέστησε το χρώμα της γραμματοσειράς με λευκό χρώμα: #fff; και στρογγύλεψε τις άκρες με μια μικρή ακτίνα περιγράμματος: 3 εικονοστοιχεία; στο κουμπί που προκύπτει. Μπορείτε να φανταστείτε και να πειραματιστείτε από αυτή την άποψη με βάση την καρδιά σας.
Ευθυγραμμίστε κέντρο και δεξιάΌπως ανέφερα παραπάνω, μπορούμε να αλλάξουμε τη στοίχιση των στοιχείων πλοήγησης χρησιμοποιώντας την ιδιότητα text-align προσθέτοντας μερικές γραμμές κώδικα CSS:
| μενού /* στα δεξιά */ .nav .right ul (text-align : right ; ) /* μενού στο κέντρο */ .nav .center ul (text-align : center ; ) |
μενού /* στα δεξιά */ .nav.right ul (στοίχιση κειμένου: δεξιά; ) /* μενού στο κέντρο */ .nav.center ul ( στοίχιση κειμένου: κέντρο; )
Προσαρμογή του μενούΗ διασκέδαση αρχίζει. Το μενού μας σε αυτό το στάδιο έχει λαστιχένια μορφή (το πλάτος καθορίζεται ως ποσοστό) και δεν είναι ακόμη καθόλου προσαρμοστικό. Ξεκινήστε να αλλάζετε το μέγεθος της οθόνης και θα δείτε ότι το μενού είναι ενσωματωμένο σε ένα χαοτικό συνονθύλευμα κουμπιών.
Θα διορθώσουμε την κατάσταση χρησιμοποιώντας ερωτήματα μέσων. Στο σημείο εφαρμογής ερωτήματος μέσων στα 600 εικονοστοιχεία, ορίστε σχετική τοποθέτησηθέση: σχετική; για το στοιχείο πλοήγησης για να μπορέσουμε αργότερα να τοποθετήσουμε τη λίστα μενού
- επάνω σε απόλυτη θέση θέση: απόλυτη; . Χρησιμοποιώντας την ιδιότητα display: none, θα κρύψουμε όλα τα στοιχεία μενού li, αφήνοντας μόνο ενεργούς συνδέσμους με την τρέχουσα κλάση, εκχωρώντας τους την ιδιότητα display: block
Όταν τοποθετείτε το δείκτη του ποντικιού πάνω από μια ομαδοποιημένη γραμμή πλοήγησης, όλα τα στοιχεία μενού θα πρέπει να εμφανίζονται ως αναπτυσσόμενη λίστα για αυτό ορίζουμε έναν κανόνα.nav ul:hover li με τη συνάρτηση code>display: block. Για ενεργά/τρέχοντα στοιχεία προσθέτουμε ένα εικονίδιο για να τα επισημάνουμε από τα υπόλοιπα.
Εάν πρέπει να μετακινήσετε το μενού προς τα δεξιά ή στο κέντρο του, χρησιμοποιήστε τις ιδιότητες θέσης αριστερά και δεξιά για τη λίστα ul του μενού μας.
| Οθόνη @media και (μέγιστο πλάτος: 600 εικονοστοιχεία) (.nav (θέση: σχετική, ελάχ. ύψος: 40 εικονοστοιχεία;).nav ul (πλάτος: 180 εικονοστοιχεία, συμπλήρωση: 5 εικονοστοιχεία, θέση: απόλυτη, επάνω: 0, αριστερά: 0 περίγραμμα : συμπαγές 1px #aaa : #FAFAFA url (images/icon-menu.png) no-repeat 10px 11px : 0 1px rgba , . .nav li (εμφάνιση: κανένας; /* απόκρυψη όλων |
Οθόνη @media και (μέγιστο πλάτος: 600 εικονοστοιχεία) ( .nav ( θέση: σχετική, ελάχ. ύψος: 40 εικονοστοιχεία; ) .nav ul ( πλάτος: 180 εικονοστοιχεία, συμπλήρωση: 5 εικονοστοιχεία 0, θέση: απόλυτη, επάνω: 0, αριστερά: 0 περίγραμμα: 1 εικονοστοιχείο #aaa; 3) .nav li (εμφάνιση: κανένα; /* απόκρυψη όλων
