Με τη βοήθεια του κλασικού jQuery, έχουν γραφτεί πολλά άρθρα σχετικά με αυτό το θέμα. Προσπάθησα να περιπλέξω λίγο την εργασία προσθέτοντας τη δυνατότητα διατήρησης των ενοτήτων μενού ανοιχτές (ή κλειστές, ανάλογα με την επιλογή του χρήστη) όταν μετακινούμαι στον ιστότοπο.
Για να λύσω αυτό το πρόβλημα, αποφάσισα να χρησιμοποιήσω το πρόσθετο jQuery Cookie. Το πλεονέκτημα αυτού του πρόσθετου είναι ότι η λειτουργία εκτελείται από την πλευρά του πελάτη, γεγονός που με τη σειρά του μειώνει το φόρτο στον διακομιστή. Μείον - εάν ο χρήστης έχει απενεργοποιήσει το JS, η προσθήκη δεν θα λειτουργήσει. Αλλά αυτή την επιλογήΔεν το θεωρώ, γιατί τότε όλο το νόημα του αναπτυσσόμενου μενού εξαφανίζεται εντελώς. Λοιπόν, ας ξεκινήσουμε.
Πρώτα, πρέπει να συνδέσουμε το ίδιο το πλαίσιο jQuery και το πρόσθετο jQuery Cookie:
Κωδικός: HTML
Ακολουθεί η σήμανση. Θα μοιάζει με μια απλή λίστα, τίποτα υπερφυσικό. Το μόνο που πρέπει να σημειωθεί είναι ότι στην ετικέτα
θα πρέπει να υπάρχει μια επικεφαλίδα, όταν κάνετε κλικ, ένα μενού θα πέσει έξω:
Κωδικός: HTML
Και ούτω καθεξής επί άπειρον. Τώρα, το πιο ενδιαφέρον. Στον κώδικα θα προσθέσω μερικά σχόλια για να είναι περίπου καθαρό, chopach
Κωδικός: JS
$(document).ready(function()(
if($.cookie("num_open_ul"))( // ελέγξτε αν υπάρχει καταχώρηση cookie
if($.cookie("num_open_ul") != 0)( // και αυτή η καταχώρηση δεν είναι ίση με 0
var number_eq = parseInt($.cookie("num_open_ul")-1);
$(".navigation_body").eq(number_eq).show().prevAll("#navigation h2.navigation_head:first").addClass("active_navigation");
}
};
$("#navigation h2.navigation_head").click(function()( // όταν κάνετε κλικ, αυτή η συνάρτηση θα λειτουργήσει
if(!$(this).next().is(":visible"))(
$("div.navigation_body").siblings("div.navigation_body").slideUp(500); // αν είναι ανοιχτά άλλα, κλείστε όλα εκτός από το τρέχον
}
$(this).next("div.navigation_body").slideToggle(500).siblings("div.navigation_body").slideUp(500);
$(this).toggleClass("active_navigation").siblings("#navigation h2.navigation_head").removeClass("active_navigation"); Το // open πρόσθεσε μια κλάση για να αλλάξει το στυλ
setTimeout(fncookie, 600); //η εγγραφή στα ίδια τα cookies με καθυστέρηση, ώστε το σενάριο να έχει χρόνο να ολοκληρώσει την εργασία πριν από την εγγραφή (500ms - ταχύτητα, καθυστέρηση - 600ms)
});
συνάρτηση fncookie()( // η ίδια η συνάρτηση εγγραφής
varnumber_open_ul = 0;
var i = 0;
$("div.navigation_body").each(function()(
i++;
if($(this).is(":visible"))(
number_open_ul = i;
}
$.cookie("num_open_ul", number_open_ul, (λήγει:3, διαδρομή:"/")); // Αποθήκευση 3 ημερών για ολόκληρο τον ιστότοπο.
});
}
});
Δηλαδή, τώρα, αν ο χρήστης άνοιξε το μενού, έφυγε από τον ιστότοπο και επιστρέψει σε αυτό σε λίγες μέρες, το μενού θα παραμείνει ανοιχτό για αυτόν.
Και τέλος, μας μένει μια μικρή πινελιά: στην πραγματικότητα, στυλ css. Το κάνετε σύμφωνα με το γούστο σας, στο παράδειγμα που πήρα το τελικό σχέδιο από ένα από τα έργα
Κωδικός: CSS
#πλοήγηση(
περιθώριο: 80 px auto;
πλάτος: 250 px
}
#navigation h2, #navigation h2.navigation_head (
μέγεθος γραμματοσειράς: 18 px;
βάρος γραμματοσειράς: πιο τολμηρή;
χρώμα φόντου: #ffb6c1;
φόντο-εικόνα: -webkit-gradient(γραμμικό, 50% 0,50% 100%, color-stop(0%,#ffe9e9), color-stop(100%,#ffb6c1));
background-image: -webkit-linear-gradient(#ffe9e9,#ffb6c1);
φόντο-εικόνα: -moz-linear-gradient(#ffe9e9,#ffb6c1);
background-image: -o-linear-gradient(#ffe9e9,#ffb6c1);
background-image: linear-gradient(#ffe9e9,#ffb6c1);
padding: 5px 3px 6px 3px
περιθώριο: αυτόματο;
θέση: σχετική;
}
#navigation h2.navigation_head:after (
θέση: απόλυτη;
δεξιά: 5px;
χρώμα: #550000;
περιεχόμενο: "cssb";
}
#navigation h2:hover, #navigation h2.navigation_head:hover (
δρομέας: δείκτης;
}
.active_navigation(
φόντο-εικόνα: -webkit-gradient(γραμμικό, 50% 0,50% 100%, color-stop(0%,#ffb6c1), color-stop(100%,#ffe9e9)) !σημαντικό;
background-image: -webkit-linear-gradient(#ffb6c1,#ffe9e9) !important;
background-image: -moz-linear-gradient(#ffb6c1,#ffe9e9) !important;
background-image: -o-linear-gradient(#ffb6c1,#ffe9e9) !important;
background-image: linear-gradient(#ffb6c1,#ffe9e9) !important;
}
.active_navigation:after (
θέση: απόλυτη;
δεξιά: 5px;
περιεχόμενο: "cssd" !important;
}
.navigation_body(
οθόνη: κανένας;
}
#navigation ul (
περιθώριο: 0;
γέμιση: 0;
list-style-type: κανένας;
}
* html #navigation ul li(
ύψος: 1%;
}
#navigation div.navigation_body ul li (
περιθώριο-αριστερά: 10 px;
}
#πλοήγηση α (
font-family: "Times New Roman";
display:block;
χρώμα: #918871;
padding: 3px
φόντο-χρώμα: #ffe3e0;
περίγραμμα-κάτω: 1px συμπαγές #fff;
κείμενο-διακόσμηση: κανένα;
}
#navigation a:hover(
χρώμα: #585858;
χρώμα φόντου: #ffb6cc;
}
Αν κάποιος έδωσε προσοχή, εδώ προσπάθησα να χρησιμοποιήσω το περιεχόμενο: +/- ιδιοκτησία όταν το μενού είναι κλειστό / ανοιχτό, αλλά μπορείτε να προσθέσετε μια εικόνα ή οποιοδήποτε άλλο σχέδιο. Μπορείτε να δείτε ένα παράδειγμα αυτού που κάναμε εδώ
Όπως πάντα, έτοιμος να ακούσει ερωτήσεις και να προσπαθήσει να τις απαντήσει. Ό,τι καλύτερο, ό,τι καλύτερο.
Πολύ συχνά στα πρότυπα μπορείτε να βρείτε αναπτυσσόμενα στοιχεία πλοήγησης. Οι προγραμματιστές χρησιμοποιούν δεδομένου τύπουκρυφά μενού για εμφάνιση πρόσθετων κρυφών συνδέσμων που σχετίζονται θεματικά με το κύριο στοιχείο. Μπορείτε να βρείτε παραδείγματα συρόμενων πάνελ ή διάφορα μενού σε στυλ ακορντεόν που εφαρμόζουν αυτήν την αρχή πλοήγησης.
Αλλά σε αυτό το σεμινάριο, θα δημιουργήσουμε ένα απλό αναπτυσσόμενο μενού με χρησιμοποιώντας jQuery. Θα λειτουργήσει με μια μέθοδο animation για να δημιουργήσει καθυστερημένα εφέ. Τα εφέ μετάβασης CSS3 εφαρμόζονται επίσης μαζί με τον κώδικα JavaScript. Το αποτέλεσμα είναι ένα κενό για την πλοήγηση στον ιστότοπο.
HTML
Ας δημιουργήσουμε πρώτα ένα βασικό πρότυπο HTML5. Θα χρειαστεί τελευταία έκδοση jQuery , το οποίο λαμβάνουμε από το Google API. Προσθέστε επίσης το αρχείο στυλ στυλ.cssπου θα παρουσιαστεί παρακάτω:
Τώρα σκεφτείτε τη δομή που είναι χτισμένη στην κορυφή της μη ταξινομημένης λίστας στην κορυφή της σελίδας. Ολόκληρη η λίστα είναι τυλιγμένη σε ένα στοιχείο HTML5 Για καλύτερα αποτελέσματα SEO.
Η δομή του κώδικα είναι αρκετά απλή. Κάθε στοιχείο λίστας περιλαμβάνει ένα εφέ επισήμανσης όταν βρίσκεται μέσα ο δρομέας του ποντικιού. Όλα τα εσωτερικά στοιχεία UL περιέχονται στο αρχικό στοιχείο λίστας, επομένως η εστίαση εισόδου δεν χάνεται κατά τη μετάβαση στα στοιχεία του αναπτυσσόμενου μενού.
Στυλ πλοήγησης
Το φύλλο στυλ περιέχει κώδικα για την επαναφορά των τιμών των ιδιοτήτων στις προεπιλογές. Πολλοί προγραμματιστές περιλαμβάνουν το αρχείο από τον Eric Meye, αλλά για την περίπτωσή μας είναι πολύ δυσκίνητο. Επιπλέον, ο κώδικας αποθηκεύεται σε άλλο διακομιστή, ο οποίος από μόνος του είναι κακή απόφασησε αυτήν την περίπτωση.
html, body, div, span, applet, αντικείμενο, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, ακρωνύμιο, διεύθυνση, μεγάλη, παραπομπή, κώδικας, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, ισχυρό, sub, sup, tt, var, b, u, i, κέντρο, dl, dt, dd, ol, ul, li, σύνολο πεδίων, μορφή, ετικέτα, θρύλος, πίνακας, λεζάντα, tbody, tfoot, thead, tr, th, td, άρθρο, κατά μέρος, καμβάς, λεπτομέρειες, ενσωμάτωση, εικόνα, figcaption, υποσέλιδο, κεφαλίδα, hgroup, μενού, πλοήγηση, έξοδος, ρουμπίνι, ενότητα, σύνοψη, ώρα, σήμα, ήχος, βίντεο ( περιθώριο: 0, συμπλήρωση: 0, περίγραμμα: 0, μέγεθος γραμματοσειράς: 100%, γραμματοσειρά: κληρονομιά, κατακόρυφη στοίχιση: γραμμή βάσης, περίγραμμα: κανένα; -webkit-font- εξομάλυνση: antialiased; -webkit-text-size-adjust: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; ) html ( ύψος : 101%; ) σώμα ( φόντο: #eaeaea url("images/bg.png"); μέγεθος γραμματοσειράς: 62,5%; ύψος γραμμής: 1; γραμματοσειρά-οικογένεια: Arial, Tahoma, sans-serif; padding-bottom : 60 εικονοστοιχεία; ) άρθρο, κατά μέρος, λεπτομέρειες, figcaption, σχήμα, υποσέλιδο, κεφαλίδα, h ομάδα, μενού, πλοήγηση, ενότητα ( εμφάνιση: μπλοκ; ) ol, ul (στυλ λίστας: κανένα; ) blockquote, q ( εισαγωγικά: κανένα; ) blockquote:before, blockquote:after, q:before, q:after ( περιεχόμενο: ""; περιεχόμενο: κανένα; ) ισχυρό ( γραμματοσειρά -weight: έντονη; ) πίνακας ( περίγραμμα-σύμπτυξη: σύμπτυξη; διάστιχο: 0; ) img ( περίγραμμα: 0; μέγιστο πλάτος: 100%; )
Υπάρχει μια ενδιαφέρουσα ιδιότητα στον κώδικα -webkit-font-smoothing. Έχει σχεδιαστεί για να εξομαλύνει τις γραμματοσειρές κατά την εκτέλεση κώδικα σε προγράμματα περιήγησης κάτω από Έλεγχος Mac OSX ή iOS.
Τώρα ας περάσουμε στο μενού μας.
#ddmenu ( οθόνη: μπλοκ; πλάτος: 100%; ύψος: 80 εικονοστοιχεία; περιθώριο: 0 αυτόματο; συμπλήρωση: 0 15 εικονοστοιχεία; φόντο: #fff; ακτίνα περιγράμματος: 6 εικονοστοιχεία; περίγραμμα: 1 εικονοστοιχεία στερεά rgba(0, 0, 0, 0.15 ) πλαίσιο-σκιά: 0 1px 1px rgba(20, 20, 20, 0.2); δρομέας: δείκτης; περίγραμμα: κανένα; βάρος γραμματοσειράς: έντονη; χρώμα: #8aa8bd; ) #ddmenu li ( οθόνη: μπλοκ; θέση: σχετική; float: αριστερά; μέγεθος γραμματοσειράς: 1,45em; text-shadow: 1px 1px 0 #fff; border-right: 1px solid #dae0e5; ) #ddmenu li a ( display: block; float: left; padding: 0 12px ; ύψος γραμμής: 78 εικονοστοιχεία; βάρος γραμματοσειράς: έντονη γραφή, διακόσμηση κειμένου: κανένα; χρώμα: #6c87c0; -webkit-transition: όλα 0,2 s γραμμικά, -moz-transition: όλα 0,2 s γραμμικά, -o-transition: όλα 0,2 s γραμμικά; μετάβαση: όλα τα 0,2 s γραμμικά; ) #ddmenu li:hover > a ( χρώμα: #7180a0; φόντο: #d9e2ee; ) #ddmenu ul (θέση: απόλυτη; επάνω: 88 px; πλάτος: 130 px; φόντο: # fff; οθόνη: κανένα, περιθώριο: 0, συμπλήρωση: 7 εικονοστοιχεία 0, στυλ λίστας: κανένα, ακτίνα περιγράμματος: 3 εικονοστοιχεία, περίγραμμα: 1 εικονοστοιχείο συμπαγές rgba(0, 0, 0, 0,2), σκιά πλαισίου: 0 0 5 px rgba(0, 0, 0, 0,2); )
Προσθήκη επιλογέα #ddmenuulγια να επισημάνετε όλα τα εσωτερικά στοιχεία σε κάθε στοιχείο λίστας, καθώς είναι σημαντικό να προσδιορίσετε την απόσταση για αυτά χρησιμοποιώντας απόλυτη τοποθέτηση. Προσθέτουμε επίσης μια γραμμική μετάβαση για όλους τους συνδέσμους, η οποία εμφανίζεται όταν τοποθετείτε το δείκτη του ποντικιού πάνω τους.
Ας δούμε τώρα τη δημιουργία του δείκτη του επάνω στοιχείου. Σχηματίζεται χρησιμοποιώντας την ιδιότητα περιστροφής και ένα γενικό πλαίσιο με σκούρο φόντο για τη σκιά. Με τη θέση μετατόπισης, ένα στοιχείο της δομής μας τοποθετείται πάνω από το άλλο και σχηματίζει μια οπτική αναπαράσταση του δείκτη στο αναπτυσσόμενο μενού.
#ddmenu ul:after ( περιεχόμενο: ""; πλάτος: 0; ύψος: 0; θέση: απόλυτο; κάτω: 100%; αριστερά: 8 εικονοστοιχεία; πλάτος περιγράμματος: 0 8 εικονοστοιχεία 8 εικονοστοιχεία 8 εικονοστοιχεία; στυλ περιγράμματος: συμπαγές; χρώμα περιγράμματος : #fff διαφανές; ) #ddmenu ul:before ( περιεχόμενο: ""; πλάτος: 0; ύψος: 0; θέση: απόλυτη; κάτω: 100%; αριστερά: 4 εικονοστοιχεία; πλάτος περιγράμματος: 0 10 εικονοστοιχεία 10 εικονοστοιχεία 10 εικονοστοιχεία; στυλ περιγράμματος : συμπαγές; χρώμα περιγράμματος: rgba(0, 0, 0, 0.1) διαφανές; ) #ddmenu ul li ( οθόνη: μπλοκ; πλάτος: 100%; μέγεθος γραμματοσειράς: 0.9em; σκιά κειμένου: 1px 1px 0 #fff ; ) #ddmenu ul li a ( οθόνη: μπλοκ; πλάτος: 100%; συμπλήρωση: 6 εικονοστοιχεία 7 εικονοστοιχεία; ύψος γραμμής: 1,4 εκ.; -webkit-transition: όλα 0,2 s γραμμικά; -moz-transition: όλα 0,2 s γραμμικά; - o-transition: όλα τα 0,2 s γραμμικά, μετάβαση: όλα τα 0,2 s γραμμικά; ) #ddmenu ul li a:hover ( φόντο: #e9edf3; )
JavaScript
Το πρώτο μέρος του κώδικα παρεμποδίζει τα κλικ σε συνδέσμους και σταματά την επεξεργασία τους από προεπιλογή (φόρτωση σελίδων στη διεύθυνση URL).
Το δεύτερο μέρος του κώδικα κάνει όλα τα μαγικά. Επισυνάπτουμε ένα πρόγραμμα χειρισμού συμβάντων για τη διαδικασία τοποθέτησης δείκτη του στοιχείου λίστας. Ο χειριστής θα σταματήσει την τρέχουσα ενεργή κίνηση και θα εμφανίσει το νέο δευτερεύον με .slideDown() . Ορίσαμε επίσης μια μικρή καθυστέρηση για να ανταποκρίνεται μόνο στην πραγματική επιλογή του αντικειμένου.
Εάν όλα αυτά τα στοιχεία τοποθετηθούν το ένα κάτω από το άλλο, τότε είναι πιθανό το μενού να γίνει τόσο μεγάλο ώστε το ύψος του να υπερβαίνει το ύψος του κύριου περιεχομένου. Από έξω δεν θα είναι πολύ όμορφο, εξάλλου δύσκολα βρίσκεις κάτι σε μια τόσο συνεχή λίστα. Για να ομαδοποιήσετε και να μειώσετε τα πάντα, πρέπει να κάνετε κάτι όπως ένα συρόμενο μενού.
Η αρχή του συρόμενου μενού είναι ότι τα στοιχεία μενού χωρίζονται σε ομάδες και αυτές οι ομάδες είναι κρυφές, μόνο το όνομα της ομάδας είναι ορατό. Όταν κάνετε κλικ στο όνομα, εμφανίζεται μια λίστα με έναν συγκεκριμένο αριθμό στοιχείων.
Πώς να φτιάξετε ένα συρόμενο μενού; Αυτό θα μας βοηθήσει - jQuery. Με αυτό, όλα θα λειτουργήσουν ομαλά και όμορφα, όπως στο παραπάνω παράδειγμα. Ας ξεκινήσουμε την εφαρμογή του συρόμενου μενού και ας κάνουμε μερικά πράγματα.
Σενάριο jQuery
Ως συνήθως, όταν εργάζεστε με το jQuery, πρέπει να συμπεριλάβετε τη βιβλιοθήκη του. Όλα είναι όπως συνήθως, στην κεφαλίδα ή στο υποσέλιδο που συνδέουμε, εκτός φυσικά αν το έχετε κάνει πριν, για άλλα σενάρια.
Μετά τη βιβλιοθήκη, προσθέστε το σενάριο. που θα εκτελέσει το animation Θα υπάρχουν 3 σενάρια, το καθένα από αυτά εκτελεί διαφορετικά animation.
Αυτό το σενάριο λειτουργεί με τέτοιο τρόπο ώστε όταν κάνετε κλικ στο όνομα της κατηγορίας, βγαίνει μια λίστα, αλλά όταν κάνετε κλικ σε μια άλλη κατηγορία, αρχίζει να επεκτείνεται, ενώ η πρώτη κλείνει. Δηλαδή, μόνο μία κατηγορία είναι πάντα ανοιχτή. Εάν χρειάζεστε ανοιχτές κατηγορίες για να μην κλείσετε αυτομάτως, στη συνέχεια αντικαταστήστε το σενάριο με το νέο που υποδεικνύεται παρακάτω.
Υπάρχει ένα άλλο σενάριο με το οποίο μπορείτε να αντικαταστήσετε το κύριο. Το χαρακτηριστικό του είναι ότι slide menu σε αιώρησησυμβαίνει. Δεν χρειάζεται να κάνετε κλικ, απλώς τοποθετήστε το δείκτη του ποντικιού πάνω από το όνομα της κατηγορίας και τέλος. Διαλέξτε λοιπόν ποιο σενάριο σας ταιριάζει καλύτερα.
Σήμανση HTML
Τώρα σε σωστό μέροςστον ιστότοπό σας, πρέπει να εμφανίσετε HTML- σήμανση. Λοιπόν, ή αλλάξτε ελαφρώς το δικό σας ώστε να γίνει παρόμοιο όπως στο παράδειγμα.
Δεν υπάρχει τίποτα περίπλοκο, όλα οργανώνονται με τη βοήθεια - ul-τόπος αγώνων.
Στυλ CSS
Και τέλος, για να ορίσουμε τη σωστή εμφάνιση για το μενού μας, πρέπει να καταχωρήσουμε στυλ. Εάν δεν είναι η πρώτη φορά που εργάζεστε με css, τότε μπορείτε εύκολα να προσαρμόσετε τα στυλ για τον εαυτό σας.
Ul#menu, ul#menu ul(list-style:none; περιθώριο: 0px; padding: 0px; πλάτος: 250px; -webkit-box-shadow:0px 0px 5px 0px rgba(50, 50, 50, 0.2); - moz-box-shadow: 0px 0px 5px 0px rgba(50, 50, 50, 0.2); box-shadow: 0px 0px 5px 0px rgba(50, 50, 50, 0.2);) ul#menu a,ul#men (οθόνη: μπλοκ; διακόσμηση κειμένου: κανένα;) ul#menu li (περιθώριο-πάνω: 1px;) ul#menu li a,ul#menu li span( φόντο: #1ba600; χρώμα: #fff; padding: 7px; ) ul#menu li a:hover,ul#menu li span:hover(φόντο: #333;) ul#menu li ul li a( φόντο: #eee; χρώμα: #000; padding-left: 20px;) ul# μενού li ul li a:hover(φόντο: #ηη;)
Δεν χρειάζεται τίποτα άλλο. Αυτή η μέθοδοςδεν είναι πολύ περίπλοκο και έχει πολλούς τύπους υλοποίησης, όλα εξαρτώνται από το σενάριο που θα επιλέξετε.
Αυτό είναι όλο, ευχαριστώ για την προσοχή σας. 🙂
Σε αυτό το σεμινάριο, θα σας δείξουμε πώς να δημιουργήσετε ένα πλευρικό αναπτυσσόμενο μενού για ακόμα πιο εύκολη πλοήγηση στον ιστότοπο. Αυτό το μενού είναι μια δημοφιλής τάση μοντέρνο σχεδιασμό ιστοσελίδων. Πολλοί ιστότοποι χρησιμοποιούν αυτόν τον τύπο μενού. Με αυτό, μπορείτε να απαλλαγείτε από το χάος στις σελίδες του έργου, να το κάνετε πιο ευανάγνωστο, εστιάζοντας την προσοχή των χρηστών στο κύριο περιεχόμενο.
Αυτός είναι ένας πολύ καλός τρόπος για να επιτύχετε μινιμαλισμό χωρίς περισπασμούς. Σήμερα θα δημιουργήσουμε μόνοι μας ένα τέτοιο μενού.
Για να δημιουργήσετε ένα μενού πλοήγησης, ας ρίξουμε μια ματιά στις ρυθμίσεις πρώτα:
Πρώτα πρέπει να φορτώσετε το Normalize.css και να προσαρμόσετε τα προεπιλεγμένα στυλ του προγράμματος περιήγησης, βεβαιωθείτε ότι το μενού φαίνεται ίδιο σε όλα τα προγράμματα περιήγησης. Θα χρησιμοποιήσουμε το FontAwesome για να εμφανίσουμε ένα βέλος μπροστά από στοιχεία μενού με υποστοιχεία. Για εναλλαγή κλάσεων στο μενού, φορτώνουμε το jQuery και μετακινούμε όλο τον προσαρμοσμένο κώδικα jQuery στο script.js. Ο τελευταίος σύνδεσμος είναι ο κύριος πίνακας για το έργο web.
Χάμπουργκερ εικονίδιο
Το εικονίδιο χάμπουργκερ είναι ένα κοινό χαρακτηριστικό πλοήγησης ιστότοπου. Συχνά δημιουργείται με μια γραμματοσειρά εικονιδίων όπως το FontAwesome, αλλά σε αυτό το σεμινάριο θα προσθέσουμε κάποιο κινούμενο σχέδιο, ώστε να το δημιουργήσουμε από την αρχή. Το εικονίδιο χάμπουργκερ είναι μια ετικέτα span που περιέχει τρεις κατηγορίες div, που αποδίδονται ως οριζόντιες γραμμές.
Τα στυλ μοιάζουν με αυτό:
Κουμπί εναλλαγής ( θέση: σταθερό, πλάτος: 44 εικονοστοιχεία, ύψος: 40 εικονοστοιχεία, συμπλήρωση: 4 εικονοστοιχεία, μετάβαση: .25 δευτ. -bar ( θέση: απόλυτη, ακτίνα περιγράμματος: 2 εικονοστοιχεία, πλάτος: 80%, μετάβαση: 0,5 δευτ. 0; ) .toggle-button .menu-bar-middle ( ύψος: 4px; background-color: #555; margin-top: 7px; margin-bottom: 7px; top: 4px; ) .toggle-button .menu-bar -κάτω ( περίγραμμα: 4 εικονοστοιχεία συμπαγές #555; περίγραμμα-πάνω: κανένα; επάνω: 22 εικονοστοιχεία; ) .button-open .menu-bar-top (transform: rotate(45deg) translate(8px, 8px); μετάβαση: .5s; ). translate(8px, -7px); μετάβαση: .5s; )
Το εικονίδιο έχει σταθερή θέση και δεν αλλάζει κατά την κύλιση της σελίδας. Έχει επίσης δείκτη z 15, που σημαίνει ότι θα βρίσκεται πάντα πάνω από άλλα στοιχεία. Αποτελείται από τρεις ράβδους, καθεμία από τις οποίες μοιράζεται άλλα στυλ. Επομένως, θα μετακινήσουμε κάθε γραμμή στην κλάση .menu-bar. Τα υπόλοιπα στυλ μετακινούνται σε ξεχωριστές κλάσεις. Το μαγικό συμβαίνει όταν προσθέτουμε μια άλλη κλάση στην ετικέτα span που είναι δημόσια. Το προσθέτουμε με το jQuery ως εξής:
$(document).ready(function() ( var $toggleButton = $(".toggle-button"); $toggleButton.on("κλικ", function() ( $(this).toggleClass("button-open" ) ) ) ) ) );
Για όσους δεν είναι εξοικειωμένοι με το jQuery, αρχικοποιούμε μια μεταβλητή με $toggleButton που περιέχει το εικονίδιο μας. Το αποθηκεύουμε σε μια μεταβλητή χωρίς να χρειάζεται Χρήση JavaScript. Στη συνέχεια, δημιουργούμε ένα πρόγραμμα ακρόασης συμβάντων που ακούει τα κλικ σε εικονίδια. Κάθε φορά που ο χρήστης κάνει κλικ στο εικονίδιο του χάμπουργκερ, ο ακροατής συμβάντος ενεργοποιεί τη συνάρτηση toggleClass(), η οποία αλλάζει την κλάση .button-open.
Μόλις προστεθεί η κλάση .button-open, μπορούμε να τη χρησιμοποιήσουμε για να αλλάξουμε τον τρόπο εμφάνισης των στοιχείων. Χρησιμοποιούμε τις συναρτήσεις CSS3 translate() και rotate() για να κάνουμε την επάνω και την κάτω γραμμή να περιστρέφεται κατά 45 μοίρες και η μεσαία γραμμή μετατοπίζεται προς τα δεξιά και εξαφανίζεται. Εδώ είναι τα κινούμενα σχέδια που μπορείτε να προσαρμόσετε:
Αναπτυσσόμενο μενού πλοήγησης
Τώρα που έχετε το εικονίδιο του χάμπουργκερ, ας το κάνουμε χρήσιμο και ας δημιουργήσουμε ένα αναπτυσσόμενο μενού όταν κάνετε κλικ σε αυτό. Ακολουθεί η εμφάνιση της σήμανσης μενού:
Δεν θα μπούμε σε λεπτομέρειες για κάθε στυλ για αυτό το μενού προς το παρόν, αλλά αντ' αυτού θα επικεντρωθούμε σε μερικά. σημαντικά σημεία. Πρώτα απ 'όλα, είναι μια τάξη div και .menu-wrap. Δείτε το στυλ του:
Περιτύλιγμα μενού (χρώμα φόντου: #6968AB; θέση: σταθερό; επάνω: 0; ύψος: 100%; πλάτος: 280 εικονοστοιχεία; περιθώριο-αριστερό: -280 εικονοστοιχεία; μέγεθος γραμματοσειράς: 1em; βάρος γραμματοσειράς: 700; υπερχείλιση: αυτόματη ; μετάβαση: 0,25 δευτ., δείκτης z: 10; )
Η θέση είναι σταθερή, επομένως το μενού παραμένει πάντα στην ίδια θέση κατά την κύλιση της σελίδας. Ένα ύψος 100% επιτρέπει στο μενού να καταλαμβάνει όλο τον κατακόρυφο χώρο στη σελίδα. Σημειώστε ότι το πεδίο στο αριστερό περιθώριο έχει οριστεί σε αρνητικό αριθμό ίσο με το πλάτος του μενού. Αυτό σημαίνει ότι το μενού θα εξαφανιστεί από τη θύρα προβολής. Για να το κάνουμε ξανά ορατό, δημιουργούμε μια άλλη κλάση εναλλαγής με το jQuery. Το αρχείο μας JavaScript θα μοιάζει με αυτό:
$(document).ready(function() ( var $toggleButton = $(".toggle-button"), $menuWrap = $(".menu-wrap"); $toggleButton.on("click", function() ( $(this).toggleClass("button-open"); $menuWrap.toggleClass("menu-show"); ) ); ) );
Προσθέστε μια άλλη μεταβλητή $menuWrap που περιέχει το περιτύλιγμα μενού. Χρησιμοποιήστε τον ίδιο χειριστή συμβάντων που δημιουργήσαμε νωρίτερα. Μόνο αυτή τη φορά αλλάζουμε δύο κατηγορίες: μία για το κουμπί και μία για το περιτύλιγμα μενού. Η τιμή του αριστερού περιθωρίου της κλάσης .menu-show είναι 0, αυτό θα προσθέσει ένα εφέ σκιάς.
Εμφάνιση μενού (περιθώριο-αριστερά: 0; πλαίσιο-σκιά: 4 εικονοστοιχεία 2 εικονοστοιχεία 15 εικονοστοιχεία 1 εικονοστοιχεία #B9ADAD; )
Υπομενού και σύνδεσμοι
Μπορεί να παρατηρήσετε ότι ένα από τα στοιχεία της λίστας έχει μια κλάση .menu-item-has-children που περιέχει ένα υπομενού. Επίσης, ακριβώς κάτω από τον σύνδεσμο υπάρχει μια ετικέτα span με την κλάση .sidebar-menu-arrow.
Το span έχει ένα::after pseudo-στοιχείο και περιέχει ένα βέλος FontAwesome. Από προεπιλογή, το υπομενού είναι κρυφό και θα είναι ορατό μόνο όταν κάνετε κλικ στο βέλος. Δείτε πώς μπορούμε να το κάνουμε με το jQuery:
$(document).ready(function() ( var $sidebarArrow = $(".sidebar-menu-arrow"); $sidebarArrow.click(function() ( $(this).next().slideToggle(300); ) ) ) );
Όταν κάνουμε κλικ στο βέλος, καλούμε μια συνάρτηση, η οποία με τη σειρά της στοχεύει το επόμενο στοιχείο αμέσως μετά το διάστημα (στην περίπτωσή μας, ένα υπομενού) και το κάνει ορατό. Η συνάρτηση που χρησιμοποιούμε είναι slideToggle. Κάνει το στοιχείο να εμφανίζεται και να εξαφανίζεται. Η συνάρτηση στο παράδειγμά μας έχει μία παράμετρο - τη διάρκεια της κινούμενης εικόνας.
Τα στοιχεία μενού στο παράδειγμα έχουν εφέ αιώρησης. Δημιουργείται χρησιμοποιώντας::μετά το ψευδοστοιχείο. Ο κώδικας μοιάζει με αυτό:
Πλαϊνή γραμμή μενού li > a::after ( περιεχόμενο: ""; εμφάνιση: μπλοκ; ύψος: 0,15 εκ.; θέση: απόλυτη; επάνω: 100%; πλάτος: 102%; αριστερά: 50%; μετατροπή: μετάφραση (-50% ); εικόνα φόντου: γραμμική διαβάθμιση (προς τα δεξιά, διαφανές 50,3%, #FFFA3B 50,3%); μετάβαση: θέση φόντου .2s .1s ευκολία εξόδου; μέγεθος φόντου: 200% αυτόματη; ) > a:hover::after ( θέση φόντου: -100% 0; )
Το ψευδοστοιχείο ::after περιέχει ένα στοιχείο επιπέδου μπλοκ στο κάτω μέρος κάθε συνδέσμου με πλήρες πλάτος και ύψος 0,15em. Όλα μοιάζουν με υπογράμμιση. Η ιδιαιτερότητα είναι ότι δεν εφαρμόζουμε απλώς ένα χρώμα φόντου στη γραμμή, χρησιμοποιούμε τη συνάρτηση linear-gradient() στο εικόνα φόντου. Αν και αυτή η συνάρτηση προορίζεται για τη δημιουργία χρωματικών διαβαθμίσεων, μπορούμε να αλλάξουμε το χρώμα καθορίζοντας το επιθυμητό ποσοστό.
Menu-sidebar li > a::after ( background-image: linear-gradient(προς τα δεξιά, διαφανές 50,3%, #FFFA3B 50,3%); )
Η μισή γραμμή εδώ είναι διαφανής και η άλλη μισή είναι κίτρινη. Κάνοντας το μέγεθος φόντου 200%, διπλασιάζουμε το πλάτος του μπλοκ μας. Τώρα το διαφανές τμήμα καταλαμβάνει όλο το πλάτος του συνδέσμου και το κίτρινο τμήμα μετακινείται προς τα αριστερά και γίνεται αόρατο. Αλλάζουμε τη θέση του φόντου του δείκτη του ποντικιού σε -100%. Τώρα το κίτρινο μέρος γίνεται ορατό και το διαφανές μέρος κρύβεται.
Αντί για το διαφανές μέρος, μπορείτε να χρησιμοποιήσετε οποιοδήποτε άλλο χρώμα. Μπορείτε επίσης να πειραματιστείτε με διαβαθμίσεις.
Κάθε ένα από τα στοιχεία που εξετάσαμε λειτουργεί ως σύνολο. Μπορείτε να δημιουργήσετε ένα τέτοιο μενού χρησιμοποιώντας οποιοδήποτε σχέδιο ιστότοπου από τη συλλογή TemplateMonster. Όπως μπορείτε να δείτε, αυτό είναι πιο εύκολο από ό, τι νομίζετε. Καλή τύχη στη δημιουργία επαγγελματικών και φιλικών ιστοσελίδων!
Για να γράψετε τη δική σας πλοήγηση με τη μορφή ενός κατακόρυφου αναπτυσσόμενου μενού στο jQuery με μια αναπτυσσόμενη λίστα υποκατηγοριών, πρέπει να κατανοήσετε την ίδια την αρχή αυτού του μηχανισμού. Αλλά πρώτα, ας ρίξουμε μια ματιά στη δομή πλοήγησης:
Πλοήγηση
Όπως ίσως έχετε μαντέψει, το αναπτυσσόμενο μενού μας βασίζεται σε λίστες με κουκκίδες. Όταν τοποθετείτε το δείκτη του ποντικιού πάνω από μια ετικέτα
- τεστ 1
- τεστ 2
- τεστ 3
- τεστ 4
Μα πώς, ρωτάς; Ναι, στην πραγματικότητα είναι πολύ απλό. Αρχικά, ας κατανοήσουμε το φύλλο στυλ της λίστας πλοήγησής μας, θα μοιάζει με αυτό:
Κύριο μέρος ( φόντο: rgb(244, 244, 244); γραμματοσειρά-οικογένεια: Verdana; βάρος γραμματοσειράς: 100; ) /*---Πλοήγηση---*/ #menu ( πλάτος: 200 εικονοστοιχεία, περιθώριο: 0, συμπλήρωση: 2px; ) #menu li ( list-style-type: κανένα; ) .menu (θέση: σχετική; φόντο: σοκολάτα; φόντο: -moz-linear-gradient(top, rgb(198, 255, 242), #2AC4B3) ; φόντο: -webkit-linear-gradient(top, rgb(198, 255, 242), #2AC4B3); background: -o-linear-gradient(top, rgb(198, 255, 242), #2AC4B3); περίγραμμα : 1px συμπαγές #2AC4B3; ) .menu:hover ( φόντο: #00c; φόντο: -moz-linear-gradient(top, rgb(230, 230, 230), #0CBFAB); φόντο: -webkit-linear-gradient( top, rgb(230, 230, 230), #0CBFAB); φόντο: -o-linear-gradient(top, rgb(230, 230, 230), #0CBFAB); ) .menu span ( πλάτος: 11px, ύψος: 11 εικονοστοιχεία, οθόνη: μπλοκ, θέση: απόλυτη, επάνω: 8 εικονοστοιχεία, δεξιά: 10 εικονοστοιχεία, δρομέας: δείκτης, ) .menu ul ( πλάτος: 150 εικονοστοιχεία, περιθώριο: 0, συμπλήρωση: 1 εικονοστοιχεία, θέση: απόλυτη, επάνω: -1 εικονοστοιχεία, αριστερά: 198 px; ) .menu ul li ( φόντο: σοκολάτα; φόντο: -moz-linear-gradient(top, rgb(198, 255, 242), #2AC4B3); φόντο: -webkit-linear-gradient(top, rgb(198, 255, 242), #2AC4B3); φόντο: -o-linear-gradient(top, rgb(198, 255, 242), #2AC4B3); περίγραμμα: 1px στερεό #fff; ) .menu ul li:hover ( background: #00c; background: -moz-linear-gradient(top, rgb(230, 230, 230), #0CBFAB); background: -webkit-linear-gradient(top, rgb( 230, 230, 230), #0CBFAB); φόντο: -o-linear-gradient(top, rgb(230, 230, 230), #0CBFAB); ) .menu a ( padding: 5px; display: block; text- διακόσμηση: κανένα; χρώμα: λευκό; ) .menu a:hover ( χρώμα: λευκό; ) /*---END---*/
Μπορεί να φανεί από το φύλλο στυλ ότι η αναπτυσσόμενη λίστα δεν είναι αρχικά κρυφή, αλλά θα διορθώσουμε αυτήν τη στιγμή με:
$(document).ready(function()( $(".menu ul").hide(); $(".menu span").css("background", "url("down.png")") ; $("#menu li").hover(function()( $(this).children("ul").show(); /*Ισοδύναμο με $("ul", this).show();* / $(this).find("span").css("background", "url("right.png")"); /*Iquivalent to $("span", this).css("background", "url ("right.png")");*/ ),function()( $(this).children("ul").hide(); /*Iquivalent to $("ul", this).hide (); */ $(this).find("span").css("background", "url("down.png")"); /*$("span", this).css("background ", " url("down.png")");*/ )) ))
Τώρα ας ρίξουμε μια πιο προσεκτική ματιά στον κώδικα του αναπτυσσόμενου μενού jQuery, επειδή. ίσως δεν θα είναι εντελώς ξεκάθαρο σε κάποιον. Στην αρχή γράφεται η ακόλουθη δομή:
$(document).ready(function()( ))
Περιέχει εντολές που πρέπει να εκτελεστούν μετά την πλήρη φόρτωση της σελίδας. Αυτό γίνεται για να μην εμφανίζονται διάφορα είδη σφαλμάτων, εάν είναι αδύνατο να βρεθεί κάποιο αντικείμενο λόγω του ότι δεν έχει ακόμη φορτωθεί.
$(".menu ul").hide();
Τι σημαίνει αυτή η καταχώρηση; Η κατασκευή "$()" σάς επιτρέπει να επιλέξετε στοιχεία. Επομένως, στην αρχή, πρέπει να κρύψουμε την αναπτυσσόμενη λίστα μας. Παίρνουμε την κατασκευή «$()» και γράφουμε το αντικείμενο που μας ενδιαφέρει σε αυτήν. Στην περίπτωσή μας, αυτό το αντικείμενο θα είναι λίστα με κουκκίδεςμε κατηγορία «μενού». Στη συνέχεια, γράφουμε τη μέθοδο "απόκρυψη ()", η οποία μας επιτρέπει να κρύψουμε το αντικείμενο που μας ενδιαφέρει.
$(".menu span").css("background", "url("down.png")");
Τι κάνει? Ψάχνει για ετικέτα γονικό στοιχείοστην οποία εκχωρείται η κλάση «menu» και, χρησιμοποιώντας τη μέθοδο «css("background", "url("down.png")")", στην ιδιότητα του στυλ "background" εκχωρείται η τιμή "url("down .png")". Το "down.png" είναι ένα εικονίδιο που υποδεικνύει ότι η λίστα μπορεί να επεκταθεί.
Μετά έρχεται η κατασκευή, η οποία θα ανοίξει τη λίστα μας, μοιάζει με αυτό:
$("#menu li").hover(function()( $(this).children("ul").show(); $(this).find("span").css("background", " url("right.png")"); ),function()( $(this).children("ul").hide(); $(this).find("span").css("background" , "url("down.png")"); )
Αναζητούμε μια ετικέτα της οποίας το γονικό στοιχείο έχει εκχωρηθεί id="menu". Στη συνέχεια ακολουθεί η μέθοδος "hover" και δύο συναρτήσεις σε παρένθεση. Η πρώτη συνάρτηση θα εκτελεστεί όταν τοποθετηθεί ο κέρσορας του ποντικιού και η δεύτερη θα εκτελεστεί εάν ο δρομέας του ποντικιού αφήσει το στοιχείο που μας ενδιαφέρει.
Η πρώτη συνάρτηση λέει:
$(this).children("ul").show(); $(this).find("span").css("background", "url("right.png")");
Η κατασκευή "$(αυτό)" σημαίνει ότι μας ενδιαφέρει το στοιχείο στο οποίο βρισκόμαστε αυτή τη στιγμήμυτερή (αυτό από τα αγγλικά αυτό). Και δείξαμε την ετικέτα
Μετά από αυτό, αναζητούμε τους απογόνους της ετικέτας, δηλαδή: η ετικέτα και το φόντο της αλλάζουν σε άλλο εικονίδιο.
Μετά από αυτό, γράφεται μια συνάρτηση που κάνει τα πάντα όπως ήταν αρχικά, αφού ο δρομέας του ποντικιού εγκαταλείψει το στοιχείο της λίστας:
Function()( $(this).children("ul").hide(); $(this).find("span").css("background", "url("down.png")"); )
Για να λειτουργήσει ο γραπτός κώδικας jQuery και το αναπτυσσόμενο μενού μας να λειτουργήσει σωστά, πρέπει να κάνετε λήψη της βιβλιοθήκης από τον ιστότοπο jquery.com και να τη συμπεριλάβετε γράφοντάς την μετά την ετικέτα ανοίγματος
σειρά.ΟΚ όλα τελείωσαν τώρα! Εν κατακλείδι, θέλω να σημειώσω ότι εάν ο ιστότοπός σας είναι αρκετά βαρύς, τότε το σενάριο πιθανότατα θα αργήσει πολύ (ο ιστότοπος θα χρειαστεί πολύ χρόνο για να φορτώσει) και οι χρήστες θα δουν πώς ανοίγει πλήρως στην αρχή και μόνο στη συνέχεια κρύβεται , που βλέπεις είναι πολύ άσχημο. Επομένως, είναι απαραίτητο να μετακινήσετε όλες τις εντολές jQuery πέρα από αυτήν την κατασκευή: "$(document).ready(function()())". Θα μοιάζει με αυτό:
$(document).ready(function()( )) $(".menu ul").hide(); $(".menu span").css("background", "url("down.png")"); $("#menu li").hover(function()( $(this).children("ul").show(); $(this).find("span").css("background", " url("right.png")"); ),function()( $(this).children("ul").hide(); $(this).find("span").css("background" , "url("down.png")"); ))
Συνδέουμε το σενάριό μαςπρέπει να μετακινηθεί από την ετικέτα
στο τέλος, πριν από την ετικέτα κλεισίματος, ή μπορείτε να συμπεριλάβετε το σενάριο αμέσως μετά τη λίστα με κουκκίδες.(λήψεις: 312)