Κάθετο μενού για την περιοχή, με τη μορφή της ένα ακορντεόν με jQuery

Το μενού, όπως γνωρίζετε - αποτελεί αναπόσπαστο μέρος της ιστοσελίδας. Ενδιαφέρουσες πλοήγηση σε απευθείας σύνδεση πόρος είναι σε θέση να τους επισκέπτες ενδιαφέρον. Επιπλέον, μια σημαντική ιδιότητα για κάθε μενού - συμπαγές του. Μια απλή κάθετο μενού που δημιουργήθηκε εύκολα με τη χρήση HTML και CSS. Αλλά θα προχωρήσουμε περαιτέρω: Ας μάθουμε να δημιουργήσουμε μενού- «ακορντεόν» με τη βοήθεια του jQuery.

Δημιουργήστε ένα μενού- «ακορντεόν»

Τι είναι ένα κάθετο μενού με τη μορφή της ένα ακορντεόν; Αυτή είναι μια αναπτυσσόμενη λίστα, η οποία δημιουργεί μια εύκολη στην πλοήγηση και δίνει ένα κομψό χώρο. Μενού, εκτελείται με αυτόν τον τρόπο, σας δίνει τη δυνατότητα να μετατρέψει πολλά επιμέρους στοιχεία. Η πρόσβαση σε αυτά εμφανίζεται όταν κάνετε κλικ με το ποντίκι στο επιθυμητό στοιχείο. Κάποιος μπορεί να πει ότι είναι δυνατό για να κάνει ένα απλό μενού με αυτόν τον τρόπο χωρίς τη χρήση jQuery. Ναι, είναι. Αλλά αυτό το αντικείμενο δεν θα ήταν πολύ χρήσιμο για τους ιδιοκτήτες των smartphones και tablet. Ας δημιουργήσουμε ένα κάθετο μενού, ελκυστικό για όλους. Στη συνέχεια, αλλάζοντας το χρώμα του στυλ μια πλοήγηση, θα είναι δυνατή η προσαρμογή του σχεδιασμού σε οποιαδήποτε τοποθεσία.

Ο κώδικας HTML

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

Αποθηκεύστε αυτόν τον κώδικα σε ένα αρχείο που ονομάζεται Accord_menu.html.

Όπως μπορείτε να δείτε, έχουμε δημιουργήσει μια μη διατεταγμένη λίστα. Αποτελείται από 3 κύρια σημεία:

- φωτογραφίες?

- ταινίες?

- τα βιβλία.

Κάθε στοιχείο έχει μερικές παραγράφους. Πού είναι #, θα πρέπει να προσθέσετε συνδέσεις. Τώρα είναι σημαντικό να περιγράψει το ύφος. Όλα εξαρτώνται από την εμφάνιση των πόρων σας στο Internet. Κάθετο μενού για την ιστοσελίδα θα πρέπει να ενταχθούν αρμονικά στο σχεδιασμό του.

CSS κώδικα

Με στυλ δεν πρέπει να είναι δύσκολο. Σημειώνουμε μόνο ότι σε αυτό το παράδειγμα χρησιμοποιεί ένα γέμισμα ντεγκραντέ. Εδώ είναι το CSS κώδικα:

χρώμα καθορίζεται στο CSS-αρχείο, οι δείκτες μεγέθους αφαιρούνται από τα στοιχεία της λίστας στα αριστερά. Δεν προσδιορίζεται πώς να συμπεριφέρονται σε κάθε στοιχείο και υπο-μενού όταν τοποθετείτε πάνω του. Για παράδειγμα:

# E1fee2 - αυτό το απαλό πράσινο χρώμα sub.

# C4f0f7 -golubovaty σκιά υπο όταν περνάτε από πάνω τους.

ιδιοκτησία Εμφάνιση ζητήσει αξίας μπλοκ για να ρυθμίσετε το απαραίτητο padding και το μέγεθος. Το χρώμα, το μέγεθος, τον τύπο γραμματοσειράς, η τοποθεσία - τα πάντα είναι όπως περιγράφεται στο αρχείο CSS. Κλήση αυτό, για παράδειγμα, accordionmenu_my1.css.

Σύνδεση jQuery βελτιώσεις μενού

Όπως ίσως θυμάστε, ο στόχος μας - να δημιουργήσει μια κάθετη jQuery μενού. Εάν δεν είστε εξοικειωμένοι με την τεχνολογία αυτή, μην ανησυχείτε. Χρησιμοποιούμε το αποθετήριο της Google και συνδέστε το σενάριο JQuery. Αυτό θα γίνει πιο ελκυστικό μενού κάνουν. jQuery είναι μια βιβλιοθήκη Javascript για βασίζεται στην αλληλεπίδραση των Hypertext Markup HTML και JavaScript. jQuery σας επιτρέπει να έχετε πρόσβαση στο περιεχόμενο και τις ιδιότητες των στοιχείων.

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

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