Με τη βοήθεια του κλασικού 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